Welcome to the final lesson of our first module!
In the last few lessons, we've covered the essential groundwork for your journey into "vibe coding" with Hugo. You've learned Hugo's static site generation process, explored its key directory structure, and, most recently, formalized the 5-step development cycle you'll be using: Idea -> Google Sheet -> AI Prompt -> Generated Code -> Refinement.
Today, we'll complete our foundational setup by learning how to configure your site's most basic, yet critical, settings. By the end of this lesson, you will be able to configure your site's baseURL and title within Hugo's main configuration file. This is the last step before we dive into building content-driven pages in the next module.
Your Site's Control Panel: hugo.toml
Every Hugo project has a central configuration file at its root. By default, this file is named hugo.toml. Think of it as the main control panel for your entire website. It's where you define site-wide parameters, set up menus, configure languages, and manage other global settings.
The file uses the TOML (Tom's Obvious, Minimal Language) format, which is a simple key-value system that's easy to read and edit. For example: key = "value".
To get a first-hand look at this file and its primary settings, the official Hugo documentation provides the most direct explanation.
The official Hugo 'Quick start' guide has a concise section on site configuration. This will introduce you to the three most common settings you'll adjust at the start of any project.
Please read the section titled 'Configure the site'. Focus on the three parameters it highlights: baseURL, languageCode, and title. Note the required format for baseURL.
Now, let's break down the two most important parameters for our purposes: title and baseURL.
Setting Your Site's title
The title parameter defines the global name for your website. From your extensive SEO background, you know how crucial the <title> tag is for search engine rankings and user experience in search results. The title you set in hugo.toml serves as the default for this tag across your site.
Hugo makes this site-wide title available in all your templates through a variable: .Site.Title. A template might use this to construct page titles dynamically, for example, combining a specific page's title with the site's overall title (e.g., "About Us | My Awesome Company").
Let's watch a short video that demonstrates changing this value and seeing it update live.
Hugo Actually Explained (Websites, Themes, Layouts, and Intro to Scripting)
In this clip from 'Hugo Actually Explained,' Luke Smith demonstrates how to edit the configuration file to change the site title and then immediately sees the result using the local development server.
Watch from 2:35 to 3:35 to see the config file being edited. Then, watch from 6:33 to 7:10 to see how the hugo serve command reflects that change in the browser. Notice how he changes 'My New Hugo Site' to 'based hugo site' and it appears on the local preview.
This live-reloading feature of the hugo server is what makes development so efficient. You can make a change to your configuration and instantly see its effect.
Understanding and Setting the baseURL
The baseURL is one of the most critical settings for a successful deployment. It specifies the final, public-facing root URL of your website (e.g., https://www.your-client-website.com/).
Why is this so important?
While the local development server (hugo server) works without it, the baseURL is essential when Hugo builds your site for production. Hugo uses this URL to generate correct, absolute links for all your assets (CSS files, JavaScript, images) and for internal page links.
Without a correctly set baseURL, you would end up with broken images and dead links on your live website—a common issue in website migrations and deployments that you've likely encountered in your SEO work. It ensures that all paths are resolved correctly relative to the final domain.
This video clip shows the process of setting the baseURL in practice.
Building a static website in Markdown with Hugo
Let's watch this clip from 'Building a static website in Markdown with Hugo' by Christian Lempa. He sets up a new site and one of the first things he does is configure the baseURL for his intended domain.
Watch from 15:45 to 16:20. Notice how he uncomments the baseURL line and changes the placeholder URL to his actual domain, chrisber.de.
A key takeaway is that baseURL must be a full, absolute URL, including the protocol (http:// or https://) and ending with a forward slash (/).
Test your understanding!
You are building a website for a client that will be hosted at https://www.my-new-brand.com. In your local development environment, you notice that all the images are working correctly. However, after deploying the site to the live server, all the image links are broken. What is the most likely cause of this issue in your hugo.toml file?
Show answer
The most likely cause is that the baseURL has not been set or is set incorrectly. When Hugo builds the site for production, it uses baseURL to create the absolute paths to assets like images. If it's missing, the paths will be incorrect relative to the live domain, causing them to break. You should set baseURL = "https://www.my-new-brand.com/" in your hugo.toml file and rebuild the site.
Conclusion
You have now covered the final piece of foundational Hugo knowledge. You understand that hugo.toml is the central configuration file and know how to set the two most important site-wide parameters.
Key Takeaways:
hugo.tomlis the Control Panel: It holds all global settings for your Hugo project.titlefor SEO and Branding: This sets the site's default name, which is accessible in templates via.Site.Titleand is crucial for your site's identity and SEO.baseURLfor Production: This is the absolute root URL of your live site. It is essential for ensuring that all links to assets and other pages work correctly after deployment.- Live Reloading is Key: Using the
hugo servercommand allows you to see the effects of your configuration changes in real-time.
Preview of the next lesson:
With your foundational knowledge of Hugo's structure, the AI-assisted workflow, and basic configuration complete, you are ready to start building. In our next lesson, we will begin Module 2 by diving into content architecture. You will learn how to design a Google Sheet schema that maps directly to a Hugo content type's front matter, taking the first concrete step in bringing your "vibe coding" vision to life.