Use Travis CI for Jekyll site generation

Introduction

I have been using Jekyll for my homepage site generation for months and I’m happy with it. Usually my workflow for posting a new page involves:

Create the source file (.md files)
Commit the changes
Run bundle exec jekyll serve -w to view the post in my local computer
If satisfied, run JEKYLL_ENV=production bundle exec jekyll build to generate the public content
Copy the public content to another folder used for publication

Automation with bash script

You can see this is a lot! And posting a trivial page like a short intro or recommendation takes non-trivial time. Later I wrote a bash script that help me handle most of the steps so that I can focus on the content rather than the infra-side things.

This solution works pretty well and I stick to it for a while. But… It’s just ugly and I finally decided to bring modern CI tools into the play.

Automation with CI/CD tools

I have been using Jenkins during my internship and it seems a good starting point. However, I want to try something different (another kind of exploration). I tried Circle CI this morning and it’s pretty cool. What about Travis? It has been installed in my Github account for a long time and I did not use it before. I finally chose Travis because its interface looks much cleaner and cute.

The integration is pretty simple:

Add a .travis.yml config file for Travis-CI to use
Configure the repo in the Travis-CI dashboard
Set up GitHub tokens for the CI bot to be able to deploy my public content in a separate branch (e.g. gh-pages) so that I can simply push the updates to master and let travis to help me update the gh-pages branch

Jekyll has its own tutorial about setting up Travis CI with GitHub, which is pretty good. You may find my .travis.yml file below as a good starting point if you want to do the same thing too:

language: ruby
rvm:
  - 2.7

env:
  global:
    - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer

# branch whitelist
branches:
  only:
    - master # test the master branch

cache: bundler # caching bundler gem packages will speed up build

install:
  - bundle install

script:
  - JEKYLL_ENV=production bundle exec jekyll build
  - bundle exec htmlproofer docs --check-html --empty_alt_ignore --http-status-ignore 999 # For now, ignore 999 error from linkedin links

deploy:
  provider: pages
  local_dir: docs
  target-branch: gh-pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN # Set in the settings page of the repository, as a secure variable
  keep_history: true
  on:
    branch: master # Only deploy when current branch is master

Note that I use htmlproofer to check if there’s any broken links. I ignored errors like empty alt attribute and 999 error code from LinkedIn links. You can adjust it for your needs.

For the GitHub token, you can reference Travis’s documentation on how to set up the GitHub token for Travis.

Thank you and Enjoy.