Hey this is Cameron McKenzie @cameronmcnz on Twitter and I want to talk to you about GitHub
pages and specifically how to get started with GitHub pages and start hosting your own website
for free now here's a fun little website that I created probably 15 years ago all about how
springfield and the simpsons is based on pickering ontario and I haven't hosted it in a long time so
I just downloaded the site looks like a couple of little errors here and there but I wanted to host
it I thought I might host it over on GitHub using GitHub pages so how would I do that so the first
thing you need to do is you need to go over to GitHub and sign up so I'm going to go pickering is
springfield as the username pickering is springfield mcnz.com
and throw in a little password and sign up for GitHub a little verification is required so I will
pick the spiral galaxy and I will join for a free plan i'll answer the required questions and then
after doing all of this I will then go into my email and here we go there is GitHub
asking me to verify my account i'll paste that url in here and there we go we now have
a GitHub account with the user account created it's time to create a repository now if you
just created your user account you may have this join page but if you've got an existing account
you'll probably have to go to your repositories page and create a new repository here I'm going
to hammer on that new button and I'm going to create a new repository now this repository has
to have the exact same name as the owner my the owner's name here is pickering is springfield
that name has to be exactly the same as the username and it has to end with GitHub dot
io I owe everybody something I owe the bank I owe the mortgage company but it has to be that it has
to be your username dot GitHub.io if you don't do it like that the GitHub pages will not work I'm
going to add a readme to the file make sure that it's public create the repository also notice it
says here this will set main as the default branch main is replacing master on GitHub in order to be
culturally sensitive and historically sensitive as well that's a good thing however it's a bad thing
for GitHub pages because if I go to settings here notice this settings link at the top I'm going to
hammer on settings and I'm going to scroll down to GitHub pages and I doubt this problem will exist
after november december 2020 but it exists right now and you will notice that GitHub pages are
being hosted on the branch master which doesn't exist they may as well be hosted on marge because
without a master branch to host those files nothing's going to work I have to go in here
and switch to the main branch there is no master branch now you can create it if you
created and put html pages there it will work or you can switch to main and that will work
but if you don't do one or the other and click save your pages will not work so make sure
the branch that you create exists the branch that is hosting your GitHub pages exists if it doesn't
create it or switch it now something else that will happen is if you add GitHub pages or you
start working with GitHub pages later on sometimes the branch name will be gh dash pages GitHub will
create that for you so always make sure you are on the correct branch when you are creating
pages so I'm now on the main branch life is good this will work I am now going to go back to code
I'm going to create a file right off the bat and I'm going to just call this file dot no jekyll
they say this is a good idea to create if you're just hosting static pages that do not use the
jekyll framework for managing your templates and your layouts so I'm going to put a file name no
jekyll there to indicate to GitHub that this is just static pages and then I'm going to create
another file and I'm going to call this index.html and this will be the world's worst
it will be the world's worst html page
because it won't even have a starting html tag it won't even have a body tag but it should be
good enough to get this application to work to get GitHub pages to work and to be able to prove out
that while things are working properly so there we go pickering is springfield.github.i matches the
username right here on the readme page it actually tells me what the link is going to be to get to my
GitHub pages pickeringspringfield.github.io and if I do slash index.html in the browser I should
come to my html page now I am filibustering and talking and chatting and the reason I'm doing that
is because it usually takes a few minutes for your html pages to get incorporated so I'm going to
paste that in there slash index.html and all of a sudden hello world this is my GitHub page and
GitHub pages are working isn't that awesome now if you just want to see how GitHub pages work you
could exit right there but i've got this pickering is springfield website that I want to host over
on GitHub pages here are all the files on my local machine you can see them right there lots of stuff
I want all of these files to be hosted in GitHub including this new index.html file how do I do
it well what I do is I go back to GitHub and under code I see this link here for code once
again seems redundant redundant I click on this little icon to copy my GitHub url so I copy that
then I go into this temp folder I created you could create any folder I'm going to open up bash
and then I'm going to run a git clone command git clone and then I'm going to paste that url in and
that will then clone my entire repository I do an ls command you can see i've got my simpsons folder
and i've got pickering as springfield I'm going to cd into pickering is springfield so you can see
I'm now inside the pickering of springfield folder I can do a git branch command
tells me that I'm on main notice there's no master no master anymore and what I'm
going to do is I'm going to take all of the files from my simpsons website copy them all
and then paste them notice the old index.html is there I'm going to paste all the new files in
there do you want to replace that index.html yes I do that's the heart of my pickering is springfield
site all of the files are now there inside that new repository on my local machine I have to do
a git add command I need to do a git commit dash m pickering is springfield will be the commit
I get push origin this will push all those files back to the server pickering is springfield
is the username and the password I have to type in I'm not going to tell you what that is
but i'll type that in and that will push all of those files back to the server if I go back to my
GitHub account notice right now in GitHub i've got one two three files if I do a refresh here
bang you can see my entire website has now been moved up to the server with all the
folders the subfolders the files even that cool index.html file which represents my
good old pickering is springfield page with that done I should be able to come over here
to this index.html file I'm going to check to make sure that that all worked properly
it did I will come to the new index.html file click enter to refresh the page and there we go
my pickering of springfield website is now hosted over on GitHub pages and there you go that's how
easy it is to get your own web page your own static web page hosted over on GitHub pages
and there you go that's how easy it is to use GitHub pages now if you enjoyed this tutorial why
don't you head over to theserverside.com we've got lots of great tutorials over there on git
GitHub and everything to do with enterprise software development if you're interested in
my antics you can follow me on twitter at cameronmcnz and subscribe on youtube