---
url: /en/docs/frameworks/hugo.md
description: >-
  Learn how to integrate Sveltia CMS with Hugo, including the admin page setup,
  section and page bundle configuration, starter templates and real-world
  examples.
---

# Hugo Integration Guide

This guide provides resources and information for integrating Sveltia CMS with [Hugo](https://gohugo.io/), a popular static site generator.

## Starter Templates

Here are some starter templates built by the community using Hugo:

* [Hugo module](https://github.com/privatemaker/headless-cms) by [privatemaker](https://github.com/privatemaker)
* [Hugolify](https://www.hugolify.io/) by [sebousan](https://github.com/sebousan)

::: info Disclaimer

These third-party resources are not necessarily reviewed by the Sveltia CMS team. We are not responsible for their maintenance or support. Please contact the respective authors for any issues or questions.

:::

## Examples

See real-world examples of Hugo integrations in our [Showcase](/en/showcase?framework=hugo). Most of the listed sites include links to their source code, so you can explore how they implemented Sveltia CMS with Hugo.

## Setup

### Adding the Admin Page

Hugo serves static files from the [`static` folder](https://gohugo.io/getting-started/directory-structure/). Create `static/admin/index.html` and `static/admin/config.yml` as described in the [Getting Started](/en/docs/start#manual-installation) guide. The admin page is then available at `/admin/` on the development server started with `hugo server` as well as on the built site.

## Configuration

Hugo stores content in the `content` folder, and each subfolder is a [section](https://gohugo.io/content-management/sections/), such as `content/posts`. The following example manages the posts section, storing each post as a [page bundle](https://gohugo.io/content-management/page-bundles/) with its images in the same folder:

```yaml [static/admin/config.yml]
media_folder: static/images
public_folder: /images
collections:
  - name: posts
    label: Posts
    folder: content/posts
    path: '{{slug}}/index'
    media_folder: ''
    public_folder: ''
    create: true
    fields:
      - { name: title, label: Title }
      - { name: date, label: Date, widget: datetime }
      - { name: draft, label: Draft, widget: boolean, default: true }
      - { name: description, label: Description, required: false }
      - { name: tags, label: Tags, widget: list, required: false }
      - { name: body, label: Body, widget: markdown }
```

Some notes on this configuration:

* The `path` option saves a post as `content/posts/my-post/index.md`, and the empty `media_folder` and `public_folder` options store its images in the same folder. See [Using Entry-Relative Folders](/en/docs/media/internal#using-entry-relative-folders) for details. If you prefer single files like `content/posts/my-post.md`, remove these three options, and images are saved in the `static/images` folder defined at the top level instead.
* Posts with `draft: true` are not published unless Hugo runs with the `--buildDrafts` option. The default value above makes new posts drafts, so editors need to turn the option off to publish them. Alternatively, use the [Editorial Workflow](/en/docs/workflows/editorial) to review posts before they’re published.
* Hugo supports YAML, TOML and JSON [front matter](https://gohugo.io/content-management/front-matter/). Sveltia CMS detects the format of existing files automatically and saves new files with YAML front matter by default. Set the collection’s [`format`](/en/docs/collections/entries/formats#format) option to `toml-frontmatter` if your site uses TOML.
* Hugo’s `_index.md` files, which hold the content of section list pages, can be managed along with the regular entries using the [`index_file`](/en/docs/collections/entries/listings#managing-hugo-s-special-index-file) collection option.

## Support for Hugo

We have implemented specific features to enhance the integration of Sveltia CMS with Hugo:

* [Entry-relative media folders](/en/docs/media/internal#using-entry-relative-folders): Store media files in folders relative to their associated entries, which is a common practice in Hugo projects called [page bundles](https://gohugo.io/content-management/page-bundles/).
* [Nested collections](/en/docs/collections/entries/nested): Manage a tree of [sections](https://gohugo.io/content-management/sections/) as a folder tree in the sidebar, where each entry is stored as an `_index.md` file in its own folder and can be moved along with its children.
* [Entry redirects](/en/docs/collections/entries/previews#redirects): Out-of-the-box support for Hugo’s [`aliases` front matter property](https://gohugo.io/content-management/urls/#aliases), which is updated when the entry slug is changed in Sveltia CMS.
* [Manual entry reordering](/en/docs/collections/entries/operations#reordering-entries): Use the `reorder` option to add the [`weight` property](https://gohugo.io/methods/page/weight/) to entries for controlling their order in Hugo.
* [Index file inclusion](/en/docs/collections/entries/listings#managing-hugo-s-special-index-file): Manage Hugo’s [special `_index.md` files](https://gohugo.io/content-management/organization/#index-pages-_indexmd) for section entries.
* [Translation by content directory](/en/docs/i18n/structures#custom-locale-folder-placement): Put the `{{locale}}` placeholder in a collection’s `folder` option, e.g. `content/{{locale}}/posts`, to match a [multilingual Hugo site](https://gohugo.io/content-management/multilingual/#translation-by-content-directory) with a `contentDir` per language, section index files included.
* [Localizing entry slugs](/en/docs/i18n/slugs#localizing-entry-slugs): Generate localized slugs for [multilingual Hugo sites](https://gohugo.io/content-management/multilingual/) using the `translationKey` property of entries.
* [Editor components](/en/docs/api/editor-components#examples): Examples of custom components that insert Hugo [shortcodes](https://gohugo.io/content-management/shortcodes/) into Markdown content, such as an image with a caption and a YouTube embed.
* [Time formatting](/en/docs/data-output#general-conventions): A standard time is saved as `HH:mm:ss` instead of `HH:mm` for compatibility with Hugo.