How to make your Svelte website editable in < 10 minutes

Got a Svelte website that you want content editable without installing anything?

If you don't want to install Wordpress, or build your own admin backend. If you don't want to handle user records or authentication, and the database would only be used for content anyway, we've got you.

Step 1: setup up a free Pullnote account

• Login top-right (sign-up will happen automatically if you don't have an account)
• Add a project, set your domain name and overwrite the default text with your own musings
• Note down your api_key

Step 2: add 2 files and a folder

Your /src/routes/ folder should end up looking like this:

2 a) add a [...slug] folder

Add a magic Svelte folder titled [...slug] to catch all urls you want to content enable, and place a blank +page.svelte (yes, completely empty) file in it to trigger the Svelte router.

Alternatively place the folder under e.g. /blog/ if you only want a sub-directory powered by Pullnote.

Note: anything with a specific route will still work - only pages not already in your repo will look to the CMS.

2 b) add a +layout.server.js

This file gets run server-side by SvelteKit and pulls the content for whatever page has been routed to from the Pullnote API

export async function load({url, params}) {

  const PULLNOTE_KEY = "PUT_YOUR_API_KEY_HERE";

  var res = await fetch("https://pullnote.com/pull/note" + url.pathname, {
    headers: {
      "Content-Type": "application/json; charset=utf-8",
      "pn_authorization": "Bearer " + PULLNOTE_KEY
    }
  });
  return await res.json();
}

2 c) add a +layout.svelte

Or if you already have one, add to it. This places the HTML and header data into the page. Add some styling too!

<script>
  import "../app.css";

  export let data;
  $: note = data;

</script>

<svelte:head>
  {@html note.head_html}
</svelte:head>

<img src={note.img.src} alt={note.img.alt} class="rounded-xl" />
  
{#if note._id}

  {@html note.content_html}

{:else}

  <!-- This keeps non-pullnote folders working -->
  <slot />

{/if}

<!-- Basic menu for other notes in the same folder -->
<ul>
{#each note.links as subnote}
  <li><a href={subnote.href}>{subnote.title}</a></li>
{/each}
</ul>

Step 3: test it!

npm run dev should give you a url to kick off in your browser. Visit any pages you've set up on the CMS side and rejoice.