Hugo is a fast and flexible static site generator. Whether you’re a beginner or a non-coder, setting up a Hugo project on Windows using PowerShell is easy to do. This guide walks you through the entire process, from installation to running your site locally.
Step 1: Install Git
Hugo uses Git to manage themes and other version control functions, so you’ll need to install Git first.
1. Download Git for Windows
- Go to the Git for Windows website.
- Download the installer and run it.
2. Install Git
- Follow the installation prompts and select the default options.
- Make sure to select “Use Git from the command line and also from 3rd-party software” during the installation process.
3. Verify Git Installation
After installation, open PowerShell and run the following command to verify that Git was installed successfully:
git --version
You should see the installed Git version.
Step 2: Install Hugo
Now that Git is installed, let’s install Hugo.
1. Download Hugo
- Open PowerShell and run the following command to download the Hugo Extended version (which includes additional features):
Invoke-WebRequest -Uri "https://github.com/gohugoio/hugo/releases/download/v0.120.0/hugo_extended_0.120.0_windows-amd64.zip" -OutFile "hugo_extended.zip"
You can change the version number (0.120.0) with the latest release from Hugo’s GitHub releases page.
2. Extract Hugo
Once the download is complete, run the following command to extract the ZIP file to a directory (e.g., C:\Hugo):
Expand-Archive -Path hugo_extended.zip -DestinationPath C:\Hugo
3. Add Hugo to System Path
To make Hugo accessible from anywhere in PowerShell, you need to add it to the system’s PATH variable.
- Press
Windows + X> System > Advanced system settings. - Click Environment Variables.
- Under System Variables, find
Pathand click Edit. - Click New, then add the path
C:\Hugowhere you extractedhugo.exe.
Click OK to save the changes.
4. Verify Hugo Installation
Now, open PowerShell and run:
hugo version
You should see the installed version of Hugo, confirming that it’s set up correctly.
Step 3: Create a New Hugo Project
Now that Hugo is installed, let’s create a Hugo project.
1. Navigate to Your Desired Folder
In PowerShell, navigate to the directory where you want to create your Hugo site. For example, to create the site on your desktop:
cd C:\Users\<YourUsername>\Desktop
Replace <YourUsername> with your actual username.
2. Create the Hugo Site
Run the following command to create a new Hugo site:
hugo new site myhugo
This will create a new directory named myhugo with all the necessary files for your Hugo project.
3. Navigate Into the Project Folder
Change into the new myhugo directory:
cd myhugo
Step 4: Add a Theme to Your Project
Hugo themes help style your site. Let’s add a theme to your new Hugo project.
1. Download a Theme Using Git
We’ll use Git to clone a theme into your Hugo site. For example, to install the popular Ananke theme, run:
git clone https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
2. Activate the Theme
Once the theme is downloaded, open the config.toml file in your Hugo project folder:
notepad config.toml
Add the following line to the file to set the theme:
theme = "ananke"
Save and close the file.
Step 5: Add Content to Your Site
Now, let’s add a simple page to your site.
1. Create a New Page
You can create a new blog post with the following command:
hugo new posts/my-first-post.md
This will create a markdown file for your first post under content/posts/my-first-post.md.
2. Edit the Content
Open the newly created file using Notepad or another text editor:
notepad content/posts/my-first-post.md
Add the following content to the file:
---
title: "My First Post"
date: 2023-07-16
---
Welcome to my first post on my new Hugo website!
Save and close the file.
Step 6: Preview Your Hugo Site Locally
It’s time to see your site in action!
1. Start the Hugo Server
In PowerShell, run this command inside the myhugo directory:
hugo server
You should see output that says:
Now browse to http://localhost:1313
2. View Your Site
Open a browser and go to http://localhost:1313. You should see your Hugo site with your first post.
Step 7: Build Your Site for Deployment
Once you’re ready to share your site, you can build it into static files for deployment.
1. Build the Site
Run the following command:
hugo
This will generate your static site in the public directory inside your project folder.
Conclusion
Congratulations! You’ve successfully set up your first Hugo project on Windows using PowerShell. Here’s a recap of what we did:
- Installed Git and Hugo using PowerShell.
- Created a new Hugo site.
- Added a theme to style your site.
- Created and edited content for your site.
- Previewed the site locally.
- Built the site for deployment.
Hugo makes it easy to create fast, flexible websites, and with these steps, you now have your own site up and running. Continue to explore Hugo’s features and themes, and customize your site further as you learn.
Let me know if you need any help with the next steps or if you have any questions!