index

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

Want to build a fast, secure, and easy-to-maintain website? Hugo, the lightning-fast static site generator, makes it simple. In this guide, you’ll learn how to create a static site with Hugo—from installation to deployment—using clear, actionable steps. Whether you’re a developer, blogger, or hobbyist, Hugo’s speed and simplicity will help you launch your site in no time.

Why Choose Hugo for Your Static Site?

Hugo isn’t just another static site generator—it’s a performance powerhouse. Built with Go, Hugo offers unbeatable advantages:

Blazing-Fast Builds: Generate thousands of pages in seconds.
No Dependencies: A single binary means no complex setups.
Flexible Theming: Choose from hundreds of pre-built themes or design your own.
Markdown-Friendly: Write content easily without wrestling with code.
Enhanced Security: No database or server-side processing means fewer vulnerabilities.

“Hugo turns content into high-performance websites with minimal effort—perfect for developers and creators alike.”

Prerequisites Before You Start

Before diving in, make sure you have:

Hugo installed (download from gohugo.io).
A code editor (VS Code, Sublime Text, or Atom).
Basic command-line knowledge.
Git (optional but recommended for deployment).

Step 1: Install Hugo on Your System

macOS (Using Homebrew)

Run:

1
brew install hugo

Windows (Using Chocolatey)

Run in PowerShell (Admin):

1
choco install hugo

Linux (Using Snap)

Run:

1
sudo snap install hugo

Verify with:

1
hugo version

Step 2: Create a New Hugo Site

Generate your site with:

1
hugo new site my-hugo-site

This creates a folder with:

config.toml (site settings).
content/ (Markdown files for posts/pages).
themes/ (where themes are stored).
static/ (images, CSS, JS).

Step 3: Add a Theme for Design

Browse themes at themes.gohugo.io.

Clone a theme into themes/:

1
git clone https://github.com/themes/ananke.git themes/ananke

Activate it in config.toml:
```
1
theme = "ananke"
```

Step 4: Create Your First Page

Generate a new post:

1
hugo new posts/my-first-post.md

Edit the file (content/posts/my-first-post.md) with:

1
---
2
title: "My First Post"
3
date: 2024-01-01
4
draft: false
5
---
6

7
Welcome to my Hugo site! This post is written in **Markdown**.

Step 5: Preview Your Site Locally

Run the development server:

1
hugo server -D

Visit http://localhost:1313 to see your live site.

Step 6: Customize Your Site

Configure Site Settings

Edit config.toml to set:

1
baseURL = "https://yourdomain.com"
2
title = "My Hugo Site"

Add Custom CSS

Place styles in static/css/custom.css and link them in your theme.

Step 7: Build & Deploy Your Site

Generate static files:

1
hugo

Deploy the public/ folder to:

Netlify (drag-and-drop).
GitHub Pages (push to gh-pages branch).
Vercel (connect Git repo).

#hugo #staticsite #webdevelopment #markdown #go

How to create a static site with hugo

Table of Contents