DEV Community

loading...

Converted my blog to SvelteKit!

David Parker
Tutorials: https://www.programmingtil.com/ YouTube Tutorials and More: https://www.youtube.com/user/iamdavidwparker Personal Blog: https://www.davidwparker.com/
Originally published at davidwparker.com ・3 min read

I converted my personal blog: https://www.davidwparker.com/ to SvelteKit!

It's fantastic, and offers so much more than basic blog places.

That said, I'll be cross posting when it makes sense. See below for my original post, but note that it won't have all of the "interact-ability" that SvelteKit + mdsvex provides, as I'm able to drop in real components into the middle of the post.

Original Post here:

Ok, so it's just another blog conversion. But I'm glad I finally got around to working on it.

So what changed? Well, this blog is now running on SvelteKit. It used to run on Jekyll. I've also ran a different blog on Hugo. I think each has their advantages, but this is my 5th different Svelte site / application (see ProgrammingTIL (SvelteKit), ListenAddict (Sapper), Code Name Parker (SvelteKit), and Producer (SvelteKit, but just a shell right now)), and I honestly just enjoy Svelte so much more than anything else.

The nice thing about converting this blog to SvelteKit is the ability to use msdvex, which allows me to use svelte components directly in my blog. So I'm hoping to build out cooler, more interactive things in the future.

Behold, My Stuff!

So I can use any of my components in my blog posts, whenever I want. For example, if I wanted to drop my <SubscribeForm /> in the middle of this blog, I can:

SEE ORIGINAL POST for interactions

And then I can just keep writing. Of course, this assumes I keep writing 😱.

So how does it work, exactly? Well, I'm not an mdsvex expert, but the basics are this. In my markdown file, I'm able to import whatever code I'd like:

<script>import SubscribeForm from '$lib/app/forms/SubscribeForm.svelte';</script>
Enter fullscreen mode Exit fullscreen mode

Then later, when I want to use that component, I can:

<SubscribeForm />
Enter fullscreen mode Exit fullscreen mode

Or if I want to have my Dark mode toggle, I can do that too:

SEE ORIGINAL POST for interactions

Of course, not everything will be beautiful, unless you take the time to design it to work in every place possible; right now, I'm thinking the <ThemeToggle>, while nice, looks a little silly on hover when it's in the middle of the blog due to its full width, but it works just fine in the header... but I'm not going to change it just for this section!

Anywho, the plan for this blog is to be long-form essays, and maybe some mid-range technical ones as well. I'm not entirely sure. I've also signed up for dev.to, but haven't posted anything yet. The idea being I'll likely cross post between the two, but due to my ability to use Svelte here, I'll most likely keep the longer and more interactive essays and blog posts here.

Until next time!

Special thanks

Thanks to @c-bandy and @mikenikles for sharing their Github Repos for how they implemented their SvelteKit blog in Markdown: c-bandy repo @mikenikles repo

Don't forget to turn on the flashlight (dark mode only):

SEE ORIGINAL POST for interactions

Discussion (0)