↓Skip to main content
Mitch Cimenski

Getting Started With Hugo - Part 1

·750 words
Hugo Web Dev Beginner Go Git Markdown
Mitch Cimenski
Author
Mitch Cimenski
Tech Enthusiast
Table of Contents

What is Hugo?
#

Hugo is a very fast and flexible static site generator. It allows you to create blogs, portfolios, and documentation sites with minimal setup. Unlike traditional content management system (CMS) platforms like WordPress, Hugo generates static HTML files, making websites incredibly fast, secure and easy to deploy.

Why Use Hugo?
#

  • Speed: Hugo can generate thousands of pages in milliseconds.
  • Security: No database or backend means fewer vulnerabilities / smaller attack surface.
  • Ease of Use: Write content in Markdown and manage it with simple folder structures.
  • Flexibility: Use themes and templates to customize the look and feel of your site.

Prerequisites
#

Before installing Hugo, make sure you have:

  • A computer running Windows, macOS, or Linux.
  • Go installed.
  • Git installed and configured.
    • Required to install themes via Hugo modules and site deployment.
  • GitHub account and basic usage knowledge.
  • A basic understanding of Markdown (optional but helpful when creating content).

Installing Hugo
#

Note: Make sure that you have installed both go and git by using the links above before proceeding.

On macOS Using Homebrew
#

  1. If not already installed, install Homebrew (a popular package manager for macOS):
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. Install Hugo:
brew install hugo

On Windows Using Winget
# 

winget install Hugo.Hugo.Extended

On Linux Using Snap
#

  1. If not already installed, install snap (package manager):
sudo apt install snapd
  1. Install Hugo:
sudo snap install hugo

Verify Installation
#

To verify proper installation, run:

hugo version

You should see an output similar to:

hugo v0.142.0-1f746a872442e66b6afd47c8c04ac42dc92cdb6f...

Creating a New Hugo Site
#

Create and change to a desired directory on your filesystem that will contain your websites (e.g. /home/<username>/websites/). Then, create a new Hugo site:

hugo new site my-blog

Replace my-blog above with your desired site name.

This command creates the following folder structure for your site:

Folder Structure
# 

my-blog/
├── archetypes/  # Default content templates
├── assets/      # Global resources
├── content/     # Your posts and pages
├── data/        # Data files that augment content
├── i18n/        # Translation tables
├── layouts/     # Custom HTML templates
├── static/      # Static files (images, CSS, JS)
├── themes/      # Theme files
├── hugo.toml    # Site configuration

Writing Content
#

Create a new post:

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

Edit the post in content/posts/my-first-post.md:

+++
title = 'My First Post'
date = 2025-01-22
description = 'An introduction to my blog.'
draft = false
+++

Welcome to my blog! This is my first post using Hugo.

Installing a Theme
#

Hugo uses themes to control layout and styling. You may browse and try out various themes at themes.gohugo.io.

For this guide, I’ll install the Ananke theme by navigating to our project’s root directory and running:

hugo mod init github.com/<your_user>/<your_project>

Note: In this example, replace <your_user> with your GitHub username and <your_project> with the name of your new site.

Edit hugo.toml (in the project’s root directory) and populate with:

baseURL = "https://example.org/"
languageCode = "en-us"
theme = ["github.com/theNewDynamic/gohugo-theme-ananke"]

DefaultContentLanguage = "en"
SectionPagesMenu = "main"
pagination.pagerSize = 3
googleAnalytics = ""
enableRobotsTXT = true

[languages]
[languages.en]
title = "My New Hugo Site"
weight = 1
contentDir = "content/"
# languageDirection = 'rtl' for Right-To-Left languages
[languages.fr]
title = "Ananke Fr"
weight = 2
contentDir = "content/fr"

[sitemap]
changefreq = "monthly"
priority = 0.5
filename = "sitemap.xml"

[params]
text_color = ""
author = ""
favicon = ""
site_logo = ""
description = "The last theme you'll ever need. Maybe."
# choose a background color from any on this page: https://tachyons.io/docs/themes/skins/ and preface it with "bg-"
background_color_class = "bg-black"
recent_posts_number = 3

[[params.ananke_socials]]
name = "twitter"
url = "https://twitter.com/GoHugoIO"

[module]
  [[module.imports]]
    path = 'github.com/theNewDynamic/gohugo-theme-ananke/v2'

Finally, download the theme:

hugo mod get -u

Running Hugo Locally & Previewing
#

To preview your site, navigate to your project’s root directory and run:

hugo server -D

Then, open http://localhost:1313/ in your browser. If everything has worked, you should see something similar to the screenshot below:

Conclusion
#

After following this guide, you should have a new Hugo site up and running locally. Explore and install different themes, customize colors, tweak layouts and start generating content!

Next Steps
#

Now that we have created a new site, installed a theme and generated some content, the next steps will be to build and deploy your website so that others may view it. I’ll cover site deployment in a future post, so be sure to stay tuned!

Additional Resources
#