Make sure you have completed the Supabase setup before continuing with the section

​
Setup

1

Go to Supabase

Head over to Supabase and navigate to your project’s dashboard.

2

Create blogs table

Using the SQL Editor, create a table using the following SQL code:

SQL Editor
create table
    public.blogs (
        id uuid not null default gen_random_uuid (),
        created_at timestamp with time zone not null default now(),
        content jsonb not null,
        slug text not null default ''::text,
        constraint blogs_pkey primary key (id)
    ) tablespace pg_default;

alter table public.blogs enable row level security;
3

Create RLS policy

Add a new RLS policy that enables read access to the public (all users).

​
Usage

The /blogs route will display all the blogs you have created.

To create a blog you can insert a new row to the blogs table you have just created. You can use the blog structure below to define the blog and define a slug that will be used as the link on your site: /blogs/[slug]

​
Blog Structure Example

Live Blog Example 
{
  "date": "May, 2024",
  "slug": "demo-blog",
  "image": "https://jvridduomhemawbmtdjg.supabase.co/storage/v1/object/public/blog/demo-blog/sveltekit.png?t=2024-04-29T22%3A19%3A55.093Z",
  "imageAlt": "Demo",
  "title": "Demo Blog",
  "category": "Tutorial",
  "author": "sveltepack",
  "authorUrl": "https://twitter.com/rahulsingh_ca",
  "authorImage": "https://jvridduomhemawbmtdjg.supabase.co/storage/v1/object/public/blog/authors/87246122.jpeg?t=2024-04-20T21%3A37%3A58.038Z",
  "authorAlt": "Author Alt",
  "description": "Demo Blog about SvelteKit and Svelte and making it look like a real blog",
  "content": [
    {
      "text": "Some title",
      "type": "Title"
    },
    {
      "text": "<p class='opacity-80'>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>",
      "type": "Paragraph"
    },
    {
      "type": "Bullet",
      "items": [
        "Item 1",
        "Item 2",
        "Item 3"
      ]
    },
    {
      "alt": "Some paragraph text",
      "src": "https://jvridduomhemawbmtdjg.supabase.co/storage/v1/object/public/blog/demo-blog/sveltekit.png?t=2024-04-29T22%3A19%3A55.093Z",
      "type": "ImageCenter"
    },
    {
      "alt": "alt",
      "src": "https://jvridduomhemawbmtdjg.supabase.co/storage/v1/object/public/blog/demo-blog/sveltekit.png?t=2024-04-29T22%3A19%3A55.093Z",
      "text": "<p class='opacity-80'>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>",
      "type": "ImageRight",
      "subtitle": "Demo"
    },
    {
      "alt": "alt",
      "src": "https://jvridduomhemawbmtdjg.supabase.co/storage/v1/object/public/blog/demo-blog/sveltekit.png?t=2024-04-29T22%3A19%3A55.093Z",
      "text": "<p><span><a class='underline text-primary-500 font-semibold' href='/'>CLICK THIS LINK!</a></span> <span class='opacity-80'>Contrary to popular belief, Lorem Ipsum is not simply random text.</span></p>",
      "type": "ImageLeft",
      "subtitle": "Demo"
    }
    ... // ADD MORE CONTENT BLOCKS AS NEEDED
  ]
}

Within each content object, there is a “type” property that corresponds to a component found in src/components/blog.

In src/routes/blogs/[slug]/+page.svelte you will see how the blog gets dynamically rendered based on the “type” property.

Blogs generated with the proper json structure will take advantage of the SEO optimizations in sveltepack. More on this can be found in the SEO section.
SEOHeader