Hugo homepage as page bundle

Jan 28, 2025

My aim was to divide the start page of a Hugo site into blocks, with each block being a separate Markdown file. The same principle should also work (optionally) for normal pages. Here is the code with which this is possible.

Content structure:

content/
  home/
    _index.md
    block-1.md
    block-2.md
  about/
    index.md
    block-1.md
    block-2.md

Note the different index file names (with and without underscore). The homepage is per definition a leaf bundle while the other pages are branch bundles. More details here.

The block order can be defined in the header of the content files:

+++
order = 1
+++

themes/theme/layouts/_default/baseof.html:

{{ block "main" . }}
{{ end }}

themes/theme/layouts/_default/home.html:

{{ define "main" }}
  {{ with .Site.GetPage "/home" }}
    <article class="first">
      {{ .Title }}
      {{ .Content }}
    </article>
    {{ range sort .Resources ".Params.order" }}
      <article>
        {{ .Title }}
        {{ .Content }}
      </article>
    {{ end }}
  {{ end }}
{{ end }}

themes/theme/layouts/_default/single.html:

{{ define "main" }}
  <article class="first">
    {{ .Title }}
    {{ .Content }}
  </article>
  {{ range sort .Resources ".Params.order" }}
    <article>
      {{ .Title }}
      {{ .Content }}
    </article>
  {{ end }}
{{ end }}

Back…