Christian Bargmann

M.A. student in computer science. Living and working in Hamburg, Germany. Programming addicted. Loves coffee! 🍵❤️⚓

github twitter telegram email
Bye Wordpress! Moving to Hugo - A static web generator written in Go!
Dec 8, 2017
5 minutes read

hugo-logo

The success of WordPress can be easily tracked using Google search queries for the various CMS. Nevertheless, Wordpress didn’t convince me, it annoys me.

It slows down the creation process and causes security problems and maintenance. That’s why I moved my blog to Hugo, a static website generator. In this article I show my motivation for moving from Wordpress to Hugo and I refer to tips and tricks for the migration from the widely used CMS to the static website generator.

My personal reasons for moving from WP to Hugo

I’ve been writing a Wordpress blog for a long time now and have only posted something sporadically. Again and again it has been noticed how slow Wordpress is but with all the features it offers. I also need PHP and a database to keep it running. Though this doesn’t cost the world anymore and every decent web hosting plan offers these features, I am forced to be always online and available. That and the fact that there have been repeated vulnerabilities in Wordpress has led me to look for an alternative. I found this alternative at the static website generator Hugo, about which I would like to tell you a little bit more about in this article.

Hugo? What’s that?

Static web pages consist of HTML, CSS and optionally Javascript. The page does not have to be generated by a server-side programming language. Static web page generators generate complete static web pages on the local computer or in the cloud. These can then be stored on a server or in a content delivery network.The generators offer the possibility, similar to content management systems, to use layout templates, to separate content and presentation and sometimes even to extract the content from an external CMS.

Hugo is based on the programming language Go. To cut a long story short: Hugo is by far the fastest static site generator. Of course, websites with many individual pages benefit most from the speed with which the website is generated.

Hugo is active in development, open source, like all the other Static Site Generators mentioned here, and offers a variety of out-of-the-box features (RSS, Tagging, Categorization, …). Not so nice: In the template language of Go not everyone can find their way around and so far there is no possibility to add plugins.

Most developers will feel more at home with the programming languages like Node.js, Python or Ruby, but nevertheless Hugo can score points due to its outstanding speed.

Benefits and Drawbacks

Benefits

  • More secure, because there are no security gaps due to database and server code (especially when using foreign plugins extensively) Almost no requirements regarding your web space. There is No PHP or MySQL database required. You can even host your website for free on GitHub pages.
  • Faster, since no more server-side programming language has to be executed
  • Scales better, as less load is applied to the server during traffic peaks
  • Can be stored in a Content Delivery Network which increases global availability and speed
  • Versioning and backup of the complete website via Git possible
  • Low maintenance efforts. No regular updates and backups required.

Drawbacks

  • Workflow via Git (GitHub, Bitbucket, Gitlab) almost mandatory if more than one person is working on the website
  • Theoretically not dynamic, i. e. no search, update of prices etc. out-of-the-box possible (practical but implemented via Javascript)
  • No CMS and mostly the content is created in the form of markdown files.

What are the use cases for Hugo?

Websites with a lot of individual pages and many taxonomies (categories, tags etc.). It is perfect for small to medium blogs and can easily replace Wordpress in my opinion! A portfolio, a digital business card, technical documentation or a personal page can also be perfectly realized with Hugo. However, if there are dynamic requirements for the website, the limits of Hugo are quickly reached!

How I am using Hugo

A few words about how I use Hugo to run this blog.

Using Apache2 as a webserver

I run a server for my development projects on which an Apache web server is available at the same time. Now it can happen that I would like to make several contents accessible under different domains on the server. I created a subfolder with the name “Blog” in my html directory (default web directory under /var/www/html). Below this directory are my static, website files generated by Hugo.

I have created a virtual host that will output the content from the “Blog” folder when a specific domain is specified, in this case it is cbrgm.de. The VirtualHost config easily allows me to switch my url to a subdomain for example like blog.cbrgm.de. All I have to change is the ServerName parameter to something like blog.cbrgm.de. Find my configuration file below, edit it and save it under /etc/apache2/sites-enabled/. Don’t forget to activate Apaches VirtualHost Module!

<VirtualHost *:80>
    ServerAdmin chris@cbrgm.de
    ServerName cbrgm.de
    ProxyPreserveHost On
    DocumentRoot /var/www/html/blog

    <Directory /var/www/html/blog/>
                Options Indexes FollowSymLinks MultiViews
                AllowOverride None
                Order allow,deny
                allow from all
    </Directory>
</VirtualHost>

Automatic deployment via CI

To make my life even easier I use Drone.io, a continuous integration service based on docker (I wrote an article about it earlier this year) to build my blog automatically and have it copied to the server. Therefore I developed a deployment image that is used in drone’s .drone.yml (Pipeline).

drone.yml

pipeline:
  publish:
    image: cynthek/hugo-deployment:latest
    secrets: [ SCP_USER, SCP_PASS, SCP_URL, SCP_PATH ]
    commands:
    - hugo
    - sshpass -p "$SCP_PASS" scp -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -r ./public/* $SCP_USER@$SCP_URL:$SCP_PATH
    when:
branch: [ master ]

The deployment image is basically an ubuntu based image with hugo command line tools installed. You can get it on my DockerHub.

Drone monitors the master branch of my repository for changes. As soon as a change is committed, the pipeline is triggered and hugo automatically builds the static content of the blog. The files are then transferred to my server via SSH using Secure Copy.

Conclusion

All in all, I am very happy with the move from Wordpress to Hugo. My blog loads much faster, I don’t have to worry about maintenance, updates and editing. I can write my posts on the go and manage my blog in a simple way. Through the delivery pipeline, even a single commit is sufficient to publish content. Brilliant! Bye, Wordpress.



Back to posts