Website design

Homepage

Understand what controls the front page, change its layout, and keep its story cards current.

GroCMS 0.1.0 · Reviewed 15 September 2026

Download this guide

What controls the front page

The homepage is the website address ending in /. Its appearance can come from a dedicated home template, a Page selected in Site settings, or the built-in fallback. In the reference website, the home template supplies the opening message and story collection. Editing a Page called Home does not automatically make that Page the front page; its title is a label, not a routing instruction.

Start by identifying the existing published home template and the Homepage selection in Settings. Treat these as two related decisions: the selected Page supplies content fields, while the chosen composition supplies the arrangement. Header navigation, footer content, and brand styling are resolved separately around the main content.

Sources: Public page selection and resource resolution; Public website frame and theme application; Reference website content.

The exact selection order

  1. At /, a published Site settings record can select a Homepage Page. That Page becomes the current content record.
  2. If that Page has its own custom composition, the custom composition wins. This includes a composition whose canvas has no blocks.
  3. Without a Page composition, an explicitly selected Template on the Page wins over automatic template matching.
  4. Without an explicit Template, the homepage checks the home template first, then the applicable single/page templates and index fallback. With no suitable layout, the built-in renderer provides a fallback.

Sources: Public page selection and resource resolution; Public website frame and theme application.

Change the opening message and layout

  1. As an administrator or designer, open Templates and select the existing home template. Confirm that Template matching → Template key is home.
  2. Open Visual editor. Select the Hero component to edit its Introductory line, Heading, Supporting text, Button label, and Button link in Block settings. Use a real destination such as /journal when that is your site's archive path.
  3. Select or add a Section to adjust Paper, Soft, or Dark tone and Compact, Comfortable, or Generous spacing. Put connected content or text inside its drop area.
  4. Wait for the saved state, open Preview, and inspect the result. Return to the editor and Publish when the saved version is ready.

The small component canvas is useful for arrangement; the full Preview is the better place to judge the complete page with its navigation and footer. A draft update does not replace the current public homepage. Publishing the template changes every route that uses it, so keep home-specific material in the home template rather than the general index fallback.

Sources: Resource editor and design resource fields; Puck integration and editor configuration; Configured website components; Role and resource permissions.

Where homepage cards come from

A Content collection component is a connected query, not a list of manually typed cards. For the journal, set Content type key to post and choose a limit from 1 to 24. Its title is the section heading. Each card takes its title, excerpt, featured image, and destination from the corresponding eligible published record. Updating those fields in Posts changes the source; publish the post to change its public card.

On a normal home composition, the loader retrieves recent eligible records of the requested type, ordered by their selected revision date with a stable identifier tie-break. This is not a custom ordering or category-filter control. Use the archive for paginated browsing. Typing posts instead of the actual type key post will not select the intended collection.

Sources: Configured website components; Public page selection and resource resolution; Built-in layout patterns.

Use a specific Page as the homepage

An administrator or editor can prepare and publish the Page. An administrator or designer can then open Settings → Site settings → Manage settings, choose it in Homepage, save, and publish the settings record. The Page is a required dependency, so publish it before publishing settings that point to it. The page's separate public address can still exist; selecting it for / does not rename its slug.

Coordinate these roles when a designer is responsible for layout and an editor is responsible for Page copy. Designers can manage design resources but cannot edit Page content under the current policy. Editors can manage Pages but cannot manage templates or site settings. An administrator can complete the whole change.

Sources: Settings navigation; Resource editor and design resource fields; Revision and publication service; Role and resource permissions.

If the homepage does not change

  • Check which resource you published. Publishing a Page does not publish its selected template, brand, menu, or settings record.
  • Check for a custom Page composition or explicit Template that takes precedence over home.
  • If cards are missing, verify the type key and each post's publication and public visibility. A draft or withdrawn post is not a public card.
  • If the layout appears but a body is missing, include Content body; a Hero's supporting text is a separate field.
  • If a color stays unchanged, check the published Brand & theme revision and its saved overrides. Selecting defaults does not clear a saved color or custom font.

Sources: Public page selection and resource resolution; Resource editor and design resource fields; Revision and publication service; Website component styles.