I’ve chosen to use SvelteKit 1.0 since it was just released the other day and I’ve gradually become more and more interested in it. Svelte was ranked very highly in satisfaction in the 2022 JamStack Survey which led me to create my first basic website with it. Although I have lots of experience with Next.js and React, I would still like to try other web frameworks.

When thinking about what I want from this website, I want to be able to write a blog post quickly without having to deal with an external CMS. I have seen some projects using MDX to create blog posts with .md files and thought that would be super convenient which it turns out to be so far!

I found an article by Josh Collinsworth where he goes into great detail about how to set up a SvelteKit and MDsveX blog. MDsveX is the Svelte version of MDX which is commonly used with React.

Since I’ll mostly be writing about code, I was happy to see that MDsveX uses the Prism.js library for code syntax highlighting. You provide your own styling and Prism provide a bunch of premade themes which you can browse on their GitHub.

Routing

There were two options on how to set up the file system that Josh went through but the dynamic routing option seemed best:

📂 src
┗ 📂 routes
  ┗ 📂 blog
    ┣ 📜 +page.svelte
    ┣ 📜 1.md
    ┣ 📜 2.md
    ┗ 📂 [slug]

I’m using sass alongside MDsveX. You can install everything I’m using:

npm i -D svelte-preprocess sass mdsvex

An aside if you didn’t know - the -D flag here is short for --save-dev. This means that these dependencies are saved under the devDependencies object in package.json. They won’t be build when you run a production built, therefore cutting down on build time. This only really matters if you are creating a package for other people to use.

To use our new packages, modify the Svelte config file to look like this:

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import sveltePreprocess from 'svelte-preprocess'
import { mdsvex } from 'mdsvex'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  },

  preprocess: [
    sveltePreprocess(),
    mdsvex({
      extensions: ['.md']
    })
  ],

  extensions: ['.md', '.svelte']
};

export default config;

I’m not going to go through the whole process of setting up the site here, Josh did a great job of that and he’s a massive SvelteKit advocate who really knows his stuff.

My plan going forward is to create a post about side projects that I think are interesting enough to show to people. It’s also a great way for me to fully understand my solutions and take account of my design decisions.