Go Blog with Hugo, the Static Site Generator

If you have an Internet connection, you may have heard of WordPress.

WordPress as a blogging medium ― and eventually as a full-featured web content platform ― has evolved into the number one website building platform . Being the biggest comes with some downsides, like also being the biggest target for security threats. There are automated bots specifically dedicated to phishing, infiltrating and spamming content across the entire network of WordPress sites.

In most occasions, you don't need the complexity or the hassle associated with a dynamic site like WordPress. Commenting, contact forms, shortcodes and search were previously only available in dynamically rendered sites. This is no longer the case ― as many of these features are now available in static site generators as well. Then, there are those who simply prefer static sites over dynamic sites complete with their bug-ridden plugins and security holes.

Enter Hugo

Hugo is a static site generator written in Go Language. Hugo is developed by Bjrn Erik Pedersen and a team of other generous contributors. Best of all, Hugo is an open-source website builder licensed under the Apache License 2.0 ― so you can engineer it to your heart’s desire.

Features

Hugo takes data files, YAML configuration files, along with templates for layouts, static files, and Markdown content in order to render a static website. Multilingual support, custom image processing , various output formats , and shortcodes are all present in Hugo. There are also various design style options like nested content options for various blog types alongside a huge library of themes.

Static site generators build a web page once ― at the moment you’re creating new content or editing it. On the other hand, content management systems like WordPress build a page every time a visitor requests one (dynamic rendering). In the early days of the web, all websites on the web were static web pages. So why would we ever want to go back to the internet days of yore if there is WordPress, Drupal, Ghost, and many other CMS available?

Performance

The most lauded and obvious benefit for opting for a static Hugo website ― speed.

Performance is a necessary advantage given Google's recent focus on page loading times and SEO . Utilizing a static site generator such as Hugo over a full-featured CMS like WordPress is an excellent way to outpace your competitors’ blogs in search rank. Static open-source websites are incredibly fast, especially versus sites that carry the burden of full-featured (but bloated) content management systems.

Features

You might think you lose access to all of your favorite quality-of-life features by switching over to a Hugo static website. Not so. If you want to extend your website with added functionality, you can also integrate custom javascript, Google Tag Manager, shortcodes even deploy to a number of hosting providers, including GitHub pages.

Static sites can also be distributed on a content delivery network. Given that your Hugo website consists of static content, you can simply cache it at various locations around the world ― Azure, Netlify, AWS Cloudfront, to name a few.

Customization

The Hugo community has countless contributors, tons of themes and thousands of users.

Static web pages give you 100% control over your content and web design. It especially makes sense to consider a static site generator and not a CMS like WordPress if you’re planning on producing various landing pages with different designs. Hugo websites have a live reload system which automatically refreshes web pages while you edit them, making customization and personalization surprisingly easy during development.

Security

Because Hugo is all about open-source static sites, it lacks the security holes present in WordPress. There’s nothing to be exploited on the server-side. No php to run, no scripts, nothing. This makes Hugo static site generator quite stable and proves a worthy adversary against would-be security breaches.

Extras

If you need to provide comments or even forms on your Hugo website, you have those available. You even have analytics at your disposal (Google Analytics, heap.io), social services (AddThis) and countless other features being built for Hugo.

Some competing static website generators like Jekyll come with the option to add plugins that support site generation ― including less compilers, CSS+JavaScript minifying, full-text search features and many more. Some of these functions are already integrated with Hugo ― like CSS/SCSS support ― while others are currently in development.

Ready to get started with Hugo?

Using Hugo

Although Hugo is written in Go, you don’t need to install Go to enjoy Hugo. Download one of the many precompiled binaries:

macOS (Darwin) for x64, i386, and ARM architectures windows linux OpenBSD FreeBSD

One of the most obvious advantages is that Hugo is open-source and can be installed quite easily. Head over to the Hugo GitHub repository and download the appropriate installation files. If you're on anything besides MacOS, please follow the directions in the getting started/quick install Hugo documentation . If you’re on OSX, you can take the handy shortcut of using Homebrew to install Hugo:

brew install hugo

After installing Hugo, you can use it in the command line.

Now, you can create a directory for Hugo to work in, and generate a new skeleton site there:

$ hugo new site website $ cd website

Hugo will then automatically generate a directory structure:

archetypes / content / layouts / static / config.toml

You have now created the first pieces of your static web page. If you want to create a new post or page, just use:

$ hugo new your-post-title-here.md

This will create a markdown file at content/your-post-title-here.md . After setting draft: false , posts are displayed at content/post/your-post-title-here.md , with a header similar to the one below:

--- title: "Your-post-title" date: 2018-08-07T14:27:49-07:00 draft: true --- Take note of that header