Hugoes

How to Generate an HTML Sitemap in Hugo

An HTML sitemap is a simple yet powerful way to help both users and search engines understand the structure of your website. Unlike an XML sitemap—which (Hugo also automatically generates a sitemap.xml file for search engines) is mainly designed for search engine crawlers—an HTML sitemap provides a human-readable overview of your pages and taxonomies.

Below is a quick example of how to add a clean, automatically generated HTML sitemap to your HUGO site.

A Quick Guide to Hugo’s Core Directory Structure

A Hugo site is powered by five key directories: content, layouts, archetypes, static, and themes. Here’s a concise guide to what each does and why it matters.

1. Content: Your Site’s Words

Everything you publish lives in content/.

How content is structured:

• Sections: Folders like blog/ or work/ containing multiple posts.
• Static pages: Standalone Markdown files such as about.md.

Key concepts:

• List vs. single pages:
  Sections need an _index.md to render list pages; individual posts use their own .md files.
• Homepage: Defined by content/_index.md.
• Content types: Inferred from folder name or set explicitly in front matter.

2. Layouts: How Everything Looks

layouts/ holds the templates that render all content.