Hello welcome to part 8 of github, git, and all that stuff for
poets and in this particular video.
I'm going to show you how to have your poem or whatever it is you're making - webpage
hosted through github so your git repository on github
can actually be uh... you can get free web hosting with it so.
And this is by using something called github pages. Github pages is a
rather large topic because there are tons of features that it has available for
you but I'm not sure the very basics.
Just how to take your files and have them viewable through you R.L.
So that's the first thing that I'm in a do in this particular video so
if you've been following these videos along there's these important git concepts
that I've been covering in each one of these videos commits we have
a repository a commit is like a same branch is ticking.
Is having a separate branch of changes that you might merge into your
master branch later if you like those changes there's push and
pull of pushing being to send and pull being to to retrieve so
there's all the stuff that I've covered in all these other videos and
the exciting thing is that using git hub pages
all of this stuff works identically exactly the same way.
So you can have a project that you are working on through git keeping track of
its history collaborating through gits but if you flip a switch and
it's on git hub you can actually view that project as
directory of as as if it's hosted on a website so let me show you how this works.
The key to it is that on your brain.
The key is that typically by default your git branch is called Master.
That's the sort of like fundamental core branch of your project where you're
like flight rules things are your main poem your main code whatever it
is lives in the master branch for github pages to work.
You want to get rid of this idea of having a master branch you still can have one but
for simplicity.
You could just think of your master branch as being called.
gh - pages.
So as long as the branch that you're working on is called gh-pages.
There is automatically a secret your well by which you can access.
Now there's a lot more to this how but
I'm avoiding saying that now and I'll get to it later.
So let's come back up and the so let's just do this right now.
It's actually going to be quite simple and easy.
I'm going to go.
I'm on my profile page I'm the rainbow coder for lack of a better username.
And I'm going to make a new repository and I'm going to call this poem website.
So this is my repository name poem website says ridiculously bad for
repository name but that's fine.
You could come up with something better and this poem will be on the Internet.
And really on the World Wide Web talking about.
So that's my description it's going to be public.
I want to initialize it with a read me.
So you can see what I'm doing so I'm just making a new or
positively through the github.
Interface.
Just like I always have before.
So one hundred I'm going to create repository.
There it is now I have this repast So
notice here that by default the repository lives in the master branch.
So in order for
two years github pages all the thing to do is click here and make a new branch.
So I'm going to type in git hub - pages and
I'm going to select Create branch gh- pages.
So now I have this branch gh-pages.
Now here's the thing that Master of branch is still there and
in fact if I were to go to this repository again by default.
It's going to put me on to the master branch.
So to make things simpler.
I want to make sure that gh-pages is the default branch.
So where I do that.
I need to go to settings so I'm going to click on settings and under settings.
I'm to go over here to brand.
Is on a click on branches and over here.
Notice here this is where it says default branch.
So I want to go to this default branch place and
I want to switch default branch and I want to switch it to G.H.
pages and then I want to click update now it's going to it's going to say like
my goodness changing your default branch could have unintended consequences.
It can and this is you know it's reliving a little bit in the danger zone here.
But what's the big deal if there's nothing in this are positive and yet
I'm just making a poem and
messing around this is actually quite OK to do with a brand new or positive.
You're not affecting anything else that's happened in the history because there is
no history so far so I'm going to say I understand update the default branch and
now the default branch is G.H. pages so if I go back to this loops.
Poem website repository.
You can see that I am now by default in the branch G. H. pages.
Now there's a little bit.
This is fine and I could stop here but I want to be really I'm really serious about
github pages But I'm not stop I'm I'm of all it on github pages.
So I also want to go over here to branches where this is the link where I could view
what are all the branches associated with this repo and I'm going to click here.
And I'm going to see that the default branches G.H.
pages but I still have this other branch of Master.
So over here on the right hand side there's this little trash icon.
I can click this and
actually delete the master bridge and this is worth doing because I
don't want to by accident ever work on the master branch in this particular case.
So I'm going to delete this branch and
you can see it's gone it's kind of x-out
I now all I have now is a G.H. pages bridge.
OK we did it this for positive is now or a positive hosted through good pages.
So I can I can go to settings by the way and
I can scroll down under github-pages.
You can see here.
Your site is published at this U.R.L. So by definition is.
If you have gh-pages branch in your repository the U.R.L.
for that repository will be your user name dot GitHub dot
IO slash the repository name which in this case is poem website.
Now here's the thing you absolutely can use a custom URL
for example I have plenty I have several websites posted through github
pages nature of code dot com for example is hosted with github pages but
it isn't at Shiffman Dot Github Dot I O slash nature of code.
So there is a way to do that and
on another video we will explore that as a topic.
It's just a good sort of configuration thing but
you get this sort of free URL that you can use.
Now let's go to that URL and you can see here.
It's going to say page not found the reason is there are no files there.
There's no files there for me to look at I mean maybe in the repository.
There is a file called Read Me I might be a look at that.
But let's let's take a step further.
Let's add a file.
So I'm going to go here under create new file.
And I'm just going to name the file.
Now I'm just going to make a temp plain text file.
I'm going to call it poem dot T.X.T. and
I'm going to do I'm going to write some poetry git hub.
Pages git hug
It's that I wrote that by accident.
I'm the keep it githug git hug is a hug on the pages.
Oh Dear this poem is terrible.
OK So that's my poem you can you send me a pull request to approve it
I'm going to do commit new file and
you can see that it's committing it directly to the G.H. pages branch and
you can see there it is so I can see it here in my github repository.
But now look at this.
I can go to the U.R.L. and I can put it in there.
Poem.
So I can access that particular file and there you can see there it is.
I now have a web
Page with this particular poem on now that web page is a plain text file.
So all it shows up as raw text those of you who have used the Internet before or
browse the web have noticed that web pages have different fonts and images and
animations so.
To go further with this to actually host a dynamic web site through get home
pages you need to actually have H.T.M.L. files.
Perhaps also image files perhaps also something called C.S.S. files.
The whole set of the totals about how to use H.T.M.L. C.S.S.
and javascript to create different kind of web pages that could go and look at it and
come back to this but I'm going to leave going to just one step.
I'm going to make an H.T.M.L. poem just here.
So you can see a little bit more.
So what I want to do now is I'm going to go back and
I'm going to say another I'm going to create another new file and
you know what I'm going to call this file index . html
If you name a file index .html then you don't actually have to
type in that file name on the web.
It will be the default file that's open whenever I go to.
Rainbowcoder dot github dot
IO Slash Poem website.
So I'm to call it that and then I'm going to type looks.
I'm going to type some H.T.M.L. into this file you know I'm probably missing some
things you're supposed to have in H.T.M.L. but H.T.M.L. is all about having these
tags open H.T.M.L. close H.T.M.L. open body closed body and in the body.
I can put something like h1 which means header one and I can say poem and
then I could say like H three by Daniel Shiffman.
And then I could say like P. which is for a paragraph and I could say this.
You know Rainbow rainbow you are my rainbow and.
I could put a period and close the paragraph and
you can see this is you can check out my other tutorials to learn
More about H.T.M.L.
but this is writing some markup which is giving it some formatting and
I'm going to just add a little more formatting like I'm going to add strong.
So this is going to make that particular rainbow bold and
then I'm going to hit commit and I say making an H.T.M.L. poem and I'm
going to commit that new file and you can see now what do I have in my repast story.
I know the index studied in dition a poem dot T.X.T.
and if you remember this is what poem dot T.X.T. looks like.
However now if I go to the URL and I just get rid of that right.
And I want to go to just the core U.R.L. rainbowcoder github dot IO slash.
Poem website and I hit enter.
You can see there is my poem and formatted so I've now used a little bit of H.T.M.L.
and it's freely available on the Internet.
This is a website.
People can contribute to this website by making poll requests.
You can make changes to it through the github interface.
You could clone that repository down to your computer the same way I showed you in
other videos you could make branches you can make changes.
Just remember the one thing that's going to be different.
I'm actually going to let's do this really quickly.
Let's say you want to work with this locally.
I want to get I'm going to go to clone or download.
I'm going to copy this particular this U.R.L. and go to terminal.
This is something that I did in a previous tutorial if you need to go back and
look at that and I miss a first of all just so you know I'm on the desktop of my
computer and I say git clone.
So we can see now that here is that.
You can see there are the files.
One thing for you to remember if I say.
No it's telling me I am on Branch G H dot pages.
So if I ever want to get updated changes get pull.
Normally we were saying things like get pull origin master no longer
is there a master branch.
So I have to remember if I've use any of these other
get commands to always use G.H. dot pages.
OK So there you go.
That's the basics of it you can put image file anything that you can do in
a web page you can put into this repository.
You can add stuff you can commit stuff.
Your whole web pages there online for anyone to work to see and
for you to work with through the through the git.
Platform.
What I'm going to do in the next video for those of you who might have come to
this series by working with something called P5 js I'm going to show
you how to actually take a code example something that has H.T.M.L. C.S.S.
and Javascript and a host that with github pages which would be quite simple.
But I'm just going to put that in a separate video because it does
involve programming in source code but you can actually just.
Still just with this video put a text file or some basic H.T.M.L. on line.
OK Thanks for watching and let me know what questions you have in the comments.