What is Hugo?

Hugo is a “fast and modern static site generator written in Go, and designed to make website creation fun again.”¹

Being able to use markdown to generate and add content to a full robust blog template is the main niche/unique solution that Hugo brings to web development specifically in terms of static sites.

Through Hugo, I’ve been able to get up and running - this blog as an example - in minimal time. I had two goals when starting down this path:

• One reduce the distraction of wanting to write more code than content. It is easy for me to get distracted by either trying to build a custom tool or frustrated with a premade tool (i.e. Wordpress 😫).

• Two I wanted an easy tool to write frontend code that is optimized for actual writing blog content at the same time.

  The solution?

There are a few concepts that I recommend being familiar with to ease the Hugo transition:

1. Markdown
2. Static vs dynamic websites
3. Basic frontend knowledge
   • HTML
   • CSS
   • JS

Why Blog? Why Hugo?

I wanted to communicate more about what I am using and learning. This helps me to better grasp difficult concepts as well as share my findings. In other interests, I’ve done the same. But because Hugo was not used, the site isn’t well maintained.

The Background

In the corporate setting, I work mainly with the .NET, but outside of that environment, I work with a wide variety of stacks and languages ranging from PHP to Angular. Initially, I was very open to any platform and any path that could help me easily meet my goal of starting a blog.

The paths

Considering my background, I tried various solutions:

• .NET blogging engine
• Wordpress
• Laravel
• PeachPie
• Hugo

Let’s Get Started

The best documentation is here, but below has some general steps if you don’t feel like clicking around 😉.

Install Hugo

I would choose Hugo-extented so that you have no issues if you choose a theme that uses Sass or whatever else is required for your theme.

Create a Site

hugo new site mysite

Add a Theme

Select a theme from https://themes.gohugo.io/

You can clone your selected theme into your themes directory of your Hugo project.

cd mysite
git clone https://github.com/<hugo-theme>/<theme-name>.git themes/

I don’t recommend using the submodule. I had a little trouble with setting up ci/cd and the submodule portion, so moving the clone theme into your project might save some issues.

Adjust Config Files

Then you can adjust your config.toml file by following the recommended configs to be adjusted in the

themes/<selected-theme>/exampleSite/config.toml .

To Add Content

Create a new post with the following command.

hugo new posts/my-first-post.md

Run site

From the root of your project directory

hugo server

• web development