How I Ditched WordPress For HUGO: Non-Engineer/Designer Edition

How I Ditched WordPress For HUGO: Non-Engineer/Designer Edition

WordPress is ultimately useful. But for me, who carries portfolio website and blog on same domain, who do bilingual blogging (in English and Japanese), it’s sometimes annoying… And I’m nerdily curious about minor way of tech-use. In details, I’m curious about Slow Web and Indie Web movements…

And, furthur more, I’m a huge fan of Markdown. I want to manage articles with it easily.

So, I switched from WordPress, Google Analytics, etc… to HUGO – a static website generator which cheerfully used among engineers (though I’m a designer), Matomo, and so on. Here’s why and how:

Contents

What I Wanted To Do

  • Easy multilingual website management.
  • Make my website as lighter as possible without lacking userbility.
  • I want to care more about visitors' privacy.

The reason why I switched wasn’t only the annoyance of multilingual website management (I’ll talk about it later on), but also I felt a little bit maintenance fatigue. I needed to update WP itself and plugins time-to-time…

Don’t get me wrong. As I wrote at the top, WordPress is ultimately useful, in general. It’s easy to find a solution when you get stucked, simply because everybody use WordPress. But this dynamic CMS needs to generate codes to show pages to every single visitor. This caused slow loading speed. I didn’t want this situation not by too many images or by server’s backbones but the CMS’s reason.

About visitor’s privacy, I always think “I don’t want to clutter my mind with over-detailed data like their providers and their interests! Please just let them private…!” I, personally, only need to know what pages people interested in.

Alternatives

I determined alternative tools of these giants with the help of The Plain Text Project (this website set a fire in my heart) and No More Google (An alternative list of Google services from browser to business tools).

/* I’m not an Anti-Googlist. Yes, I concern about the privacy issue, but I think it’s okay to use the services intentionally. Of course, YouTube is one of them. And I use Drive, Docs and Spreadsheet as well, because these are just useful for sharing data with clients or co-workers in business. Although, my prefer search engine is {< a href=“duckduckgo.com/” title=“DuckDuckGo” target="_blank" >}}, and the maps app I only have in my phone is Apple Maps. Both services are used to return crappy results in years ago, but time has passed. Now I use them happily without any annoyance.

  • WordPress → HUGO

    • HUGO is a free, open-source static website generator which allows you to build fully coded pages from markdown articles by hitting a simple terminal command “hugo -D” on your computer.
    • HUGO doesn’t need database and control panel online, so it’s secure.
    • It has multilingual feature by default. So I didn’t need to find a plugin.
    • It generates not only static html pages, but also RSS feeds (by language).
    • There are many themes. (But at this time, I made an original theme by myself.)
    • As a non-engineer, HUGO’s quickstart documentation was much easier to understand than Jekyll’s it.
  • Contact Form 7 (WP plugin) → JotForm

    • JotForm is a freemium e-mail form hosting service.
    • Thanks for WSYWIG form builder and modern themes, I could make an e-mail form in seconds.
    • But it doesn’t have a function to reverse “first name” and “last name” order. So I had to reorder them with CSS manually to make Japanese version of a contact form.
  • Google Analytics → Matomo

    • Matomo is an open-source, self-host (or you can choose cloud service) web analytics system.
    • It awares visitors' privacy, and corrects only necessary information to analyse, such as country, visiting pages and time. It’s enough to know what’s popular in my website.
    • But it seems that visitor’s country is defined by language settings of the browser, not by actual location.

Matomo analytics dashboard

Impression of HUGO

My first impression about HUGO was: Even the quick start document is something hard to understand fully, because I’m not familiar with programming, and because most of the documents are written for those who are well-knowledged about command line… But I sometimes use Terminal to maintain my computer. I maybe can do it.
And it was true. I’ve done make over my website with HUGO. I’m such a geek…

Anyway, if you are not a programmer and first time, you shoud do:

  1. Open Terminal (if you use a Mac) and install Homebrew.
  2. Run Homebrew on Terminal, install HUGO, and then build a new website with commands.
  3. On terminal, hit commands to install/change the theme of the new website, or manually download a theme and edit index.toml (or .yaml/.json in preference).

All the basic things must be operated on Terminal.

Once you’ve built a new website, you can choose and install a theme via Hugo Themes, but you can also build your own website theme by yourself. I went this way, and I felt it’s not so much difficult than making WordPress theme. Only custom shortcodes, which I needed to open external links in new tab (HUGO doesn’t allow to insert HTML in .md files), embed some social media posts, and so on. Anyway, all you need is a skill enough to make a WordPress (or similar) theme.

In my case, I took two days to understand how HUGO works, and three days to build an original theme with Bootstrap helped me to visualise my design much quicker.

Once I’ve done testing design and function on local server (“hugo server -D”), what I have to do was very simple:

  1. Generate whole website to static pages (“hugo -D”).
  2. Upload everything in “public” folder of the project via FTP.

That’s all. If I find any mistakes after uploading, fix it, regenerate (“hugo -D”), then upload all the newer files again. Personally, I feel this workflow is simplar than it using control panel (login, find certain section, etc).

Conclusion

My website, which is now made with HUGO seems absolutely lighter. Maybe this is just 0.X second difference, but actually it’s enough to make visitors to feel comfortable with less loading time. (And it’s funny that the major cause of taking off the score of Page Speed Insights is Google Fonts' API.)

Score of Page Speed Insights by Google Search Console (PC)
Score of Page Speed Insights by Google Search Console (Mobile)

And of course, handling multilingual website is now much easier. In WordPress with Polylang plugin, I had to upload images to media library, copy and paste paths of the images from one to another language to insert into both posts. Because WP’s media library shows only images which tagged to the language of current editing post.

Now I don’t have to do such a complex thing. I just write same relative paths in “post-name/index.en.md” and “post-name/index.ja.md”.

Post directories with HUGO

Honestly, I think HUGO is not a non-engineer friendly platform, but if you love simplicity, it’s worth to give it a try.