Use Travis CI for Jekyll site generation


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:

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:

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
  - 2.7

    - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer

# branch whitelist
    - master # test the master branch

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

  - bundle install

  - 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

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