Mage Pages

Mage Pages is a static site generator for Deno. Build pages with Markdown or Preact, compose them with nested layouts, and deploy anywhere.

import { MageApp } from "@mage/app";
import { pages } from "@mage/app/pages";

const app = new MageApp();
const { registerDevServer } = pages();

registerDevServer(app);

Deno.serve(app.handler);

Features

  • Markdown and Preact - Write content in Markdown or build interactive pages with TSX
  • File-based routing - Directory structure becomes URL structure
  • Nested layouts - Compose layouts from root to leaf
  • Syntax highlighting - Code blocks are highlighted automatically
  • UnoCSS integration - Atomic CSS with automatic extraction
  • Hot reload - Fast development with error overlays
  • Production ready - Asset hashing, sitemap, robots.txt generation

Quick Start

Create a pages directory with your first page:

my-site/
├── pages/
│   └── index.md
└── main.ts

Write some content in pages/index.md:

---
title: "My Site"
description: "Welcome to my site"
---

# Welcome

This is my site built with Mage Pages.

Create main.ts:

import { MageApp } from "@mage/app";
import { pages } from "@mage/app/pages";

const app = new MageApp();
const { registerDevServer } = pages();

registerDevServer(app);

Deno.serve(app.handler);

Run the development server:

deno run -A main.ts

Visit http://localhost:8000 to see your site.

Next Steps