Yohanes Bandung Bondowoso

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.

##So I tried Hugo!#

“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:

This is an
example of table
cool isn’t it?

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>

##Current Features#

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 formats
  • This unordered task list (ordered version is available too!). I omit the disabled property on purpose, because of a bug.
  • Code, block code and block quote
  • Footnotes!
  • Responsiveness
  • Dark mode toggler (if JavaScript enabled on browser)
  • 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 😄

Cheers!

Footnotes:

  1. The more original idea was to create this with ReasonReact, as written in my other post. ↩︎

  2. Like the one you probably noticed already. This is one. ↩︎

Published on 🔗, tagged: #webdev #meta

If you have any feedback, please comment below or contact me at hi@ybbond.id

Webmentions ?:

Submit your WebMention reply URL:

Does not know WebMention?
Use commentpara.de to reply: