Create and deploy a Jekyll blog to Github pages

What better way to inaugurate my blog than to explain how to set up something similar?

This blog uses a commonly used tool and service: Jekyll and Github Pages.

What is Jekyll?

To quote their website:

"Jekyll is a simple, blog-aware, static site generator. It takes a template directory containing raw text files in various formats, runs it through a converter (like Markdown) and our Liquid renderer, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server."

It is widely used by the tech-blogging community and more importantly, is extremely easy to set up with Github pages !

What is Github Pages?

Github Pages allows any Github user to host a static website directly from a Github repository, all free of charge.

The website you are currently viewing is one of them, and so is my personal website !

On this blog post we'll focus solely on the deployment of a Jekyll blog, but I might write about how to deploy an Angular4 website in the near future.

Step 1: Setup Github Pages

Start by creating a repository named `username.github.io`

Replace username with your Github username (so in my case, I have inputed christopherkade.github.io):

Then clone your repository (this example uses a terminal):

1git clone https://github.com/username/username.github.io
2

In order to test that everything works as intended, enter the project folder and add an `index.html` file:

1cd username.github.io
2echo "Hello World" > index.html
3

Finally, push it:

1git add --all
2git commit -m "Initial commit"
3git push -u origin master
4

And that's all you need ! Open up your browser of choice and go to https://username.github.io.

Step 2: Setup Jekyll

Let's start by generating Jekyll's starter blog (make sure you are root):

1gem install jekyll bundler
2jekyll new my-blog
3cd my-blog
4bundle exec jekyll serve
5

Step 3: Deploy our Jekyll blog

Everything is explained here, but in short:

You must use a gem (a Ruby package) created by the Github Pages team. Add it to your Gemfile:

1source "https://rubygems.org"
2
3gem "github-pages", group: :jekyll_plugins
4

Run bundle update.

Deploy everything to your Github Pages repository

All we have to do is push the contents of our Jekyll repository to our username.github.io repository.

To do so (in your Jekyll blog repository):

1# initialize the local directory as Git repository
2git init
3
4# add the files in our Jekyll repository
5git add .
6
7# commit them
8git commit -m "Initial blog commit"
9
10# don't forget to replace the remote URL with your own
11git remote add origin https://github.com/username/username.github.io
12
13# check if the remote URL is correct
14git remote -v
15
16# finally, push everything to the master branch
17git push origin master
18

And voilà ! Your Jekyll blog should be up and running, you can now start blogging at your hearts content.

Optional: personalize your blog

You can always personalize your Jekyll blog with various themes, for example, this blog uses John Otander's Pixyll theme.

It might take a short while to have everything set up, but it's a rather simple process that is very similar to what you have just achieved. Don't forget to check out Jekyll's official documentation for more information on theming.

Final thoughts

Github Pages and Jekyll are two very cool free tools that should be used by anyone who wishes to set up a personal blog, website or project. There is a lot of documentation out there to help you achieve your goals, like setting up a domain and custom domain.

I hope this post has been of help to some of you,
Until next time,
@christo_kade