Migration to Hugo Framework

2019-04-24 4 min read Security "Erwin Bierens"

My journey in moving to Hugo

For more then 10 years I’ve been using Wordpress to run my blog site and now i have made the decission to switch to using Hugo, a static site generator. Now I’d like to share my reasons for doing this, and (perhaps) how you can do this too.

WordPress is pretty easy to use, and there are plenty of plugins allowing you to do pretty much anything. However, the numerous WordPress/plugin updates, upgrades and countless security flaws were making me feel it was time to replace WordPress for a static site.

Nothing performs as good as a static site. Caching gets much easier, performance goes up, and are far more secure.

Old Website

What is Hugo

Hugo is a static site generator written in Go which converts partial HTML files and Markdown files into a flattened HTML pack which can then be deployed to a web server.

Therefore there is no need for any database back-end or server-side logic.

Some Advantages:

Performance (As there is no back-end logic processing and rendering HTML, the application will be served to the client much faster).
Offline Editing (Blog articles are simple markdown files and can therefore be edited and saved offline. With Wordpress you must have an internet connection to be able to write the draft back to the MySQL database).
Security (With a CMS such as Wordpress your application is vulnerable to database hacking in order to inject post contents with spam links and scripts).
Markdown writing.

Migrating current Wordpress comments

One of my first steps was to migrate my comments to Disqus. It’s simply the simplest choice due to its ability to quickly integrate with WordPress and then continue to function on a static site.

I installed the WordPress Disqus Plugin, and it seamlessly integrated into my site and imported the comments into Disqus.

Note When using the new static site and you keep the titles/URLs the same this will integrate easy.

Export my current Wordpress posts.

I’ve not been using the pages much in WordPress so i focussed on migrating my posts. ExitWP saved my ass, all the default plugins did not work for me. Exported my posts to XML and in the ExitWP tool i ran the ExitWP.py script (did this on my RaspberryPi).

Once the script was finished i walked by all pages for a quick check on the layout (i’m pretty sure not everything is correct by now, but will change i see or hear from you ;) ).

Let’s setup Hugo!

Installation of Hugo

Chocolatey is a package manager for Windows. I’ve used this one in order to install Hugo on my Windows 10 computer.

First, ensure that you are using an administrative shell.
Copy the text specific to your command shell, powershell.exe.
Paste the copied text into your shell and press Enter.
Wait a few seconds for the command to complete.

You are ready to use Chocolatey!

  Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Then

    choco install hugo -confirm

Software installed to:

    'C:\ProgramData\chocolatey\lib\hugo\tools'

Upgrading Chocolatey

IF you want to update your package use:

choco upgrade chocolatey

Commands

Start a new site

Fire up PowerShell and browse to the directory where you want to create your new site (create a directory with mkdir )

Use the following command to create your site:

    hugo new <sitename>

keep in mind that all the commands you will run need to be done from within the root of the folder.

Create new blog post

First browse in to your folder and enter the following command.

hugo new post/2019-04-17-migration-to-hugo.md

Start server

Go to the folder where your site is located and type:

hugo server -D

Now open your favorite browser and browse to http://localhost:1313

Build website:

hugo -d <folder>

Themes for Hugo

You can find some themes to start with right here. Installation of themes is easy follow this guidelines from Hugo.

The theme i’ve used is based on Zhao Huabing, i’ve made some customizations in order to meet my wishes.

Redirect my old RSS feed url

Did this trick by making a redirect in my .htaccess

    <IfModule mod_rewrite.c>
    RewriteEngine On
    Redirect 301 /feed    https://erwinbierens.com/index.xml
    </IfModule>

End note

It was not an easy job to convert everything but i’m very happy with the first result and will try to add some cool features in the future. When i found something cool i will write this in a blog post.

Thanks to Michael LaMontagne, he gave me some ideas that helped me further. He transferred to Hugo also with his website.