Mauriat Miranda     mjmwired

Go Hugo

*tap* *tap* is this thing on?

So after a great deal of internal debate, I ditched server-side LAMP based blogging software and migrated to a statically generated system, namely Hugo. Ultimately the decision came down to maintenance. I was creating content at a lower rate than Wordpress (and its plugins/themes/etc.) required updates. Nevermind the need to keep the server software (Apache, MySQL, PHP) secure and updated as well.

Even though the migration was painful and the new system can be restricting, I’m glad I did it. Ultimately Hugo is a great resource for producing technical documentation quickly and having the content last indefinately.

Migration

I used exitwp-for-hugo which converts a Wordpress export into MarkDown files compatible with Hugo. In retrospect this was a bad idea. Not only did I have to tweak the code to get my content right, I still had to manually adjust a large number of files for markup issues and then write additional code to manually add the categories.

My recommendation: is to write some custom PHP or Python code with some SQL to just export all past content as HTML and use unsafe = true under [markup.goldmark.renderer] to render it. Then write only your future content in MarkDown (or if you must revisit a past post, manually update it).

Comments

I know community participation is important but given my update frequency, I’m just not going to deal with comments for now. I’ll revisit in the future.

I didn’t really see a common convention for comments in Hugo. In my above Python code, I just decided to extract comments into a YAML array and store them in the front matter as comments parameter for each file. Then in my template I iterated through them. I don’t know if this was the right solution and it looks messy, but it worked well and I don’t intend to do it again.

Example markdown parameter:

comments:
  -
    id: 123
    author: somebody
    date: 2012-06-11 06:16:49
    content: "thank you that works!"
  -
    id: 145
    author: BobSmith
    date: 2012-06-21 07:28:25
    content: "Comment with html.<br>Thanks for the post."

Example template snippet:

  {{ if .Params.comments }}
    <p>{{ len .Params.comments }} Comments:</p>
    <ul>
    {{range .Params.comments}}
      <li><h6>{{ .author }} on {{ dateFormat "January 2, 2006 ~ 03:15 PM" .date }}</h6>
      <p>{{ .content | markdownify }}</p></li>
    {{end}}
    </ul>
  {{end}}

Deployment

I’m waiting for all the 404 errors to show up so I can write mod_rewrite rules to redirect. The cool thing about Hugo is all ~1,700 html files render in less than 200ms! So its quick to patch an error and push updated files. And the resulting static content can be deployed on practically any webserver with minimal work.

Future Learnings/Updates

While writing content is quick and easy, tracking it and filtering the meta data can be a bit confusing. I’m sure there are tips and hints out there to help. For now I’ll assume that tags and categories may be quirky.

I still have a long list of tweaks needed for the output side as well.

  • I need to find a better Contact method. I’ve been terrible about this, but you can find me on twitter or figure out my email rather easily.
  • The styling needs some creativity (I do miss my old blue).
  • Still lots of “\” and unicode conversion issues.
  • Related: I would like to possibly release a custom theme for Hugo. None actually appealed to me and I wanted something simple.

On a personal note, this undertaking was spurred by being forced to work-from-home due to Covid-19. I am really glad that I found something to put my energy into. I look forward to publishing some technical content (and personal posts as well) in the near future.

Posted in: Website,