304 North Cardinal St.
Dorchester Center, MA 02124
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.
Let’s start with actual deployment…
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 is written in Go with support for multiple platforms. Hugo currently provides pre-built binaries for the following:
There are 2 methods to install Hugo on Windows.
I am using the Chocolatey package manager tool to install.
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'))
There are 2 packages available for Hugo
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
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:
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.
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.
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.
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.
Now it’s time to start the newly created site to check
hugo server -D #If you want to see the draft files also
Now navigate to your new site at http://localhost:1313/
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.
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
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… 🙄