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.
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 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.
.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
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:
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.