How to add a Static Page to Hugo

Adding a static page to a Hugo site is straightforward and involves creating a new markdown file in the appropriate directory and optionally customizing it with front matter and content. Here’s a step-by-step guide:

1. Set Up Your Hugo Site

If you haven’t already set up a Hugo site, you can create one by running:

hugo new site my-hugo-site
cd my-hugo-site

2. Install a Theme

Choose and install a theme for your site. For example, to install the Ananke theme:

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

3. Create a New Static Page

Create a new static page using the hugo new command. For example, to create an about page:

hugo new about.md

This command creates a new markdown file in the content directory:

content/about.md

4. Edit the Markdown File

Open the newly created about.md file in a text editor. It will contain some default front matter. Add your content below the front matter:

---
title: "About"
date: 2024-05-25T14:15:22Z
draft: true
---

Welcome to the About page of my Hugo site! Here you can find more information about me and my work.

5. Publish the Page

Change the draft status to false to publish the page:

---
title: "About"
date: 2024-05-25T14:15:22Z
draft: false
---

Welcome to the About page of my Hugo site! Here you can find more information about me and my work.

To add a link to this page in your site’s navigation menu, you can edit the config.toml file:

[[menu.main]]
  identifier = "about"
  name = "About"
  url = "/about/"
  weight = 2

7. Run the Hugo Server

Run the Hugo server to see your changes live:

hugo server

Open your browser and navigate to http://localhost:1313/about/ to view the new page.

8. Deploy Your Site

Once you are satisfied with your new page, build the site and deploy it:

hugo

The generated static site will be in the public directory, ready to be deployed to a web server or a hosting service like Netlify or GitHub Pages.

Summary

Create the Page: Use hugo new about.md to create a new page.
Edit Content: Add your content to the markdown file.
Publish the Page: Change draft to false.
Menu Link: Optionally, add the page to the navigation menu.
Preview: Run hugo server to preview the changes.
Deploy: Build the site using hugo and deploy the public directory.

By following these steps, you can easily add and manage static pages in your Hugo sit.