Migrating My Blog to Hugo
In the start of 2020, I planned to expand my personal page to not only contain my “CV”, but also use it as my blog. That webpage is created with ReactJS, and my original idea was to make a new page that fetch data from GitHub Gist, then parse the Markdown file to HTML file1. I also planned (and I will not drop this one, for the sake of learning) to make that webpage server rendered.
After 20% progress of making Markdown to HTML parser, I got tired. Instead of reinventing the wheel, I thought that my time can be used to write my blog. So I researched for a static site generator. My primary writing tool, iA Writer boasts that it supports Ghost, Wordpress and Medium. I omitted Medium because I want to self-host the site. I omitted Wordpress too, because I am not too good at PHP Language. Then I try searching for Ghost, turns out it’s a paid service.
Other options I found was Jekyll, Hugo, nanoc and Gatsby. I tried Gatsby for work and side projects, and the two others just doesn’t fit my needs.
“Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).”
John Gruber, Creator of Markdown
The main feature I like is that it parses Markdown automatically. This allow me to make post with iA Writer, my currently favorite writing tool for iPad. It supports the flavor of Markdown that parses footnotes! I love footnotes2!
It also generates RSS for each page.
It has native support for tables:
I can also insert code snippets! Yeay!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example HTML5 Document</title> </head> <body> <p>Test</p> </body> </html>
The default features from hugo itself already awesome, but my goal for this site is very opinionated. There are some features that I’d like to be implemented:
- Basic text
- This unordered task list (ordered version is available too!). I omit the
disabledproperty on purpose, because of a bug.
Code, block code and block quote
- Replace default image to lazyloaded image
- Simple script to view footnotes on hover
- Anonymous tracker (I always wonder whether anybody read my blog or not 🧐)
Update: I have implemented GoatCounter analytics. Read my post about it.
I am genuinely happy for using Hugo. I might keep using this for a while, before I’ll have an itch to try other static site generators 😄