Make a super-fast blog using Hugo+GitHub+online editor for free

Oct 23, 2019

When your site starts responding in the sub-10 millisecond range, something magical happens. It’s so fast, that it almost feels unreal.

Total setup time: ~2-4 hours first time following the info below.

This is how I made https://systemfailure.io:

The general idea:

  1. Use GitHub for storing all blog markdown and theme files in nokola/blog
  2. Use GitHub actions to Hugo-build the static site from nokola/blog to nokola/nokola.github.io
  3. Use GitHub Pages to specify that nokola/nokola.github.io will publish on https://systemfailure.io
  4. Use Forestry.io for online editing of the markdown. Saves to GitHub nokola/blog directly.
  5. Test the final speed using https://testmysite.io/, rejoice, and gloat (FYI: it’s faster than Netlify, the leading speed provider.)

After all setup is done, the data flow looks like this:

                               GitHub Actions               
                               Autobuild               GitHub Pages   
           Human saves blog    Using Hugo ~45sec       Auto-publish (10-30sec)
                 |               |                           |
forestry editor --> nokola/blog --> nokola/nokola.github.io --> systemfailure.io

The whole auto-publish takes about 1.5 minutes from clicking Save in Forestry to until the site is live.

Setup steps:

  1. Use Hugo to bootstrap a blog on your repository (e.g. nokola/blog). Posts are in markdown.
    Hugo is the “world’s fastest framework for building websites” according to their homepage.
  2. Add a CNAME file in the static folder pointing to your final site, e.g. systemfailure.io.

Example: nokola/blog/static/CNAME

  1. Build the site using peaceiris/actions-hugo into nokola/nokola.github.io:
    • Sign up for GitHub actions.
    • Add ssh deploy key (instructions) and secret to allow GitHub Actions to publish to nokola/blog -> nokola/nokola.github.io. I named my secret NOKOLA_BLOG_WRITE_KEY
    • Add this settings file: publish-blog-hugo.yml, which explains the steps to publish blog –> nokola.github.io. Also references the above secret: NOKOLA_BLOG_WRITE_KEY
      At this point, you will have auto-buildable site from nokola/blog to nokola/nokola.github.io!
  2. Setup GitHub Pages to publish to systemfailure.io. Multiple steps here, see https://pages.github.com/
  3. Sign up for free account on forestry.io, import nokola/blog and start writing!

Here’s another useful benchmark across world severs: https://performance.sucuri.net/domain/systemfailure.io

Bonus: setup comments in < 5 min using https://utteranc.es.
Utteranc.es is a lightweight comments widget built on GitHub issues.
Here’s the code I copy-pasted to add comments to my blog, also see commit:

<script src="https://utteranc.es/client.js"
    repo="nokola/blog"
    issue-term="pathname"
    label="comment"
    theme="github-dark"
    crossorigin="anonymous"
    async>
</script>

Then I added this .css:

.utterances {
    margin-left: 0;
}

Enjoy!