Building a Modern Website with Hugo: A Complete Beginner's Guide

Mục lục

Introduction to Hugo

Hugo is a powerful static site generator built with the Go programming language. It transforms your templates and content into a blazing-fast static website, perfect for blogs, portfolios, and documentation. Unlike content management systems like WordPress that rely on databases, Hugo builds complete HTML pages that you can host anywhere, often for free. The latest versions of Hugo, such as v0.152.2, require at least Windows 10 or Windows Server 2016 .

Installing Hugo on Windows

You have several straightforward options for installing Hugo on Windows. For most users, a package manager is the easiest method.

Method 1: Using a Package Manager (Recommended)

Choose one of these free, open-source package managers for a simple installation of the extended edition of Hugo, which includes advanced features like image processing .

Chocolatey: Open a command prompt as administrator and run: choco install hugo-extended
Scoop: Run: scoop install hugo-extended
Winget: Run: winget install Hugo.Hugo.Extended

Method 2: Manual Installation with Prebuilt Binaries

If you prefer not to use a package manager:

Visit the Hugo releases page on GitHub .
Scroll to the “Assets” section and download the archive for the Windows version of the extended edition.
Extract the archive and move the single executable file to a dedicated folder (e.g., C:\Hugo\bin).
Add this folder to your system’s PATH environment variable so you can run hugo from any command prompt.

Verifying Your Installation

To confirm Hugo is installed correctly, open a new command prompt and type:

hugo version

You should see output displaying the version number, confirming the installation is complete.

Creating Your First Hugo Site

Follow these steps to create and preview your new website locally.

Generate the Site Structure: Navigate to where you want to store your projects and run the following command. This creates a new folder with all the necessary directories and files.

hugo new site my_awesome_site

Start the Local Server: Navigate into your new site’s directory and start the Hugo development server.

cd my_awesome_site
hugo serve

View Your Site: Open your web browser and go to http://localhost:1313. You will see a blank page, which is normal until you add a theme and content. This server will automatically reload the page as you make changes to your files.