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>