SvelteKit x Mdsvex (Part 1)

Hey friends! As promised, here’s the first post about how I set up this site. I’m using SvelteKit, TailwindCSS, DaisyUI, MDSveX, and plain old markdown files for the content of each post (even this one!). I’m also using Vercelfor hosting and GitHub for version control.

Before we start, I should give credit where it’s due and say that I got some help building this site by reading this post. If you’re looking to get into SvelteKit, I highly recommend checking out JoyOfCode. He also has a YouTube channel where he posts videos about SvelteKit that go with the posts on his site. This series of posts will basically be an abridged version of his, so if you want more details, check out his post I linked above. 🚀

Once I got setup with the markdown tools I needed, I needed a CSS framework. I’ve been working with TailwindCSS recently and I’m really enjoying it so that’s what we’re using here. Next thing was choosing a UI framework because I’m lazy and didn’t want to write all the components I needed from scratch, so I went with DaisyUI. It’s built on top of TailwindCSS and adds a bunch of components and utilities. I’m using it for the styling of this site, and I’m really happy with it so far.

Here are a few alternatives I’ve played around with:

• Pico.css
• Flowbite-Svelte
• Carbon Components Svelte
• Skeleton Svelte

---

I’m not going to go into great detail about how to set up SvelteKit, TailwindCSS, or DaisyUI because there are already plenty of resources out there for that.

So let’s get right to it!

Make sure you have Node.js installed before continuing.

Create a new SvelteKit project

npm create svelte@latest SvelteKitxMdsvex
# select Skeleton project and TypeScript (if you want to use JS, select JavaScript)
cd SvelteKitxMdsvex
npm install
npm run dev

This will run the skeleton SvelteKit app. You can see it running at localhost:5173. If you want to learn more about SvelteKit, check out the docs.

Install TailwindCSS and Tailwind Typography

We’re going to be using the PostCSS installation method:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Add tailwindcss and autoprefixer to your postcss.config.js file like so:

export default {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
	},
}

Add the paths to your template files in tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	theme: {
		extend: {},
	},
	plugins: [],
}

We’re also going to need some typography so our markdown gets rendered nicely in our posts. We can do that by installing Tailwind Typography:

npm install -D @tailwindcss/typography

Add it to your tailwind.config.js file as a plugin:

export default {
	//...
	plugins: [require("@tailwindcss/typography")],
}

This will allow us to use the prose class when we render our markdown files.

In src/app.css add the following (if you don’t have the file, go ahead and create it):

@tailwind base;
@tailwind components;
@tailwind utilities;

Import the app.css file, so you can make use of the utilities and components in your SvelteKit app. You can do this in src/routes/+layout.svelte like so:

<script lang='ts'>
	import '../app.css';
</script>

Sweet! Now we have TailwindCSS setup.

Install DaisyUI

This one is easy, we just run:

npm i -D daisyui

And then add daisyUI as a plugin to your tailwind.config.js file, so it looks like this:

export default {
	plugins: [require("@tailwindcss/typography"), require("daisyui")],
}

NB: Ensure that @tailwindcss/typography is before daisyui in the plugins array.

Install Mdsvex

Finally, let’s add Mdsvex to our project. Mdsvex is a markdown preprocessor for SvelteKit. It allows us to write markdown in our SvelteKit components and have it rendered as HTML. It also allows us to use Svelte components in our markdown files (I haven’t given that a spin yet, but it looks easy enough). Pretty cool!

npm i -D mdsvex

Add mdsvex as a preprocessor inside svelte.config.js. Update it to look like this:

import adapter from '@sveltejs/adapter-auto'
import { vitePreprocess } from '@sveltejs/kit/vite'

import { mdsvex } from 'mdsvex'

/** @type {import('mdsvex').MdsvexOptions} */
const mdsvexOptions = {
	extensions: ['.md'],
}

/** @type {import('@sveltejs/kit').Config} */
const config = {
	extensions: ['.svelte', '.md'],
	preprocess: [vitePreprocess(), mdsvex(mdsvexOptions)],
	kit: {
		adapter: adapter()
	}
}

export default config

Create header and footer components

You can implement this however you like, I’ll just show you a simplified version of mine:

src/components/Header.svelte

<div class='navbar bg-base-200'>
    <a href="/" class="btn btn-ghost normal-case text-xl">Home</a>
    <a href="/about" class="btn btn-ghost normal-case text-xl">About</a>
</div>

src/components/Footer.svelte

<footer class='footer footer-center p-10 bg-base-200'>
    <p>SvelteKit x Mdsvex &copy; {new Date().getFullYear()}</p>
</footer>

And then add them to your root layout file (src/routes/+layout.svelte) after the script tags:

<script lang='ts'>
    import '../app.css';
    import Header from "$lib/components/Header.svelte";
    import Footer from "$lib/components/Footer.svelte";
</script>

<div class='min-h-screen flex flex-col'>
    <div class='flex-grow'>
        <Header/>
        <main class='md:container md:mx-auto p-10'>
            <slot/>
        </main>
    </div>
    <Footer/>
</div> 

One last thing before we wrap up this post. We’re just going to create a route for the about link in our header so that it actually goes somewhere (and we don’t get a 404):

src/routes/about.svelte

<svelte:head>
    <title>Home</title>
</svelte:head>

<h1>About</h1>
<p>Some info about you</p>

---

Great! Now you’ve set up your own blog site using Svelte, TailwindCSS, DaisyUI, and Mdsvex. Let’s leave it here for now, and we’ll pick up in the next post where we’ll add some posts to our blog.

Thanks for reading! 🙏🏾