Quick Start with Deno

This guide will help you create your first Sapling website using Deno.

Prerequisites

  • Deno installed on your machine
  • A code editor (we recommend VS Code with the Deno extension)

Create a New Project

deno -A jsr:@sapling/create

Select the "Basics" template.

Start the Development Server

deno task dev

Your site is now running at http://localhost:8080!

Project Structure

my-website/
├── components/     # Reusable UI components
├── layouts/        # Page layouts
├── pages/          # Your pages/routes
├── static/         # Static assets
├── deno.json      # Project configuration
└── index.ts       # Entry point

Create Your First Page

  1. Create a new file pages/about.ts:
import Layout from "../layouts/Layout.ts";
import { html } from "@sapling/sapling";

export default async function About() {
  return await Layout({
    children: html`
      <div class="max-w-screen-lg min-h-screen mx-auto px-4 py-16 flex flex-col gap-4">
      <h1 class="text-2xl font-bold">About Us</h1>
        <p>Welcome to our website!</p>
        <a class="text-blue-500" href="/">Go back home</a>
      </div>
    `,
  });
}
  1. Add the route in index.ts underneath the Home route:
site.get("/about", async (c) => c.html(await About()));

Visit http://localhost:8080/about to see your new page!

Next Steps