Skip to main content
Website Boilerplate

Write your first page

This page walks through replacing the placeholder content in the scaffolded project with your first real page. It assumes no prior experience with MDX (Markdown that lets you drop JSX into it).

Keep the dev server running

Start pnpm dev before you edit anything.

pnpm dev

The dev server watches src/ and reloads the browser on every change, so edits show up as you save.

The shape of src/index.mdx

The scaffolded src/index.mdx has this outline:

---
layout: post
title: Welcome
---

import { Island } from "@tuqulore-inc/eleventy-preset/island";
import Clicker from "./clicker.client.jsx";

# Welcome

...
  • The YAML block fenced by --- at the top of the file is the Eleventy page data (frontmatter) — here it sets layout and title.
  • The import lines pull in values used as JSX inside MDX.
  • Everything after the blank line is Markdown: headings, paragraphs, and lists render to HTML as-is.

Replacing the title and body

Start by editing title in the frontmatter and the H1 body.

---
layout: post
title: My first site
---

# My first site

Built with Eleventy and Preact.

Save the file. The browser reloads automatically and the updated title and body appear.

Removing the Island

The scaffold ships <Island component={Clicker} /> — an example counter that showcases Partial Hydration (the initial paint stays as static HTML, and the client-side script only loads when the user actually interacts). If you do not need that on a docs-style site, delete the corresponding import line and the <Island> element.

The design rationale and use cases for Partial Hydration live in Plugins / eleventy-plugin-preact-island.

Next

Grasping the directory layout of the scaffolded project makes it easier to know where to go next. Continue with Project structure.