How to Install Hugo on Windows 11
Introduction
Hugo is a open-source static site generator, designed for speed and flexibility, making it an excellent choice when creating modern websites, blogs, and documentation. In this guide, we’ll walk you through the steps to install Hugo on your Windows 11 machine.
You can watch the accompanying YouTube video here
Step 1: Download Hugo
You can download Hugo using winget
, Microsoft’s official free and open-source package manager for windows. For this, lets go to Visual Studio code, open up PowerShell and run the below command.
winget install Hugo.Hugo.Extended
Then restart your machine
Step 2: Check that Hugo is available
hugo version
If it is not available, then you will need to add it to your environment variables.
To make Hugo accessible from the command line, you need to add it to your system’s PATH.
- Open the Start Menu and type “Environment Variables.”
- Click on “Edit the system environment variables.”
- In the System Properties window, click on the “Environment Variables…” button.
- In the Environment Variables window, find the “Path” variable under “System variables” and click “Edit.”
- Click “New” and enter the path to the directory where you extracted Hugo (e.g.,
C:\path\to\hugo\directory
). - Click “OK” to close all the windows.
Step 3: Verify Installation
To confirm that Hugo has been installed correctly, open Command Prompt and type:
hugo version
You should see a message displaying the version of Hugo that you installed.
Step 4: Create Your First Site
Now that Hugo is installed, you can create your first site.
a. Open Command Prompt.
Open Command Prompt, navigate to the directory where you want to create your new site.
b. Create your site
Run the following command to create a new site:
hugo new site mynewsite
Then navigate into your new site directory:
cd mynewsite
c. Initialise Git repository
Next we are going to initialise a git repository, this is good pratice and will be useful later.
git init
d. Add a theme to your site.
You can find many themes on the Hugo Themes website. For example, to add the PaperMod theme:
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
e. Then edit your config file
Navigate to the hugo.toml file to add in your theme information by adding the following line
theme = 'PaperMod'
f. Add a post
Finally create some new posts by running the following command
hugo new content/posts/post_one.md
hugo new content/posts/post_two.md
Step 5: Update your content
Inside your content folder, locate your posts, update them and set draft status to false.
Content for Hugo Sample Post:
# Welcome to Hugo!
Hugo is a fast and flexible static site generator built with love by [bep](https://github.com/bep),
[spf13](https://github.com/spf13), and [friends](https://github.com/gohugoio/hugo/graphs/contributors).
Below is a demonstration of various features you can use in your Hugo site.
## Headings
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
## Text Formatting
**Bold text**
*Italic text*
~~Strikethrough~~
> Blockquote
Inline code: `var example = true`
## Links
[Hugo's official website](https://gohugo.io/)
## Lists
### Unordered List
- Item 1
- Subitem 1
- Subitem 2
- Item 2
### Ordered List
1. First item
2. Second item
1. Subitem 1
2. Subitem 2
## Images
![Hugo Logo](https://gohugo.io/images/hugo-logo-wide.svg)
## Code Blocks
### JavaScript
```javascript
console.log("Hello, Hugo!");
```
### Python
```python
def hello_hugo():
print("Hello, Hugo!")
```
## Tables
| Syntax | Description |
|-----------|-------------|
| Header | Title |
| Paragraph | Text |
## Shortcodes
### Highlight
// This is a Go code block
package main
import "fmt"
func main() {
fmt.Println("Hello, Hugo!")
}
### Figure
Step 6: Build and Serve Your Site
To see your site in action, you need to build and serve it.
- Run the following command to start the Hugo server:
hugo server -D
- Open your web browser and go to
http://localhost:1313
. You should see your new Hugo site.
Conclusion
Congratulations! You’ve successfully installed Hugo on your Windows 11 machine and created your first static site. Hugo’s speed and flexibility make it an excellent choice for building a wide range of websites, from simple blogs to complex company sites.
If you have any questions or run into any issues, the Hugo community is very active and can be a great resource. Happy building!