How to Set up a Hugo Static Site for Beginners

by

Hugo is a popular static site generator that allows you to create fast, secure, and customizable websites. If you’re new to Hugo, this guide will walk you through the basic steps to set up your first static site.

Prerequisites

  • Basic knowledge of command line interface (CLI)
  • Installed Git (optional but recommended)
  • Hugo installed on your computer
  • A text editor (like VS Code or Sublime Text)

Installing Hugo

Depending on your operating system, installation methods may vary:

  • Windows: Download the Hugo executable from the official site and follow the installation instructions.
  • macOS: Use Homebrew with brew install hugo.
  • Linux: Use your package manager, e.g., apt install hugo for Ubuntu.

Create a New Site

Open your terminal or command prompt and run the following command to create a new Hugo site:

hugo new site my-first-site

This command creates a new directory called my-first-site with the necessary folder structure.

Add a Theme

Hugo uses themes to control the appearance of your site. You can choose a theme from the Hugo themes directory.

To add a theme, navigate into your site directory and run:

git init

Then clone your chosen theme, for example:

git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Next, open the config.toml file in your site folder and add:

theme = "ananke"

Creating Content

Now, create your first page or post. To add a new post, run:

hugo new posts/my-first-post.md

This creates a Markdown file in content/posts/. Edit this file with your content using your text editor.

Preview Your Site

To see how your site looks locally, run:

hugo server -D

Open your browser and go to http://localhost:1313/. You will see your Hugo site in action.

Build and Deploy

When you’re ready to publish, generate the static files with:

hugo

This creates a public folder containing all the files needed for hosting. Upload these files to your web server or hosting platform.

Congratulations! You have set up your first Hugo static site.