This past weekend I decided to finally learn how to use GitHub Pages and to publish my static website using Jekyll. Please let me know if you find anything wrong with my approach, I’m not a software developer and have only used GitHub very little so far.
It’s possible to host your basic website directly from GitHub repository. By default, this must be a public repository, but you can make it private if you upgrade to GitHub Pro account.
Benefits of using GitHub Pages
use GitHub and git repository for making, tracking and pushing your website changes
no hosting fees – GitHub Pages are free
no need to install CMS or blogging software, unless you actually need a blog
save a copy of your website (no need for your hosting backups)
pick up and improve your git and GitHub skills as you go!
Project Plan for GitHub Page with Jekyll
setup a new GitHub repository named greys.github.io (it must match the GitHub username of yours, so if you’re UnixGuy on GitHub, your URL will be unixguy.github.io)
Learn Jekyll basics
Pick a Jekyll theme, clone it into my local working directory of website repo
Update the necessary files
Push website copy onto GitHub
Once greys.github.io works, update domain name
New GitHub repo
The repository for GitHub Pages must follow strict naming convention. For a user page (not a project), it must be username.github.io.
This should be a public repository, unless you have GitHub Pro account. Kind of makes sense for most websites, cause they’re meant for public accesso on the Internet. Still, double-check that you don’t publish any sensitive information on your Jekyll website!
Now it was time to make the updates. For now I just commented out the original values in code:
fixed colours in static/css/main.css
updated font to Verdana
updated default font size to 18px
updated _layouts/layouts.html to remove the Fork Me on GitHub ribbon (there’s still a link to the project at the bottom of resulting page)
changed projects.html and created a few more pages for my online interests
updated the _config.yml with my profiles and full name
Pushing changes to GitHub
This is the most fun part. For this tutorial, I actually initialise git repo only here, but in reality I’ve created it at the very start and had plenty of fun editing and committing changes – I discarded them all cause they’re not relevant for this task.
Tidy up git repos
Since we closed git repository of , there’s going to be .git directory in our website’s project. So it’s best to remove it:
Now we can proceed with initialising git repo of our own.
First, let’s initialise the repository and add files:
… let’s add all the files:
… and commit them to git repository:
Now, let’s add the remote repository, the online one from GitHub:
We are ready to push the code:
After a minute or two, your GitHub Pages URL should start serving your website. In my case, http://greys.github.io showed my pages.
Setup custom domain name
Since I’m using gleb.reys.net as the website URL, I need to update it in the GitHub settings for the repository: