Why My GitHub Page Failed to Deploy
I was working on a few tech blogs on my reading notes. I felt that the content of the blogs became verbose, it would be nice to add a table of content to these blog posts for easier navigation. I searched around and found one Jekyll plugin jekyll-toc, which fit to my problem nicely. I set it up and tested. It worked perfectly. Then I pushed my changes.
Boom, a build failure
The build log says:
Liquid Exception: Liquid syntax error (line 39): Unknown tag 'toc' in /_layouts/post.html /usr/local/bundle/gems/liquid-4.0.4/lib/liquid/document.rb:23:in `unknown_tag': Liquid syntax error (line 39): Unknown tag 'toc' (Liquid::SyntaxError)
It seemed that the Jekyll plugin
jekyll-toc is not officially supported by Github Page.
A Hacky Solution (Reference)
By understanding how GitHub Pages works for Jekyll, we can find one way to solve this problem - to build the static source files locally and push the generated files and serve that directly. Here’s the steps:
- Step 1: The site should be generated locally. Generate the
_site/in master branch by
bundle exec jekyll build
- Step 2: Then copy the
_site/*content to the /gh-pages branch and push
cp -r _site /tmp/ git checkout -b gh-pages rm -rf * cp -r /tmp/_site/* ./ git commit -a -m "your commit message" git push origin gh-pages
- Step3: This GitHub Page site will work after config the Page Build and deployment setting by serving the static files from /gh-pages branch as shown below
A Proper Solution
However the above approach is a bit manual and hacky. A better solution however, is to customize the GitHub Action Workflow. Touch the following config script as
.github/workflows/jekyll.yml. The key is that we need a proper Ruby Runtime for the build to run with.
Now it works for me!