How to Create a Blog with Hugo: A Step-by-Step Guide

Hugo is a fast and flexible static site generator written in Go, perfect for creating blogs and websites. This guide will walk you through setting up a blog with Hugo, step by step.

Prerequisites

Before starting, ensure you have the following:

• A computer with Windows, macOS, or Linux
• Go installed (optional but recommended)
• Git installed
• A text editor (VS Code, Sublime Text, etc.)
• A GitHub account (optional for deployment)

Step 1: Install Hugo

Windows

1. Download the latest Hugo release from GitHub.
2. Extract the downloaded file and add the Hugo binary to your system PATH.
3. Verify installation by running:

hugo version

macOS (Using Homebrew)

brew install hugo

Linux (Using Snap)

sudo snap install hugo --classic

Step 2: Create a New Hugo Site

Run the following command to create a new Hugo site:

hugo new site myblog

This creates a myblog directory with the basic Hugo structure.

Step 3: Choose and Install a Theme

Hugo has a variety of themes available at themes.gohugo.io. Install a theme by cloning it into the themes directory.

Example (using Ananke theme):

cd myblog
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Then, update config.toml to use the theme:

theme = "ananke"

Step 4: Create Your First Blog Post

To create a new post, run:

hugo new posts/my-first-post.md

Edit the content/posts/my-first-post.md file, updating the title, date, and content. Set draft: false to make it visible.

Step 5: Run the Local Server

Start a local server to preview your blog:

hugo server -D

Visit http://localhost:1313/ in your browser to see your site.

Step 6: Build and Deploy Your Blog

Generate the static site by running:

hugo

This creates a public/ directory with the HTML files. You can deploy it to GitHub Pages, Netlify, or Vercel.

Deploy to GitHub Pages

1. Initialize a Git repository in the public folder:

cd public
git init
git remote add origin <your-repo-url>
git branch -M main
git add .
git commit -m "Deploy Hugo site"
git push -u origin main

Deploy to Netlify

1. Create a repository for your Hugo project on GitHub.
2. Push your entire Hugo project (not just public/) to GitHub.
3. Connect the repository to Netlify.
4. Set the build command to hugo and publish directory to public.
5. Deploy the site!

Conclusion

You’ve successfully created a blog using Hugo! You can now explore customizing themes, adding plugins, and optimizing SEO. Happy blogging!