Skip to content
WollyCMS Docs

Quick Start

Create a new project

Section titled “Create a new project”
Terminal window
npx create-wolly my-site
cd my-site

This scaffolds a new WollyCMS project with:

  • package.json with @wollycms/server dependency
  • .env with a generated JWT secret
  • .gitignore, .env.example, docker-compose.yml
  • data/ and uploads/ directories

Install and run

Section titled “Install and run”
Terminal window
npm install
npm run migrate
npm run seed
npm run dev

Your CMS is now running:

Default login: admin@wollycms.local / admin123

Create your Astro frontend

Section titled “Create your Astro frontend”

In a separate directory, create an Astro project:

Terminal window
npm create astro@latest my-frontend
cd my-frontend
npm install @wollycms/astro

Connect to WollyCMS

Section titled “Connect to WollyCMS”

Create src/lib/wolly.ts:

import { createClient } from '@wollycms/astro';


export const wolly = createClient({
  apiUrl: 'http://localhost:4321/api/content',
});

Create the block mapping

Section titled “Create the block mapping”

Create src/lib/blocks.ts:

// Map CMS block type slugs to Astro components
export { default as hero } from '../blocks/Hero.astro';
export { default as rich_text } from '../blocks/RichText.astro';
export { default as image } from '../blocks/ImageBlock.astro';
// Add more as you create block components

Create a catch-all route

Section titled “Create a catch-all route”

Create src/pages/[...slug].astro:

---
import Layout from '../layouts/Default.astro';
import BlockRenderer from '@wollycms/astro/components/BlockRenderer.astro';
import { wolly } from '../lib/wolly';
import * as blocks from '../lib/blocks';


const slug = Astro.params.slug || 'home';
const page = await wolly.pages.getBySlug(slug);
---


<Layout title={page.title}>
  <BlockRenderer
    blocks={page.regions.hero ?? []}
    components={blocks}
  />
  <BlockRenderer
    blocks={page.regions.content ?? []}
    components={blocks}
  />
</Layout>

Create your first block component

Section titled “Create your first block component”

Create src/blocks/Hero.astro:

---
const { fields } = Astro.props;
---


<section>
  <h1>{fields.heading}</h1>
  {fields.description && <p>{fields.description}</p>}
</section>

Next steps

Section titled “Next steps”