Learn how to create a fast, secure static blog with Hugo and PaperMod. This step-by-step guide covers installation, theme setup, creating posts, and how to add rich metadata to improve your blog’s SEO and appearance.

For some time I’ve been looking in ways to create my own blog, but also to learn from the process. As I have a note taking app (Joplin) which is based on Markdown files and stored in AWS S3, I was looking for a blog that is based on Markdown files.

I will spare the whole research I’ve been doing, but my conclusion was to use Hugo. This is also the tool that I’m using for this blog where you are reading this from.

What is Hugo?

Basically Hugo is a static website generator written in the programming language Go. Instead of running a traditional CMS with a database (like WordPress), Hugo generates a fully static website from Markdown files.

Basically you create Markdown files and Hugo will generate Static HTML/CSS/JS files such that you can host it wherever you want.

It’s the most simple way to create a website and host it as cheap as possible (because it’static). This means:

  • No database
  • Extremely fast websites
  • Very secure (because there is no backend)
  • Easy to version control with Git
  • Perfect for developer who like writing in Markdown
  • Perfect for backend developers that want a website, but not the hassle of creating frontends

You simply write blog posts in Markddown, run a build command and Hugo generates a complete website.

In the following sections I will give a brief overview of how to use Hugo and how to create your website.

Installing Hugo

THe easiest way to install Hugo depends on your operating system. After installation and running:

hugo version

You should be able to see something like:

hugo v0.xx.x

MacOS

brew install hugo

Linux

sudo apt install hugo

Windows

choco install hugo

Creating a new Hugo site

With Hugo, it’s very easy to create a new website, just run:

hugo new site my-blog

This will create a folder structure and all you need to start building with Hugo. Just ‘cd’ into the folder and now you can run:

hugo server

I will spin up a server where you directly can go to http://localhost:1313 and check your website!

Off course, this just looks “boring” and we want to install some sort of theme to work with and make Hugo as much as you want. Therefore, in the next section we will install the PaperMod theme which I will use as an example for our blog. If you want another theme, just visit: https://themes.gohugo.io to check out all themes. I will recommend you to read the documentation well per theme, as the installation and settings can differ.

Installing PaperMod and start using it

To make your blog look great, you’ll want to use a theme. I chose PaperMod because it’s clean, fast, and easy to customize.

To install PaperMod, first navigate to your Hugo site folder (the one you created earlier):

cd my-blog

Then add the theme as a Git submodule (recommended, so you can easily update it later):

git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

Now, open your config.toml (or config.yaml/config.json depending on your preference) and set the theme:

theme = "PaperMod"

PaperMod comes with lots of options. You can customize the look, enable features like search, and tweak the layout. Check the PaperMod documentation for all the details.

Creating your first post

Let’s create your first blog post! Run:

hugo new posts/my-first-post.md

This will create a Markdown file in the content/posts/ directory. Open it in your favorite editor, add a title, some content, and save.

To see your changes, just run:

hugo server

Visit http://localhost:1313 in your browser. You should see your new post live!

Deploying your blog

Once you’re happy with your blog, you’ll want to put it online. Hugo generates static files in the public/ folder. You can host these files anywhere: GitHub Pages, Netlify, AWS S3, or any static hosting provider.

For example, to build your site:

hugo

Then upload the contents of the public/ folder to your hosting provider.

Final thoughts

Building a blog with Hugo is a great way to learn about static sites, Markdown, and web publishing. It’s fast, secure, and gives you full control over your content. Plus, you can always customize or extend it as your needs grow.

Happy blogging!

Understanding hugo.yaml

The hugo.yaml file is the main configuration file for your Hugo site. It controls your website’s title, base URL, language, theme, menus, and much more. Changing values here will immediately affect how your site looks and behaves.

For example, here’s a basic hugo.yaml:

baseURL: https://robzah.com/
languageCode: en-us
title: Robert Zaharia
theme: ["PaperMod"]

You can add menus, enable features, and configure your theme directly in this file. If you want to change your site’s title, just update the title field. To add a new menu item, edit the menu section.

Adding PaperMod-specific options

PaperMod supports many options to customize your blog’s appearance and features. You can add these options to your hugo.yaml under the params section. Here’s an example with some popular PaperMod settings:

params:
	homeInfoParams:
		Title: "Welcome to My Blog"
		Content: "This is my personal blog built with Hugo and PaperMod."
	socialIcons:
		- name: github
			url: "https://github.com/yourusername"
		- name: twitter
			url: "https://twitter.com/yourusername"
	ShowReadingTime: true
	ShowShareButtons: true
	ShowCodeCopyButtons: true
	ShowToc: true

You can find all available options in the PaperMod documentation. Try enabling features like reading time, table of contents, or social icons to make your blog more engaging.

Adding and improving blog post metadata

Each blog post in Hugo starts with a section called “front matter” at the top of the Markdown file. This is where you add metadata about your post, such as the title, date, tags, and more. Good metadata helps readers and search engines understand your content.

Here’s an example of a rich front matter block:

---
title: "How to Use Hugo Effectively"
date: 2026-03-23T10:00:00+01:00
draft: false
tags: ["hugo", "static site", "tutorial"]
categories: ["Web Development"]
description: "A step-by-step guide to building a blog with Hugo."
author: "Robert Zaharia"
cover:
	image: "/images/hugo-cover.jpg"
	alt: "Hugo static site generator logo"
	caption: "Build fast, modern blogs with Hugo."
ShowToc: true
ShowReadingTime: true
---

Tips to make your posts better:

  • Add a description for SEO and social sharing.
  • Use tags and categories to organize your content.
  • Add a cover image for visual appeal.
  • Set ShowToc and ShowReadingTime to true for better navigation and user experience (if your theme supports it).
  • Include an author field if you have multiple contributors.

The more metadata you add, the richer and more discoverable your blog becomes!

What’s Next?

Now that you have a beautiful blog running locally, it’s time to share it with the world! Check out the next post in this series:

🚀 Deploy Hugo to AWS S3 and CloudFront - Learn how to deploy your blog to AWS using S3 for storage and CloudFront for global CDN, all for free with the AWS free tier!

This guide covers:

  • Setting up AWS S3 bucket and CloudFront
  • Configuring secure IAM credentials
  • Automating deployments with a script
  • Following AWS best practices for security

Your blog will be live and globally distributed in minutes!