Hello World!

After several hours work, finally I got the Jekyll + Gitlab.io Pages setup. This post is intent to record the process about how to setup a personal blog by using awesome markdown site Jekyll and host it on Gitlab.io.

Why Blogging

Today, most of people turns to twitter, facebook, snapchat, instantgram. Why I still need a blog? I asked this question to myself many times. When I looked back to my past almost 10 years, there is almost nothing left except several sentences in the resume.

  • What I did?
  • What I learned?
  • I should have learned a lot. But what are they?

So I decide to write blogs to record my journey of software development.

Why Jekyll

The purpose of my blog is quit simple, just to record my journey of software development. I don’t need fancy features. And as a developer, I really like to write a blog rather just like coding. So I decide to see whether there are tools which can let you use Markdown to write your blog. Definitely, I’m not the only one who wants to use markdown to build a web blog. Finally I decide to use Jekyll because:

  • It is easy to setup. You only needs ruby installed.
  • It can generate the static pages which can be easily hosted without additional programming.
  • It has lots of themes if you want to choose from.
  • You can almost control every thing of your site.
  • Simple, you just needs several command to make your blog.
  • Sublime Text supports.

I believe there must be other tools like Hexo and more. As I just needs a simple tool, to avoid the situation I spending lots of time investigating which tools is better I did before. This time I just did a very rough evaluation. I found Jekyll satisfy all my needs.

Why Gitlab.io

I began with searching to host my static website on the S3 or Google Cloud. But accidentally found that using Gitlab.io could easily satisfy my requirements. It provides three key features I like:

  1. Private project. This blog is purely my hobby, and journey, the contribution to the blog should be restricted to myself.
  2. Custom Domain. Yes, that makes it look like a personal blog with your own domain.
  3. Pipeline/CI. This is awesome. It allows you write a blog like developing a software. It is, right?

Setup

Before you start

Make sure you carefully pick a user name on gitloab.io. You will only get domain like username.gitlab.io. If you don’t plan to purchase a domain by yourself. Do carefully pick your user name.

Setup the Gitlab Project

It is highly recommend to fork the sample Jekyll project from gitlab.io’s sample project. But it is not hard to setup from scratch.

Create a project

Once you registered on gitlab, you can go directly to the projects page and create a project named as “yourusername.gitlab.io”. So that this projects will be mapped to your subdomain yourusername.gitlab.io. Any other name, it will only be appear as youruersname.gitlab.io/projectname/. If you chose different name when creating, you can change the project name later in Project’s settings page.

Project creation

Add your SSH Key

If you never used gitlab before, you have to upload your ssh pub key to gitlab. On the gitlab personal settings page. They have a detailed guide on how to do it.

Pull your project to local

Now you’re ready to pull your project to your local machine. Just

git clone [email protected]:username/username.gitlab.io

Install Jekyll

If you are on Ubuntu, you need to install rubygems and ruby-dev packages before you install jekyll

sudo apt-get install rubygems ruby-dev

If you have ruby installed. It should be quit simple

gem install bundler jekyll

Use Jekyll to initialize your local project

You can skip this step if you created your project from the Jekyll example project from gitlab.

jekyll new path/to/your/project

Run Jekyll locally to test your posts

You can run Jekyll locally on your host and see the changes in real time. The command is as follows

bundle exec jekyll serve --host 0.0.0.0

If you don’t specify the --host it will listen on 127.0.0.1:4000 by default.

Add .gitlab_ci.yml to your project

ou can skip this step if you created your project from the Jekyll example project from gitlab.
You can also download the file from .gitlab_ci.yml. If you download from the link, remember to rename the file to .gitlab_ci.yml.

Push to your remote repo and enjoy.

git push

Wait for about 2 or 3 minutes to let the system build your website. And enjoy!

Useful tools: