The field guide / Hugo

Hugo Static Website Builder

Hugo is a static site generator that combines content, templates, and configuration into a published site. A Hugo workflow is especially useful when many pages share layouts and your authors are comfortable managing structured content files.

Hugo, From Zero: yellow and blue typography card introducing a Hugo static site workflow.
A useful fit
Content collections & documentation
Authoring layer
Content files plus Hugo templates
What you deliver
A generated public directory

Organize the content before the theme

Choose content sections that match the publication: articles, project notes, or guides. Decide which metadata every entry needs, such as a title, date, summary, and featured image. Keep labels consistent so archive pages do not fragment into near-duplicate categories.

Start with a representative long page and a small collection. Include headings, a list, an image, and any code examples you expect to publish. This gives you a realistic test of the layout and content conventions before migration.

Keep source and output distinct

The Hugo project contains the files you edit. A production build writes the website files to the configured output location, commonly the public directory. The development server is useful for preview, but its behavior and draft visibility should not be mistaken for the final export.

Keep theme changes controlled and record the Hugo version used by the project. When you update the tool or theme, rebuild and inspect the same representative pages so a change in markup or asset handling is easy to notice.

Inspect what visitors will receive

Check the generated homepage, a nested article, and each archive type through a static server. Confirm that styles, images, feeds, and canonical URLs point at the intended domain. Inspect publication settings so unfinished drafts do not appear unexpectedly.

Use the Hugo beginner workflow for a fuller build sequence. Compare the component-oriented approach in the Astro guide, or return to the static builder overview if the project needs a simpler starting point.

Questions about Hugo

Does the visitor need Hugo installed?

No. Hugo runs while producing the site. The visitor receives the generated HTML, CSS, images, and browser scripts.

Is the development preview the release artifact?

No. Create and inspect a production build. Draft inclusion, paths, and asset behavior can differ from a local development preview.

Primary reference: Hugo: quick start.