I have been thinking about moving away from Wordpress and convert this site to static HTML generated by some kind of framework. There are many reasons for this, not least of which is the security leaks that come with using Wordpress. Going static will also mean virtually no updates needed to the server, no database updates or the need for any specialty plugins. So this month I have given myself the challenge of migrating this site away from Wordpress, and learning Hugo to generate a static HTML version of my blog. Before I get into this I want to just point out, this is not a tutorial or walkthrough. More of an opinion from a designer/front-end dev.
Why Hugo?
Not long ago, while exploring a friend’s company website, I asked him what they used to manage their content. I noticed they had blog posts, and I know that this person would never allow their company website to be written in PHP. This prompted me to ask him about it, at which point he gives me the skinny tour of their setup, including the infrastructure, and introduced me to Hugo. After doing a little more digging about how Hugo works and how to get a static site to look the way I wished, I was convinced it was the right direction.
This project not only allows me to learn a new way to produce rich content websites, it also gives me the opportunity to audit and consolidate a lot of dirty code that I have amassed over the years on my site. I also get the chance to develop a new development jig for coding front-end sites. Lots of upside.
Getting To Know Hugo
Hugo is written in Go, however you do not need to be fluent or even know Go to benefit from its features. However you will need a good grasp on interfacing using the command line, as well as understand fundamental web programming concepts in order to really expand on what comes out of the box.
Despite Hugo having a sizable community of theme creators and a bunch of pre-made themes, I am going to roll my own so I can have more control of the foundation. Hugo uses .html files for the guts of the setup. They can be used to template whole pages or as partials which can be utilized as components. Hugo projects are configured using .toml files but you can easily use .jsonin its place. I am sticking with .json for this current project because I am most familiar with its syntax. However I can see the simplicity of .toml and may dive into that later.
As for content, like blogs, Hugo uses markdown files that you publish to your server via the command line. They live on your local machine or you can alias the source files to have them live wherever you please. This replaces the need for a database maintain, along with all the taxonomies and such. When you are done updating your content, Hugo packages up the changes and publishes them to your web server.
How Its Going So Far
Up to this point, I have read about 60% of Hugo’s documentation and installed it on my Mac and PC using Homebrew and Chocolatey respectively. The set up of a new local site is really easy, as is setting up the foundation needed to use a custom theme. Hugo basically comes with nothing unless you get a theme installed. I mean, there are directories and placeholders files that get created when you run the command, "hugo new site nameofyoursite" but when you run the server you get a blank screen with no console output. You essentially have to build your site framework from the ground up. Which is just fine with me to be honest. This is what I wanted—something light and simple that would allow me to dictate the build process and manage my content.
While Hugo has modules that it uses to automate tasks such as converting SASS into CSS, or consolidating javascript; I have elected to write my own automation using Gulp until I have a better understanding of the Hugo modules that are available for use.
I have a working template that I pieced together using this article. I have also setup the basic Gulp tasks, added Bootstrap and Font Awesome. Next up is to build out some more theme pages (About, 404, etc.) then get a server environment setup to host the site on AWS within the next week. At that point I hope to share my progress via a follow up post.
If you would like to learn how to use Hugo I suggest you go to their site and get familiar with their documentation. Follow the quick start guide and you will be on your way. If you have experience setting up back-end systems for your website you should be able to grasp what is happening. Just experiment as I am doing and you will undoubtedly learn from the experience.