How to Setup Hugo 0.8.0 Extended Dev Environment on Windows 10

If you are trying to develop Hugo Static Sites on Windows 10, you are in the right place. Once developed, we can easily publish these static files behind a Caddy proxy acting as a lightning-fast file server.

Hugo is a static site generator written in Go. Originally created by Steve Francia in 2013, Hugo has seen a massive increase in both features and performance thanks to current lead developer Bjørn Erik Pedersen and an active community of contributors. It is an open-source project licensed under the Apache License 2.0.

With its amazing speed and flexibility, Hugo makes building websites fun.

Being able to generate most websites within seconds (often at < 1 ms per page), Hugo is renowned as “The world’s fastest framework for building websites.”

If you want to learn more about Hugo, check out the resources below:

1. Hugo Official Site
2. Wikipedia Page

(Note: I previously posted a guide on how to prepare a Jekyll Development Environment on Windows 10. Feel free to check it out if you prefer Ruby-based generators!)

Let’s get started with the setup.

Prerequisites

Please ensure you fulfill the following requirements before proceeding:

1. Git for Windows
2. Node.js
3. Windows Terminal

Note: Windows Terminal is optional. You can also use the standard Command Prompt, PowerShell, or Git Bash to run Hugo commands.

Installing Hugo on Windows

Hugo provides pre-built binaries for macOS, Windows, Linux, OpenBSD, and FreeBSD.

On Windows, there are two popular package managers to install Hugo:

1. Chocolatey
2. Scoop

I will be using the Chocolatey package manager tool for this installation.

Step 1: Install Chocolatey Package Manager

Launch PowerShell as an Administrator on Windows 10. Install Chocolatey using the following command:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('[https://chocolatey.org/install.ps1](https://chocolatey.org/install.ps1)'))

Step 2: Install Hugo Extended

There are two packages available for Hugo:

1. The standard package.
2. The Extended Sass/SCSS package.

I highly recommend installing the Hugo Extended package so you can work natively with SCSS files, which many modern themes require.

Run the below command in your elevated PowerShell window to install the extended version:

choco install hugo-extended -confirm

Step 3: Verify the Installation

Once you have installed Hugo, verify that it was successfully added to your system’s PATH variable. You can test this by running the help command in your terminal:

hugo help

You should see a list of helpful Hugo commands output to the console.

Create a New Hugo Site

Open Windows Terminal, Command Prompt, or PowerShell and navigate to the directory where you want to create your new website.

cd D:\Hugo

Run the following command to bootstrap a new Hugo site:

hugo new site quickstart

This will generate the required folder structure for a new Hugo site inside a folder named quickstart.

Add a Hugo Theme

There are hundreds of excellent themes available at the Hugo Themes Gallery.

Navigate into your new project directory, initialize a Git repository, and add your chosen theme as a submodule. For this tutorial, we will use the popular Ananke Theme.

cd quickstart
git init
git submodule add [https://github.com/budparr/gohugo-theme-ananke.git](https://github.com/budparr/gohugo-theme-ananke.git) themes/ananke
echo 'theme = "ananke"' >> config.toml

Tip: You can either add a theme as a git submodule (recommended for easy updates) or simply clone it directly into the themes/ folder.

Add Some Content

Now it’s time to write some content. You can manually create markdown files in the content/posts/ directory, or use the Hugo CLI to generate them with pre-filled frontmatter:

hugo new posts/my-first-post.md

Open the newly created file. It should look something like this:

---
title: "My First Post"
date: 2021-02-11T08:47:11+01:00
draft: true
---

Write your markdown content here...

Note: Posts marked as draft: true do not get rendered to the live site unless explicitly requested. Once you finish writing, change it to draft: false.

Start the Hugo Development Server

Start the local development server to preview your site:

hugo server

If you want to preview your draft files as well, append the -D flag:

hugo server -D

Now, open your web browser and navigate to http://localhost:1313/.

Customize Your Site Configuration

Hugo comes with LiveReload built-in. There are no additional packages to install!

Leave your development server running in the terminal and open config.toml in your text editor. Modify the base configuration to match your site:

baseURL = "[https://example.com/](https://example.com/)"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"

Whenever you make a change to your configuration, content, or theme, Hugo simultaneously rebuilds the site (usually in milliseconds) and tells the browser to silently reload the page.

Keeping the site open on a second monitor allows you to see the most up-to-date version of your website without ever needing to leave your text editor or manually hit refresh.

Build Static Pages for Production

Once you are ready to deploy your site to production, you need to run the hugo command without the server argument.

hugo

This commands Hugo to build your final static HTML, CSS, and JS files. The output will be placed in the /public directory by default (you can change this using the -d flag or in your config.toml).

Because Hugo generates a completely static website, you can host the output from the /public folder anywhere—whether that’s GitHub Pages, Netlify, AWS S3, or behind a self-hosted Caddy reverse proxy!

I hope you enjoyed this tutorial! Please share your thoughts or any questions in the comments below.

Stay tuned for more deployment and development guides in upcoming posts!