Building a Static Website with Hugo: Crafting Multiple Pages with Ease
Hugo, a lightning-fast static site generator, is a popular choice for building websites. One of its core strengths lies in its ability to manage content effectively, including the creation of multiple static pages. In this article, we'll explore how to construct a website with Hugo, focusing on generating distinct pages beyond just the homepage.
The Setup: A Simple Example
Let's start with a basic Hugo website. Create a new project using the hugo new site my-website command. Navigate to the newly created my-website directory and initialize the theme with hugo new theme my-theme. Now, within the my-theme directory, create a layouts folder followed by index.html. This index.html file will serve as the template for our homepage.
<!DOCTYPE html>
<html>
<head>
<title>{{ .Title }}</title>
</head>
<body>
<h1>{{ .Title }}</h1>
{{ .Content }}
</body>
</html>
This simple template displays the page title (defined in the content file) and the content itself.
Creating Static Pages
To generate distinct pages, we'll create individual content files within the content directory of our project. For example, to create a "About" page:
hugo new about.md
This will create an about.md file within content. Open this file and add your content:
---
title: "About Us"
---
Welcome to our About page!
Hugo will automatically render this file into a static HTML page accessible at /about/.
Multiple Pages and Navigation
To link these pages together, we need to implement navigation. In our index.html template within the my-theme/layouts folder, add the following code:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
</ul>
</nav>
Now, our homepage will link to both the homepage itself and the "About" page.
Dynamic Content with Hugo
For more complex websites, you can utilize Hugo's templating engine for dynamic content. You can create separate layouts for specific pages, use shortcodes to embed custom functionality, and even fetch data from external sources.
Conclusion
Hugo's simple yet powerful framework empowers you to create multiple static pages easily. Whether you're building a personal blog, portfolio website, or a more complex project, Hugo's flexibility and speed will make the development process a breeze.
For a deeper dive into Hugo's functionalities, check out the official documentation: https://gohugo.io/
This article has shown you the basics of creating multiple pages with Hugo. Experiment with different layouts, content organization, and navigation structures to build the static website that best fits your needs. Happy coding!
