Skip to content

How to create a static site with hugo

Image of the author

David Cojocaru @cojocaru-david

How to Create a Static Site with Hugo visual cover image

Build a Blazing-Fast Website: A Step-by-Step Hugo Tutorial

Static site generators are revolutionizing web development, offering speed and security without the complexities of traditional CMSs. Among these, Hugo stands out. In this guide, we’ll explore how to create a static site with Hugo, walking you through the entire process from installation to deployment. Whether you’re a seasoned developer, an aspiring blogger, or simply a web enthusiast, Hugo’s simplicity and performance will impress you.

Why Hugo? Unveiling the Power of Static Sites

Hugo isn’t just another static site generator; it’s a powerhouse engineered for speed and flexibility. Built with Go, this open-source tool offers numerous advantages:

If you’re seeking a lightning-fast, secure, and easily maintainable website, Hugo is an excellent choice.

Before You Begin: Essential Prerequisites

Before diving into the world of Hugo, ensure you have the following prerequisites in place:

  1. Hugo Installation: Download the latest version of Hugo compatible with your operating system from the official Hugo website.
  2. Code Editor: Select a code editor that suits your preferences, such as VS Code, Sublime Text, or Atom. These editors provide syntax highlighting and other helpful features for working with Hugo files.
  3. Command-Line Proficiency: Familiarize yourself with basic command-line operations. Hugo relies on terminal commands for various tasks.
  4. Git (Optional but Recommended): Install Git for version control and seamless deployment to platforms like Netlify or GitHub Pages.

Step 1: Installing Hugo - Your Gateway to Speed

Hugo offers straightforward installation methods across various operating systems.

macOS (Using Homebrew)

Open your terminal and execute the following command:

brew install hugo

Windows (Using Chocolatey)

Open PowerShell as an administrator and run:

choco install hugo

Linux (Using Snap)

In your terminal, use this command:

sudo snap install hugo

Verify the installation by typing:

hugo version

This command should display the installed Hugo version.

Step 2: Crafting Your New Hugo Site

Creating a new Hugo site is as simple as running a single command. In your terminal, navigate to the directory where you want to create your project and execute:

hugo new site my-hugo-site

Replace “my-hugo-site” with your desired site name. This command generates a new folder containing the basic Hugo site structure:

Step 3: Embracing Themes: Styling Your Website

Hugo’s extensive theme library allows you to quickly transform your site’s appearance.

  1. Explore the Hugo Themes Gallery: Visit https://themes.gohugo.io/ to browse a wide selection of free and premium themes.

  2. Clone Your Chosen Theme: Once you’ve found a theme you like, clone it into your themes/ folder using Git. For example:

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

    Replace the URL with the actual Git repository URL of your chosen theme.

  3. Activate the Theme: Open your config.toml file and add the following line:

    theme = "ananke"

    Replace “ananke” with the name of the theme you cloned.

Step 4: Unleashing Your Content: Creating Your First Page

Time to add some content! Create your first Markdown page within the content/ folder. For example, to create a blog post:

hugo new posts/my-first-post.md

This command creates a new Markdown file at content/posts/my-first-post.md. Open this file in your code editor and add your content:

---
title: "My First Post"
date: 2024-01-01
draft: true
---

Welcome to my new Hugo site! This is my first post, written in **Markdown**. I'm excited to share my thoughts and ideas with the world.

The section enclosed by --- is called the front matter. It contains metadata about your page, such as the title, date, and whether it’s a draft.

Step 5: Bringing Your Site to Life: Running the Hugo Server

Preview your site locally using Hugo’s built-in development server:

hugo server -D

The -D flag tells Hugo to include draft posts. Open your web browser and navigate to http://localhost:1313 to see your live site. As you make changes to your content or configuration, Hugo will automatically reload the site in your browser.

Step 6: Fine-Tuning Your Creation: Customization

Mastering the Configuration File

The config.toml file is your control center for customizing your site. Edit it to set your site’s title, description, base URL, and other metadata. For example:

baseURL = "http://example.com/"
title = "My Awesome Hugo Site"
theme = "ananke"

Adding Custom CSS

For more advanced styling, create a CSS file in the static/css/ folder (e.g., static/css/custom.css) and link it to your theme’s templates. Consult your theme’s documentation for instructions on how to properly link CSS files.

Step 7: Sharing Your Masterpiece: Building and Deploying

When you’re ready to share your site with the world, generate the static files using:

hugo

This command creates a public/ folder containing all the HTML, CSS, JavaScript, and assets that make up your website. You can then deploy this folder to various platforms:

Conclusion: Your Hugo Journey Begins

You’ve now learned how to create a static site with Hugo, unlocking a powerful tool for building fast, secure, and easily maintainable websites. Hugo’s speed, flexibility, and simplicity make it an ideal choice for blogs, portfolios, documentation sites, and more.

“Hugo empowers you to transform content into lightning-fast websites, eliminating server-side complexities and simplifying your workflow.”

This is just the beginning. Explore Hugo’s advanced features, such as shortcodes, taxonomies, and multilingual support, to take your site to the next level. Happy building!