Creating a Blog

With MDSvex and TailwindCSS

Table of Contents

• Creating a Blog
  • Starting up the App
  • Next Steps

Starting up the App

npm init svelte@next app-name

cd app-name

npx svelte-add@latest tailwindcss mdsvex

npm i

npm i -D @sveltejs/adapter-static@next

Import and add adapter to svelte.config.js file.

import adapter from '@sveltejs/adapter-static';
const config = {
    kit: {
        adapter: adapter(),
        target: '#svelte',
};

export default config;

npm run dev

Next Steps

Create your __layout.svelte and index.svelte files to your preferences. Create a folder under routes called posts for the page files. For the actual markdown posts, create a folder at src/posts. Now that the folders are created, we can work on the files. Inside of src/posts write your markdown post in the style of the code below with the metadata title, you can add more metadata, but this will be used to list the posts.

---
title: Your Title
---

...your post

Next, inside of routes/posts create 2 files, index.svelte and [slug].svelte. In index.svelte we need to grab the posts and list them out on the page like this.

<!-- index.svelte -->
<script context="module">
    export async function load() {
    // import all md files
        const mdFiles = import.meta.globEager('../../posts/*.md')
    // turn into array and map over
        const posts = Object.entries(mdFiles).map((post) => {
      // get correct slug format
            const slug = post[0].substring(post[0].lastIndexOf('/') + 1).replace('.md', '')
      // pull out title
            const title = post[1].metadata.title
            return {
                slug,
                title
            }
        })
        return {
            props: {
                posts
            }
        }
    }
</script>

<script>
    export let posts
</script>

<section>
    <h1>Posts</h1>
    <ul class="grid grid-cols-1 gap-2">
        {#each posts as post}
            <li>
                <a sveltekit:prefetch href={`/posts/${post.slug}`}>{post.title}</a>
            </li>
        {/each}
    </ul>
</section>

Then, in [slug].svelte we can grab each post and display it.

<script context="module">
    export async function load({ page }) {
        const Post = (await import(`../../posts/${page.params.slug}.md`)).default
        // }
        return {
            props: {
                Post
            }
        }
    }
</script>

<script>
    export let Post
</script>

<article>
    <svelte:component this="{Post}" />
</article>