--- title: Custom Pages description: Mount fully custom .astro routes alongside your docs and read your site's config, navigation, and content from the blume:data module. --- Most of a Blume site is Markdown, but sometimes you need a route that _isn't_ a doc — a landing page, a pricing page, a hand-built blog or changelog index, or an interactive dashboard. Drop an `.astro` file under your **pages** folder and Blume mounts it as a real route, right alongside your content. ## Add a page Create a `pages/` folder at your project root and add an `.astro` file: ```astro pages/pricing.astro lineNumbers --- import data from "blume:data"; ---

Pricing for {data.config.title}

``` `blume dev` picks it up immediately and `blume build` prerenders it to static HTML. The folder name is configurable with [`content.pages`](/docs/configuration#content) (default `"pages"`). Custom pages keep their original location on disk, so relative imports, component imports, and [`getStaticPaths`](https://docs.astro.build/en/reference/routing-reference/#getstaticpaths) all work exactly as they do in a plain Astro project — Blume mounts each file where it sits rather than copying it. ## Files and routes Each file's path under the pages folder becomes its route. `index` maps to the parent folder, and dynamic `[param]` segments are preserved: | File | Route | | ------------------------- | ------------- | | `pages/pricing.astro` | `/pricing` | | `pages/blog/index.astro` | `/blog` | | `pages/blog/[slug].astro` | `/blog/:slug` | | `pages/changelog.astro` | `/changelog` | A custom page **wins** over a generated route at the same path. Adding `pages/changelog.astro`, for example, replaces Blume's [generated changelog timeline](/docs/advanced/changelog) with your own. ## Reading site data Import `blume:data` to read the same resolved config, navigation, routes, and feeds the rest of the site uses: ```astro pages/all-pages.astro lineNumbers --- import data from "blume:data"; ---

All pages

``` Inside a Blume project the module is typed automatically. You can also pull the shape in explicitly — for typed helpers, props, or your own tsconfig — with `import type { BlumeData } from "blume"`: ```ts import type { BlumeData, BlumeRoute } from "blume"; const indexable = (data: BlumeData): BlumeRoute[] => data.routes.filter((route) => route.indexable); ``` The module exposes: ", required: true, description: "Per-locale navigation trees, keyed by locale code. Empty unless i18n is configured.", }, routes: { type: "BlumeRoute[]", required: true, description: "Every content page: { id, path, title, locale, indexable, hidden, draft, fallback, editUrl, lastModified, alternates, collection, entryId }.", }, feeds: { type: "BlumeFeed[]", required: true, description: "Generated RSS feeds: { href, title }.", }, fontCssVars: { type: "string[]", required: true, description: "CSS variable names for the configured fonts (Astro integration).", }, ui: { type: "UIStrings", required: true, description: "Resolved UI chrome strings for the default locale (search, sidebar, and footer labels).", }, uiByLocale: { type: "Record", required: true, description: "Per-locale UI strings, keyed by locale code. Empty unless i18n is configured.", }, }} /> `routes` carries page metadata but not frontmatter like `type` or `date`. To build a list filtered by content type — a blog or changelog index — pair it with Astro's `docs` content collection, which holds the frontmatter: ```astro pages/blog/index.astro lineNumbers --- import { getCollection } from "astro:content"; import data from "blume:data"; // Each route's id matches its collection entry id. const routeById = new Map(data.routes.map((route) => [route.id, route.path])); const posts = (await getCollection("docs")) .filter((entry) => entry.data.type === "blog" && !entry.data.draft) .map((entry) => ({ description: entry.data.description, href: routeById.get(entry.id), title: entry.data.title, })); ---
    { posts.map((post) => (
  • {post.title}

    {post.description}

    • )) }
``` ## Runtime helpers `blume/runtime` bundles the common data patterns so you don't reach into `blume:data` internals. **`getBlumeCollection(data, query?)`** selects content routes — filtered by collection, locale, or path prefix, with drafts and hidden pages excluded and the result sorted by path — which is exactly what a custom index needs: ```astro pages/blog/index.astro lineNumbers --- import data from "blume:data"; import { getBlumeCollection } from "blume/runtime"; const posts = getBlumeCollection(data, { prefix: "/blog" }); --- ``` **``** renders a content entry's body inside a custom page, with Blume's built-in MDX components (callouts, cards, steps…) already wired in — for featuring a doc on a landing page or building a bespoke index that shows real content: ```astro pages/index.astro lineNumbers --- import BlumePage from "blume/components/BlumePage.astro"; import data from "blume:data"; import { getBlumeCollection } from "blume/runtime"; const [intro] = getBlumeCollection(data, { prefix: "/docs" }); --- {intro && } ``` Pass `components` to add your own overrides or islands (which live in the generated runtime and aren't imported by default), and `collection` to read from a collection other than `"docs"`. ## Using the site layout `RootLayout` gives a custom page the full docs chrome — header, sidebar, search, TOC, and theme — by wrapping it in the same 3-column grid the generated pages use. For a landing or marketing page that grid is in the way, so reach for **`PageLayout`** instead: it provides the document shell, header, theme, and fonts, then a single full-width `` (no sidebar, no prose, no TOC). An optional `footer` slot renders after `
`: ```astro pages/index.astro lineNumbers --- import PageLayout from "blume/components/layout/PageLayout.astro"; import data from "blume:data"; import Footer from "./_home/Footer.astro"; const { config } = data; ---

Build docs that fly