svelte-headless

Svelte Headless

Example Svelte headless CMS

Svelte Headless

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

Getting started

  • Clone this repo with git clone git@github.com:webuildsociety/svelte-headless.git
  • Install with npm install
  • 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
  • We use Pullnote as the content management system, as it's headless and free. Setup your own, and replace the PULLNOTE_KEY in +layout.server.js
  • Non-CMS pages can be added as normal using additional folders under routes
  • Replace +page.svelte with your home-page or 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.

Top categories

Loading Svelte Themes