How to Build a Content-Driven Static Site with Markdown, SvelteKit and Fusionable

Step-by-step tutorial on building a static website with SvelteKit and Fusionable. Explore setting up Markdown content, dynamic filtering, sorting, and displaying articles in a flexible, fast Svelte-based site.

Building a content-driven static website is easy with SvelteKit and Fusionable. With SvelteKit’s powerful framework and Fusionable’s flexible Markdown content querying, you can quickly set up a site that loads content from Markdown files and provides dynamic lists and filtering.

In this guide, we’ll cover the essentials:

• Setting up SvelteKit and Fusionable


• Creating Markdown-based content


• Using Fusionable to query and display content

So in this article we will use:

• 
  the library for querying, parsing, sorting, filtering, limiting the Markdown files


• 
  
  
  
  
  

  
  
  
  Load Content with Fusionable
  

  
  
  

  Now, create a SvelteKit +page.server.js file to load content using Fusionable. Start by setting up a FusionCollection and loading posts from the src/content/posts directory:
  
  

  
  
  
  
  

  CODE Kopieren

  // src/routes/+page.server.js
  
  import FusionCollection from 'fusionable/FusionCollection';
  
  
  
  export function load() {
  
    const collection = new FusionCollection()
  
      .loadFromDir('src/content/posts')
  
      .orderBy('date', 'desc');
  
  
  
    const posts = collection.getItemsArray();
  
    return { posts };
  
  }
  
  

  
  
  
  
  
  
  
  

  Here, we’re ordering posts by date in descending order and retrieving the list as an array. You’ll use this data in the src/routes/+page.svelte file.
  
  

  
  
  
  
  

  CODE Kopieren

  // src/routes/+page.svelte
  
  <script lang="ts">
  
    import type { PageData } from './$types';
  
    let { data }: { data: PageData } = $props();
  
  </script>
  
  
  
  <main>
  
    <h1>Blog Posts</h1>
  
    <ul>
  
      {#each data.posts as post}
  
        <li>
  
          <a href={`/posts/${post.fields.slug}`}>{post.fields.title}</a>
  
          <p>{post.fields.date}</p>
  
        </li>
  
      {/each}
  
    </ul>
  
  </main>
  
  

  
  
  
  
  
  
  
  

  This code iterates over posts and displays each post’s title and date with a link. The links will point to individual post pages.

  
  
  

  
  
  
  Create Individual Post Pages
  

  
  
  

  To display individual posts, set up a src/routes/posts/[slug]/+page.svelte page that renders each post based on its unique slug. Create a new file in src/routes/posts/[slug]/+page.server.js:
  
  

  
  
  
  
  

  CODE Kopieren

  // src/routes/posts/[slug]/+page.server.js
  
  import FusionCollection from 'fusionable/FusionCollection';
  
  
  
  export function load({ params }) {
  
    const collection = new FusionCollection().loadFromDir('src/content/posts');
  
    const post = collection.getOneBySlug(params.slug);
  
  
  
    if (!post) {
  
      throw new Error('Post not found');
  
    }
  
  
  
    return { post: post.getItem() };
  
  }
  
  

  
  
  
  
  
  
  
  

  And then, create +page.svelte in src/routes/posts/[slug]:
  
  

  
  
  
  
  

  CODE Kopieren

  // src/routes/posts/[slug]/+page.svelte
  
  <script lang="ts">
  
    import type { PageData } from './$types';
  
    let { data }: { data: PageData } = $props();
  
  </script>
  
  
  
  <article>
  
    <h1>{data.post.fields.title}</h1>
  
    <p>{data.post.fields.date}</p>
  
    {@html data.post.content}
  
  </article>
  
  
  
  

  
  
  
  
  
  
  
  

  Now, each post’s page renders its title, date, and Markdown content.

  
  
  

  
  
  
  Final Touch: Converting Markdown to HTML with Showdown
  

  
  
  

  To make our content even more dynamic, let's convert the Markdown content in post.content into HTML using the Showdown library. This will allow us to display fully formatted Markdown as HTML on each post page.

  
  
  

  
  
  
  Installing Showdown
  

  
  
  

  If you're using Bun, you can install Showdown quickly with:
  
  

  
  
  
  
  

  CODE Kopieren

  bun add showdown
  
  

  
  
  
  
  
  
  
  

  
  
  
  Converting Markdown to HTML in +page.svelte
  

  
  
  

  In src/routes/posts/[slug]/+page.svelte, import and use Showdown to process data.post.content before rendering it.

  
  
  
  
  
  • First, import Showdown in your Svelte component.
  
  
  • Then, convert the Markdown to HTML and use Svelte's {@html ...} directive to render it safely.
  
  
  
  
  

  Here’s how it looks:
  
  

  
  
  
  
  

  CODE Kopieren

  <script lang="ts">
  
    import type { PageData } from './$types';
  
    import Showdown from 'showdown';
  
    let { data }: { data: PageData } = $props();
  
    const converter = new Showdown.Converter();
  
    const postContentHTML = converter.makeHtml(data.post.content);
  
  </script>
  
  
  
  <article>
  
    <h1>{data.post.fields.title}</h1>
  
    <p>{data.post.fields.date}</p>
  
    {@html postContentHTML}
  
  </article>
  
  

  
  
  
  
  
  
  
  

  
  
  
  Wrapping Up
  

  
  
  

  That’s it!
  
  For running your local project you can execute:
  
  

  
  
  
  
  

  CODE Kopieren

  bun dev --open
  
  

  
  
  
  
  
  
  
  

  
  

  If you are interested into builing statically the website for deploying HTML static assets in production environment, you can take a look at this article: , thank you!

  Vollständiger Original-Bericht

  Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

  ↗ Original-Artikel auf dev.to lesen