Pages

Pages are the standalone content of your site - things like your homepage, about page, and contact page. Each page is a Markdown file in the src/pages/ folder.

---

How Pages Work

Every page is a .md (Markdown) file with two parts:

1. Front matter - Settings at the top between --- lines.
2. Content - Your page content below the front matter, written in Markdown.

Here’s the about page as an example:

---
title: About Us
description: Learn more about what we do.
---
 
# About Us
 
This is our story...

Front Matter Properties

Property	Required	Description
title	Yes	The page title - shown in the browser tab and in search results.
description	No	A short description for SEO meta tags and search results.
menu	No	Set to true to list the page under Pages in the navbar.
layout	No	The layout template to use. Pages use base.njk unless you say otherwise.

The URL for the page is automatically derived from the filename - src/pages/faq.md becomes /faq/. You don’t need to set it manually.

---

Existing Pages

The template comes with these pages:

File	URL	Purpose
src/pages/home.md	/	Homepage
src/pages/about.md	/about/	About page
src/pages/contact.md	/contact/	Contact page (includes a form)
src/pages/404.md	/404.html	Page not found

---

Creating a New Page

1. Create a new .md file in src/pages/. For example, src/pages/faq.md.
2. Add front matter at the top:

---
title: FAQ
description: Frequently asked questions.
---
 
# Frequently Asked Questions
 
## How do I change the site name?
 
Edit `src/_data/site.json` and change the `title` field.

3. Save the file. If the dev server is running (npm start), the page will be available immediately at /faq/.
4. To add it to the navigation, either add menu: true to its front matter (it then appears under Pages in the navbar), or add a link of its own to src/_data/navbar.json:

{ "title": "FAQ", "href": "/faq", "footer": false }

---

The Homepage

The homepage (src/pages/home.md) is slightly different from other pages:

• It uses the index.njk layout (which wraps base.njk but adds a hero section).
• Its permalink is "/", so it’s the front page rather than /home/.
• It includes the feed.njk partial, which automatically shows your latest posts and events.

---
layout: index.njk
title: Welcome!
description: Check out our homepage
permalink: "/"
---
 
# Hello World!
 
Your intro text here.
 
{% set feedTitle = "Latest" %}
{% set feedWhen = "all" %}
{% include "partials/feed.njk" %}

You don’t need to manage those lists manually - new posts and events show up on their own.

---

The Contact Page

The contact page is a regular page that includes the form partial. See Forms for full details on how to configure form fields.

---

Tips

• Custom URL - If you want a page to be at a different URL than its filename, add permalink: "/custom-path/" to the front matter (always include trailing slashes). The 404 page uses this - its permalink is set to /404.html because that’s the filename Netlify expects.
• Using HTML in Markdown - You can mix HTML into your Markdown content when you need more control. For example, you can use Bootstrap classes directly: <div class="alert alert-info">Note!</div>.
• Including partials - You can include any Nunjucks partial in a Markdown file using {% include "partials/filename.njk" %}. This is how the contact page includes the form.
• .md vs .njk files - Pages can be either .md or .njk. Start with .md since it’s cleaner for content-focused pages. If you find yourself adding a lot of HTML and Nunjucks template code to a page, consider renaming it to .njk. Both work identically, but .njk signals to anyone reading the project that the file is more of a template than a content document. It’s a small thing, but it makes the project easier to navigate as it grows.

The Feed

feed.njk shows events and posts together as a grid of cards. You can use it on any page, as many times as you like. Set what it shows just before the include:

Variable	Values	Default
feedTitle	The heading above the grid	none
feedEvents	"yes" or "no" - include events	"yes"
feedPosts	"yes" or "no" - include posts	"yes"
feedFeatured	"yes" - only items marked featured	"no"
feedWhen	"upcoming", "past", or "all" (events only)	"all"
feedLimit	A number, or "all"	6
feedColumns	Cards per row on wider screens, 1 to 12	3

For example, just the next three events:

{% set feedTitle = "Coming Up" %}
{% set feedPosts = "no" %}
{% set feedWhen = "upcoming" %}
{% set feedLimit = 3 %}
{% include "partials/feed.njk" %}

In SpaceDash, this is the Feed block in the + menu.

See Advanced Customisation for how to build your own card list components.