Create Static Sites using Jekyll

Jekyll is a simple, blog-aware, static site generator. Instead of using databases, Jekyll takes the content, renders markdown or textile and liquid templates, and produces a complete, static website ready to be served by apache HTTP server, nginx or another web server.

Jekyll is flexible and can be used in combination with front-end frameworks such as bootstrap, semantic UI, and many others. Also, Jekyll is the engine behind gitHub pages, which means we can use Jekyll to host our project’s page, blog, or website from gitHub’s servers for free.

There are many static site generators out there. But the underlying idea is same. Getting Jekyll installed and ready-to-go should only take a few minutes.

Installation

The best way to install Jekyll is via RubyGems. So, Ruby version 2.2.5 or above has to be installed in the system. Open a terminal and run the following commands:

sudo apt-get install ruby-full
sudo gem install jekyll bundler

To check if Ruby and Gem are installed in the system:

ruby -v
gem -v

Create Blog

Create a new blog using Jekyll:

jekyll new my-blog
cd my-blog
bundle exec jekyll serve

Now browse to http://localhost:4000 and you can see that the site is already running.

Deploying to GitHub

GitHub Pages are public web pages for users, organizations, and repositories, that are freely hosted on GitHub’s github.io domain or on a custom domain name of your choice. Our site will be automatically generated by GitHub Pages when we push our source files.

For deployment, I prefer GitLab because it allows to create private repositories and I don’t want to make my blog source code public in GitHub. Also, the deployment is super easy in GitLab.

Create a .gitlab-ci.yml file inside our project directory:

image: ruby:2.3

variables:
  JEKYLL_ENV: production

before_script:
  - bundle install

test:
  stage: test
  script:
  - bundle exec jekyll build -d test
  artifacts:
    paths:
    - test
  except:
  - master

pages:
  stage: deploy
  script:
  - bundle exec jekyll build -d public
  artifacts:
    paths:
    - public
  only:
  - master

Go to GitLab and create a new project. Name the project username.gitlab.io, replacing username with our GitLab username. Add this repository to our project and push our first commit:

git init
git remote add origin https://gitlab.com/username/username.gitlab.io.git
git add .
git commit -m "Initial commit"
git push -u origin master

That’s all. Our work is done. Go to Jobs section of our project in GitLab and we will see that our project build is running. After the build is complete, our blog will be live at http://username.gitlab.io

Bonus

By default, Jekyll comes with Minima theme and it has the options to add Google Analytics and Disqus comment. We just have to enable these features from the configuration. Edit _config.xml and add the following lines:

google_analytics: your_google_analytics_id
disqus:
  shortname: your_disqus_shortname

Now add the line below in the Front Matter of each post to display comments:

comments: true

Normally, Google Analytics and Disqus comment work in the production environment. So, commit and push the changes to GitLab repo and GitLab will automatically build the project. After the build, we can see these features in the live site.

For further learning, see Jekyll Documentation.