svelte-git-cms

Svelte Git CMS

• It uses Github issues as a CMS
• All issues and labels are only pulled once when your website is visited first time after being deployed.
• Anytime you create or update a issue or label it get's synced using github webhook
• All subsequent visits to your website uses the data stored in server side store

• Install the package in your sveltekit app

   npm i -D svelte-git-cms
  

• Create src/hooks.js with following content

  import { githubSync } from 'svelte-git-cms'
  
  /** @type {import('@sveltejs/kit').Handle} */
  export async function handle({ event, resolve }) {
      await githubSync({
          github_repo: 'ak4zh/svelte-git-cms', // your github repo
          github_token: process.env.GITHUB_TOKEN // your github token
      })
      const response = await resolve(event);
      return response;
  }
  

  • githubSync params

    • github_repo: your github repo {username}/{repo-name}
    • label_prefix: labels with this prefix will be used as post tags (default value +)
    • label_published: all issue with this label will appear on webiste (default value +page)
    • allowed_authors: comma separtated usernames (default value repo owner) can be set to *to allow all authors
    • slug_suffix_issue_number if enabled slug will end with -{issue-number} to ensure unique slug
    • github_token provide it else you will hit github api limits

  • Notes

    • If you do not like the + prefix you can change it by set it to any other character or leave it empty for no prefix. In that case all labels will be used as tags.

• Create an webhook route for github, so github can inform your app when issues or labels change.

  a) Create webhook endpoint src/routes/api/git/webhook/+server.js

  import { handleWebhook } from 'svelte-git-cms';
  
  /** @type {import('./$types').RequestHandler} */
  export async function POST({ request }) {
      return handleWebhook(request)
  }
  

  b) Go to your github repo Settings > Webhooks > Add webhook and create a new webhook with following config:

  • Payload URL https://YOUR_PRODUCTION_DOMAIN/api/git/webhook
  • Content type application/json
  • Events Select Issues and Labels

• Create +page.server.js in the route you want to show the posts / labels.

  a) src/routes/+page.server.js

  import { labels, posts } from 'svelte-git-cms';
  import { get } from 'svelte/store';
  
  /** @type {import('./$types').PageServerLoad} */
  export async function load({ params }) {    
      return {
          posts: get(posts),
          labels: get(labels)
      }
  }
  

  b) src/routes/+page.svelte

  <script>
      /** @type {import('./$types').PageServerData} */
      export let data;
  </script>
  
  {JSON.stringify(data)}
  

Inspiration

The idea of using github as CMS is inspired from swyxkit