1. Run blog with Hugo

2021-06-19 hugo blog-story

GitHub wiki where I’ve published first blog post isn’t the most convenience platform to run a blog. I already have a VPS and HTTP domain (stepniewski.tech) so I decided to find some simply solution to host blog myself. I’m not interested in WordPress I’m looking for something lighter. Key expectation are: easy to start, easy to configuration, easy to maintenance, good-looking themes, light (no redundant software required). I found hugo framework, static website engine written in Go (Golang).

How it works?

  1. Choose and download theme,
  2. Configure it,
  3. Generate static files with Hugo,
  4. Serve static files with HTTP Server.

1. Installation

First you need to install Hugo, it is available in most popular package managers. I am using Fedora with dnf package manager.

$ sudo dnf install hugo

2. Create new site

Go to your workdir and start new Hugo site.

$ hugo new site blog

It will create Hugo directories structure. It is your workspace. Init git repository and download chosen theme (check themes) as git submodule. I will use erblog theme:

$ cd blog
$ git init
$ git submodule add https://github.com/ertuil/erblog themes/erblog
$ git submodule init
$ git submodule update

3. Add configuration

Prepare config file according to theme documentation.

$ nano config.toml

baseURL = "https://stepniewski.tech"
languageCode = "en-gb"
title = "stepniewski.tech"
theme = "erblog"
[Params]
  author = "Paweł Stępniewski"
  description = "Java & Scala Developer"
  bio = "I believe to create reliable systems, you should be familiar with low-level issues. That's why I will public posts not only about programming topics but also about infrastructure, devops and system management. In spare time I like dancing Cuban salsa so maybe even post about dancing will be published some day."
  badge = "orange"
  quote = "red"

Check your theme documentation for other configurations options. For example, I added favicon.ico file to content directory.

4. Add first post

Create your first post:

$ hugo new post/0-hello-world.md
$PROJECT_DIR/blog/content/post/0-hello-world.md created

Pay attention that to add post in erblog theme you use command hugo new **post**/0-hello-world.md, meanwhile in the Hugo quick-start tutorial you can find command hugo new **posts**/0-hello-world.md.

Modify new post file: $ nano content/post/0-hello-world.md

---
title: "Hello World..."
date: 2021-06-19T11:11:15+02:00
draft: false
tags: [hello]
---

<Put your blog content here>

Remember to set draft: false when it will be ready, otherwise it won’t be added to static files.

5. Check result

Hugo provides custom server for development purposes (it shouldn’t be used on production).

$ hugo -D server
Start building sites … 

                   | EN   
-------------------+------
  Pages            |  16  
  Paginator pages  |   0  
  Non-page files   |   1  
  Static files     | 118  
  Processed images |   0  
  Aliases          |   5  
  Sitemaps         |   1  
  Cleaned          |   0  

Built in 15 ms
Watching for changes in $PROJECT_DIR/blog/{archetypes,content,data,layouts,static,themes}
Watching for config changes in $PROJECT_DIR/blog/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

-D options causes that draft posts will be visible. Now you can open your browser and go to http://localhost:1313 to check how your page looks like.

6. Production deploy

If you are ready to production deploy, call: hugo It will generate static files in public subdirectory. And it’s all! Now you can serve generated page using some HTTP server like nginx


Hugo on nginx in Docker container