How to setup Hugo 0.8.0/extended dev environment on Windows 10

Hugo is a static site generator written in Go. Originally created by Steve Francia in 2013, Hugo has seen a great increase in both features and performance. Hugo makes building websites fun.

If you are trying to develop Hugo Static Sites on Windows 10, you are in the right place and this article is for you. Later We can use the site to publish behind Caddy proxy as a file server.

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

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun.

Being able to generate most websites within seconds (at < 1 ms per page), Hugo is renowned as “The world’s fastest framework for building websites” thanks to not only it being built with Go but also conscientious efforts by its developers to benchmark and increase performance.

Hugo’s speed and evolving feature set led to a huge increase in its popularity

The world’s fastest framework for building websites

Please go through the below links to learn more about Hugo.

Previously I posted how to prepare the Jekyll Development environment on Windows 10. Please go through the below link if you aren’t checked it.

Jekyll Dev Environemtn on Windows

Let’s start with actual deployment…

Prerequisites

Please make sure you should fulfill the below requirements before proceeding to the actual deployment.

Windows Terminal is optional. You can use command prompt or Git Bash to run the Hugo commands.

Hugo on Windows

Hugo is written in Go with support for multiple platforms. Hugo currently provides pre-built binaries for the following:

macOS (Darwin) for x64, i386, and ARM architectures
Windows
Linux
OpenBSD
FreeBSD

There are 2 methods to install Hugo on Windows.

Chocolatey for package management
Scoop for package management

I am using the Chocolatey package manager tool to install.

Install Chocolatey Package Manager

Launch PowerShell as an administrator on Windows 10. Install Chocolatey package manager using the below code.

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'))

Install Hugo

There are 2 packages available for Hugo

Normal Package
Extended Sass/SCSS package

I am going to install Extended Hugo package to work with SCSS files.

Run the below command in PowerShell to install Hugo Extended version

choco install hugo-extended -confirm

Create New Hugo Site

Once you have installed Hugo, make sure it is in your PATH. You can test that Hugo has been installed correctly via the help command:

hugo help

You will get different helpful Hugo commands as an output

Now open Windows Terminal or Command Prompt or PowerShell and go to the desired directory where you want to create a new Hugo site.

cd D:\Hugo

Now run the below command to create a new Hugo site

hugo new site quickstart

The above code will create a new Hugo site in a folder named quickstart.

Add Hugo Theme

There are several themes available @ Hugo Themes.

You can download any theme as per your requirement or like.

Now go into our project directory; initiate git and run the below commands to add a new theme as a submodule

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

You can add theme as submodule or create themes folder and clone the theme from github.

I prefer to add it as a submodule. Add the theme to the site configuration

I just selected Ananke Theme for the project.

Add Some Content

Now it’s time to add some content to our new site. You can create content files manually (for example as content/posts or blog/my-first-post.md) or using the below command.

hugo new posts/my-first-post.md

Post content should look like below

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

Drafts do not get deployed; once you finish a post, update the header of the post to say draft: false.

Start Hugo Server

Now it’s time to start the newly created site to check

hugo serve

hugo server

hugo server -D #If you want to see the draft files also

Now navigate to your new site at http://localhost:1313/

Customize Hugo Theme (Site Configuration)

Open config.toml in a text editor and modify it accordingly.

baseURL = "/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"

Hugo comes with LiveReload built in. There are no additional packages to install. A common way to use Hugo while developing a site is to have Hugo run a server with the hugo server command and watch for changes

This will run a fully functioning web server while simultaneously watching your file system for additions, deletions, or changes within the following areas of your project organization.

Whenever you make changes, Hugo will simultaneously rebuild the site and continue to serve content. As soon as the build is finished, LiveReload tells the browser to silently reload the page.

Most Hugo builds are so fast that you may not notice the change unless looking directly at the site in your browser. This means that keeping the site open on a second monitor allows you to see the most up-to-date version of your website without the need to leave your text editor.

Build Static Pages

After running the Hugo server for local web development, you need to do a final Hugo run without the server part of the command to rebuild your site.

You may then deploy your site by copying the /public directory to your production web server.

Since Hugo generates a static website, your site can be hosted anywhere using any web server

hugo

The output will be in /public directory by default (use -d/–destination flag to change it, or set publisher in the config file).

If you enjoyed this tutorial, please give your input/thought on it by commenting below. It would help me to bring more articles that focus on Open Source to self-host.

Stay tuned for other deployments in coming posts… 🙄