Static Page

How to create a static page

Static pages let you add pages outside the documentation flow — for example, an About page, a Contact page, or a custom landing page.

In Docuna, static pages use the same folder and the same building blocks as documentation pages, but they use a different template and include the site header and footer.

Folder location

Create static pages inside:

src/content/docs/

You can place them at the root of this folder or inside a subfolder if you prefer to organize them.

Create a new page

Create a new file with the .mdx extension. For example, to create an About page:

src/content/docs/about.mdx

Use .mdx rather than .md when the page contains Astro or Starlight components.

Frontmatter

Every static page starts with a frontmatter block. At minimum, include a title, description, and the template field.

---
title: "Your page title"
description: "A short description of the page."
image: "/path/to/cover-image.svg"
template: splash
---

• title is the page heading and the browser tab title.
• description is used for SEO metadata.
• image is the cover image shown at the top of the page.
• template: splash removes the sidebar and gives the page a full-width layout.

Full example

Here is a complete static page template you can copy and adapt.

---
title: "Your page title"
description: "A short description of the page."
image: "/path/to/cover-image.svg"
template: splash
---
import { Card, CardGrid } from '@astrojs/starlight/components';
import { Picture } from 'astro:assets';
import Conf from '../../data/config/config.json';
import Footer from '../../widget/Footer.astro';
import Header from '../../widget/Header.astro';
import '../../styles/doc.css';
import '../../styles/deja.css';

<div class="container-fluid">
<div class="row">
<div class="col-md-10 mx-auto p-3">
  <Picture
    src={frontmatter.image}
    alt={Conf.description}
    formats={['avif', 'webp']}
    sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px"
    width="1200"
    height="400"
    class="img-fluid"
    decoding="async"
  />
  <h2><strong><a href="/about">{frontmatter.description}</a></strong></h2>

  Write your article here.

</div>
</div>
</div>
<Footer/>

The important parts:

• Picture renders the cover image with modern formats (avif, webp) and responsive sizes.
• Header and Footer bring in the site navigation and footer.
• The CSS imports (doc.css, deja.css) apply the theme styles.
• The wrapping <div class="container-fluid"> and Bootstrap grid classes control the layout.

Example: About page

---
title: "About Docuna"
description: "A modern documentation theme template built on Astro JS and Starlight."
image: "/img/ssg.svg"
template: splash
---
import { Card, CardGrid } from '@astrojs/starlight/components';
import { Picture } from 'astro:assets';
import Conf from '../../data/config/config.json';
import Footer from '../../widget/Footer.astro';
import Header from '../../widget/Header.astro';
import '../../styles/doc.css';
import '../../styles/deja.css';

<div class="container-fluid">
<div class="row">
<div class="col-md-10 mx-auto p-3">
  <Picture
    src={frontmatter.image}
    alt={Conf.description}
    formats={['avif', 'webp']}
    sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px"
    width="1200"
    height="400"
    class="img-fluid"
    decoding="async"
  />
  <h2><strong><a href="/about">{frontmatter.description}</a></strong></h2>

  Docuna is a simple, modern theme template for [Astro JS](https://astro.build/) projects built on [Starlight](https://starlight.astro.build/).

  It is designed to be easy to use for documentation sites, with a landing page concept on the home view and static pages that make it simple to add an About page, a Contact page, or any other page your project needs.

</div>
</div>
</div>
<Footer/>

Notes

• Use .mdx if the page imports components. Use .md if it is plain Markdown only.
• The template: splash frontmatter removes the sidebar. Remove it if you want the sidebar to appear.
• If you add a new static page and want it in the navbar, register it in src/data/config/config.json.
• Keep the Header and Footer imports if you want the page to match the rest of the site.