Concept on HCD

Project Structure and UFS

Mon, 01 Jan 0001 00:00:00 +0000

Project Structure

A standard Hugo project has this structure:

my-project/
├── archetypes/ # Default templates for new content
├── assets/ # Can be processed via Hugo Pipes (CSS, JS, images)
├── static/ # Can't be processed, copied to output as is
├── config/
│ ├── _default/ # Default config
│ │ └── hugo.yaml # Site configuration, can also live in the project root
│ └── production/ # Environment-specific overrides
├── content/ # Markdown content 
├── data/ # Custom data files (JSON/YAML/yaml) for templates
├── i18n/ # Translations
├── layouts/ # Template files, the site's HTML structure
├── public/ # Build output directory
├── resources/ # Resource processing cache
└── themes/ # Theme (if installed via git submodule)

resources and public are regenerated on every build. You should add both directories to .gitignore, since there's no benefit to tracking generated files in Git.

Content Management

Mon, 01 Jan 0001 00:00:00 +0000

This article covers everything related to the content directory.

Multilingual Sites

Mon, 01 Jan 0001 00:00:00 +0000

In Hugo, each language is an independent site In a multilingual website, each language is a site on the language dimension. This page explains how to configure it.

Configuration

Declare the languages your site uses in hugo.yaml:

Sites Matrix

Mon, 01 Jan 0001 00:00:00 +0000

Each language is its own independent site in Hugo. Hugo v0.153.0 went further and introduced the sites matrix concept, raising the old single dimension model of "one language equals one site" into a combination of three dimensions. This page explains the concept and how to use it to control the scope of content generation.

Hugo Modules

Mon, 01 Jan 0001 00:00:00 +0000

This page covers Hugo Modules and the corresponding hugo mod command in detail.

What Is a Module

A module is Hugo's basic unit for organizing content. A module can be a full Hugo project, or it can be a small reusable package that provides just one type of component (content, layouts, assets, data, i18n, static, archetypes). A theme you install is, at its core, a module.

Template System

Mon, 01 Jan 0001 00:00:00 +0000

This article introduces Hugo's template lookup mechanism, which determines which template applies to each page. Three core concepts drive this mechanism: page kind, page type, and the layout manually specified in front matter. Once you understand these core concepts, we'll walk through the full template classification, then explain the complete lookup order. Two examples at the end will tie everything together.

Data

Mon, 01 Jan 0001 00:00:00 +0000

The Data directory stores only three file types: yaml, YAML, and JSON. What makes this directory distinctive is that once Hugo starts, its contents get loaded into Hugo's memory and stay there until the build finishes, without ever being cleared in between. Large structural files that aren't shared across multiple pages should go in the assets directory instead, since Hugo garbage-collects the memory assets files occupy once processing completes.

Content Adapter

Mon, 01 Jan 0001 00:00:00 +0000

Content adapters are used to build dynamic pages, most commonly for generating API documentation. A pre-build script creates a structured JSON file, and the content adapter reads that data file to automatically generate pages. For usage details, see the official documentation.

Output Formats

Mon, 01 Jan 0001 00:00:00 +0000

Hugo supports having a single page produce multiple output formats. This is configured through output formats.

Output formats commonly serve three purposes:

Generating a site-wide JSON index for search.
Using build order to preprocess data before rendering.
Outputting Markdown (for example, llms.txt) for AI tools or other consumers to read.

Basic Configuration

Define the format you want to output in hugo.yaml: