Hello! Welcome back to the course.
In our last lesson, we established the core "mental model" of Hugo: it transforms your raw content and templates into a complete set of static HTML files. This pre-building process is what makes Hugo sites so fast and secure, a notable difference from the on-demand page generation of the dynamic CMS platforms you're experienced with.
Today, we move from theory to practice. This lesson is all about getting your hands dirty. By the end of our 60 minutes, you will have installed Hugo on your machine, created a brand new project, and successfully run the local development server. This will give you a live, working environment, which is the essential first step in our "vibe coding" workflow.
Step 1: Installing Hugo
First things first, you need to install the Hugo software itself. Hugo is a command-line tool, which means you'll interact with it through your computer's terminal. Since your work involves coordinating with developers and you're comfortable with technical SEO tools, working in the terminal should feel like a straightforward extension of your skills.
The easiest way to install Hugo is by using a package manager for your operating system. A package manager automates the process of installing, updating, and removing software. The article below provides excellent, clear instructions for both macOS and Windows.
Really getting started with Hugo | BryceWray.com
This article, 'Really getting started with Hugo' by BryceWray.com, provides a very clear, step-by-step guide for installation. We'll focus only on the installation part for now.
Please read 'Step 1 • Install Hugo'. Follow the instructions specific to your operating system (macOS or Windows). The guide correctly advises installing the Extended version, which is the standard for modern Hugo development.
Once the installation is complete, open a new terminal window and run the following command to verify that Hugo was installed correctly:
hugo version
You should see output that indicates the Hugo version number. As long as you don't get a "command not found" error, you're ready to proceed.
Step 2: Creating a New Project
Now that Hugo is installed, you can create the basic structure for a new website with a single command. This is similar to scaffolding a new project in other development frameworks.
The command is hugo new site <project-name>. This will create a new folder with the name you provide, containing all the standard Hugo subdirectories (content, layouts, static, etc.).
The official Hugo documentation provides the most direct instructions for creating a new site. We will use the first command listed in their Quick Start guide.
From the documentation, find the section 'Explanation of commands'. Read the explanation for the first command, hugo new site quickstart. Then, in your terminal, navigate to the directory where you want to keep your projects and run this command, replacing 'quickstart' with a name of your choice, for example, hugo new site my-vibe-project.
After running the command, navigate into your new project directory using the cd (change directory) command:
cd my-vibe-project
You have now created the "skeleton" of your Hugo site. We'll explore what each of the generated folders is for in the next lesson.
Step 3: Running the Local Development Server
This is where the magic happens. Hugo comes with a built-in web server that you can run locally on your computer. This server automatically rebuilds your site whenever you save a change to a file and refreshes your browser. This tight feedback loop is a cornerstone of efficient development and a significant advantage over older workflows that required manual uploads and refreshes.
The command to start the server is hugo server.
Let's watch a video that demonstrates this process. The video also shows some useful flags you can add to the command.
Building a static website in Markdown with Hugo
This clip from Christian Lempa's tutorial demonstrates how to start the Hugo server. It also explains the --disableFastRender and --noHTTPCache flags, which are very useful during development to ensure you're always seeing the most accurate, up-to-date version of your site.
Watch from 17:17 to 19:27. Pay attention to the command being run and the terminal output that shows the server starting up.
Now, go ahead and run the command in your terminal from inside your project folder:
hugo server
You should see output in your terminal similar to the image below, indicating that the server is running and providing a URL, typically http://localhost:1313/.
Open your web browser and navigate to http://localhost:1313/.
You will see a blank white page. This is not an error! It's expected behavior. Remember the core concept from our last lesson: Hugo needs both content and templates to build a page. Your new project has no templates yet, so Hugo has no blueprint to follow and therefore renders nothing.
Test your understanding!
You've successfully run hugo server, but your site is blank. Your colleague, who is used to WordPress, suggests checking the database connection. Based on your understanding of Hugo, why is this suggestion incorrect, and what is the actual reason for the blank page?
Show answer
The suggestion is incorrect because Hugo is a static site generator and does not use a database to build pages. The entire site is generated from files on your computer.
The actual reason for the blank page is that while you have a content folder, you have not yet created any templates in the layouts directory. Without templates, Hugo doesn't know how to display your content, so it correctly builds an empty site.
To stop the server at any time, go back to your terminal window and press Ctrl + C.
Conclusion
Congratulations! You have successfully set up a complete local development environment for Hugo. This practical skill is the foundation upon which we will build the rest of your AI-assisted workflow.
Key Takeaways:
- You can install Hugo using a package manager like Homebrew (macOS) or Scoop (Windows).
- The
hugo new site <name>command creates the standard directory structure for a new project. - The
hugo servercommand starts a powerful local development server with live-reloading capabilities. - A new, themeless Hugo site will be blank by default because it has no templates—a direct confirmation of the "content + templates = HTML" model.
Preview of the next lesson:
In the next lesson, we will do a tour of the directories created by hugo new site. You will learn the specific roles of the content, layouts, data, and static folders. Understanding this structure is critical for directing your AI tools to generate and place code in the correct locations.