Creating a headless blog

This assumes you have an existing Svelte project you wish to add a blog to. If not, see here.

Pullnote can power an area of your site (say /blog and all of the folders underneath) or individual folders / pages.

1. +layout.server.js

In your blog folder (or whatever your content directory is) create a +layout.server.js file to retrieve data from the pullnote API:

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

Replace YOUR_API_KEY with the free key in Pullnote project settings.

2. /routes/blog/[...slug] folder

Create a folder called [...slug] and add an empty +page.svelte file to it (yes, completely empty) so that the Svelte router will pick the folder up. This will catch all of the sub-folder content too.

3. +layout.svelte

Drop this +layout.svelte file into your content root:

  export let data;
  // Make the note reactive so that the layout refreshes on url change
  $: note = data.note;

  {@html note.head_html}

<a href={data.note.category.pathname}>


{#if note.picture}
  <img src={note.img.src} alt={note.img.alt} />

{@html note.content_html}

<slot />

{#if note.is_category}
  <hr />
    {#each note.links as link}
        <a class="link" href={link.pathname}>

That's it

  • Run npm run dev and you should see any content you've entered in the pullnote console.
  • If you have a root layout and CSS, your site's stylings should automatically be adopted but you can also obviously customise the above +layout.svelte to suit.

Developers Blog T&Cs Privacy