Creating a Blog

With MDSvex and TailwindCSS

Table of Contents

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>