Svelte Headless

Example site showing how to create a simple blog site in Svelte 5 that plugs into a headless CMS. See this running at svelteheadless.com.

Getting started

• Clone this repo with git clone [email protected]:webuildsociety/svelte-headless.git your_new_name
• Install with npm install
• Copy example.env to .env and put your own pullnote api_key in (they are free from pullnote.com)
• Run with npm run dev

See how it works for a walkthrough of the code.

Make it your own

• We use Tailwind for CSS styling, as it's faster to code and less prone to mistakes than standard CSS. Add your own styling in app.css
• Edit content using the javascript markdown editor at Pullnote
• Non-CMS pages can be added as normal under routes
• Replace /src/routes/+page.svelte with your home-page and adjust Header.svelte and Footer.svelte to suit

Get it live

We use Vercel for hosting (but you can just as easily host on Netlify, Cloudflare Pages or your own GCP / AWS VM.)

• Get a free github account and use GitHub desktop to upload to your repo
• Register a domain (we use Fasthosts) and add an A record to point it at Vercel's public IP address 76.76.21.21
• Setup a Vercel account and point it at your github account and domain
• Et Voila! You're live on the internet with an editable blog.