Astro Minimal Starter

A minimal starter template for building an Astro site with CloudCannon using Editable Regions for visual editing.

Features

• Visual editing with Editable Regions (text, image, array, source, and component regions)
• Page building with reusable components
• Blog with pagination and tags
• Tailwind CSS v4 with CSS-first configuration
• SEO controls
• Pagefind search

Getting Started

Click Use this template to make your own copy of the repository.

Local Development

1. Clone the repository to your local machine.

2. Start the development server.

npm install
npm run dev

CloudCannon Setup

This site is pre-configured for CloudCannon. Connect your repository and CloudCannon will detect the configuration in .cloudcannon/initial-site-settings.json and build your site automatically. The editing experience is defined in cloudcannon.config.yml, which you can modify to control your editors' experience.

Editable Regions

This starter demonstrates several types of Editable Region:

• Text (data-editable="text") for editing front matter text values inline
• Image (data-editable="image") for editing front matter image values
• Array (data-editable="array") for page-building with reorderable content blocks
• Source (data-editable="source") for making standalone .astro pages editable
• Component (<editable-component>) for live re-rendering of Astro components

Components that need live re-rendering are registered in src/scripts/register-components.ts and loaded conditionally when the site is open in CloudCannon's Visual Editor.

Source Editables

The About page (src/content/pages/about.astro) demonstrates source editables — a pattern where content lives directly in an Astro template rather than in Markdown front matter. Source editable regions use data-editable="source", data-path="path/to/file.astro", and data-key attributes. CloudCannon writes changes straight back to the .astro file.

This is useful for standalone pages (like About or Contact) where a developer wants full control over the markup while still giving editors visual editing access — and where page building with components is not desired. No accompanying Markdown file or front matter schema is needed. A thin routing wrapper in src/pages/about.astro handles Astro's file-based routing.

Components

Three page-building components are included:

• Hero — heading, subheading, image, and optional button
• LeftRight — side-by-side text and image, with optional flip and button
• TextBlock — heading and rich text content

Content

• Pages are in src/content/pages/ as Markdown with structured front matter, and support a component-based page-building workflow. Developers can also add standalone pages paired with a routing file in src/pages/ (like src/content/pages/about.astro), and decide which parts of those pages are editable in CloudCannon.
• Blog posts are in src/content/blog/ as MDX files
• Data files (site settings, navigation) are in data/

Project Structure

├── .cloudcannon/          # CloudCannon schemas and postbuild
├── cloudcannon.config.yml # CloudCannon configuration
├── data/                  # Site-wide data files
├── public/                # Static assets
└── src/
    ├── components/        # Astro components
    ├── content/           # Content collections (pages, blog)
    ├── layouts/           # Page layouts
    ├── pages/             # Astro page routes
    ├── scripts/           # Component registration for visual editing
    └── styles/            # Global CSS (Tailwind v4)