Making a Blog (Finally)
Note: This article was last updated on 7/1/2024
Hello everyone, and welcome to my new blog! 😊 It’s been a while, but I finally got around to making one after several years. I’ve got a bunch of stuff to talk about here, so look forward to plenty of articles about wonderful and weird things.
The Tech
The current design is built with SvelteKit and MDsveX, which means I can write articles as markdown files without having to worry about parsing and whatnot. It’s a pretty great system and there are plenty of articles floating around about how to implement it yourself.
Features
MDsveX comes with a bunch of cool features out of the box, such as markdown formatting, syntax highlighting, extensive customization and even support for inlined svelte components. Check out this clean code block made using shiki:
function greet(name = 'World') {
console.log(`Hello ${name}`)
}But the really cool part of MDsveX is that you can import custom svelte components directly in your markdown. Give this button a press:
I can put literally anything in my markdown with svelte components! And, this is using the latest and greatest reactivity features from Svelte 5. Isn’t that crazy cool?? This is all the code it takes to have your own button component (aside from styles and, yknow, having a working MDsveX setup):
<!-- I stole this from Svelte's tutorial lol -->
<script>
let count = $state(0)
</script>
<button on:click={() => count++}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>There’s probably dozens of other features I haven’t even gotten to yet, but as of right now code blocks and basic rich text formatting are all I need.
Resources
Want to make an epic blog just like this? Check out these resources for more information about different parts of the setup. I don’t have an article going in depth on my design yet, but maybe I’ll make one in the future.
Old links - no longer used by this blog