Creating your own github.io website

Posted by Darwin Biler on January 10, 2015

So I decided I'll launch a site for one of the Facebook pages that I own which is Web Developers Meme . Instead of buying a hosting for it, i just decided I'll just host this thing in github to conserve the cost of hosting, given that this site was just an start-up.

I decided to use Jekyll as my publishing platform, since it was very easy to work with, specially for static web sites like this. It's also the best way to publish sites in github.io, so there is  a clear-cut decision for choosing it.

This post basically use the webdevelopersmeme.com site as a sample, for showing how the process is made.

Create the github organization

Though you can use your github username to create your github.io site, I would recommend to just create a new github organization for it. You can do that by going to your account settings then clicking the organizations  menu on the left side.  Just click the "New Organization" button in the upper right to create your new organization. Be sure to name your organization properly, since that will be the one in assigned in the url. For example, in my case, my new organization is webdevelopersmeme. So, the url of that will gonna be

webdevelopersmeme.github.io

Create the repository where the site files will be committed pushed into.

In order to serve web pages in your github pages, you need to create a new repository under the organisation you just had created.  The repo name should be the same as the github pages url. So it should be webdevelopersmeme.github.io in my case.

thus https://github.com/webdevelopersmeme/webdevelopersmeme.github.io

Push static files in your repository

You can just put a static html files, js and css in that repository that you just had created. But since in my case, I would need to make it so that its not so hard to manually copy paste every change in each static HTML files, there is somewhat a need to make it dynamic, without using PHP or any scripting language. That is when I used Jekyll.

I would not go over what is Jekyll, since that is its own long topic, but you can check that in its own website.

This is the steps I've made in able to setup a very basic Jekyll site and publish it to my repo.

Once you had pushed it, you might think you can check the site load the pages you just had pushed right away -- but its not.
When I go to webdevelopersmeme.github.io after I had pushed my first Jekyll site, this is what I get
Screen Shot 2015-01-10 at 7.09.09 PM

I would still need to wait for more than 30 minutes, for my Jekyll site to serve my contents. So I think I'll just wait for that. Patience is a virtue, remember? :-)

after 40 minutes of waiting ..

hurray, its loading now:
Screen Shot 2015-01-10 at 7.36.22 PM

I got a basic Jekyll site running, all for me to do is to put actual contents and customize colors and design.
Soon, I'll put a custom domain for this, instead of the standard webdevelopersmeme.github.io
For now, I'll start focusing in creating the contents itself, before I even publish it in its own domain, so stay tuned!


Did you find this useful?

I'm always happy to help! You can show your support and appreciation by Buying me a coffee (I love coffee!).