Context

I am bad at web development and have been dabbling with React recently (mainly NextJS) but I want to try something new. Svelte 5 just came out and so I figure, why not try to learn Svelte and SvelteKit? Why Svelte? No real reasoning outside of it looked fun when I skimmed the syntax.

How I Started

I have a decent background with basic web development concepts (thanks young me for making Dragonball Z websites) so I jumped right into the Svelte Tutorial. This is probably the most direct tutorial I’ve ever seen from a framework. I also appreciate that they maintain their own Playground which I’ve found is usually third-party or doesn’t exist at all for other frameworks/languages.

After completing the tutorial, I felt like I knew just enough to attempt to start building something. After mulling it over, I decided to just make this blog. I’ve tried blogging in the past but I never really kept up with it. I’ve also used various CMSes (how do you even say CMS, plural?) (e.g. Ghost, Hugo, etc) but it just didn’t keep my interest long enough. But it’s going to be different this time, right?

Creating the Project

It seems like the two most common ways people use Svelte is with SvelteKit or Astro. I ended up picking SvelteKit to try to stay within what Svelte already offers. Following the documentation, I ran the following:

$ npx sv create svelte-blog # This walks you through bootstrapping the project (I choose bun)
$ cd svelte-blog/
$ bun install # Ensure all packages are installed
$ bun run dev --open # This starts the hot reload development session

And with that, I had something running!

Now What?

I had something running, but now what? I ended up stumbling upon a couple of great blog posts by other people that were incredible to follow:

• Jimmy McBride’s “Build The Perfect Tech Blog With SvelteKit”
• Joy of Code’s “Build a SvelteKit Markdown Blog”

When following these blogs, I tried to ensure that I was using the syntax corresponding to Svelte 5 since there looks to have been quite a few changes between previous versions of Svelte and Version 5.

After a bunch of mixing of legacy syntax and current syntax, I managed to get what running, what you see now.

Deploying My New Blog

This part was pretty straightforward. I wanted to deploy my blog somewhere that was low effort (that also didn’t have recent controversy) and ended up picking Netlify. This was a pretty easy choice since Svelte already supports Netlify out-of-the-box! At a high-level, the steps I followed were:

1. Create a Netlify account
2. Update my code following the Svelte documentation to utilize the @sveltejs/adapter-netlify package
3. Push my code to GitHub
4. Grant Netlify access to the GitHub repository I created
5. Deploy!

Each step took a pretty trivial amount of time which is great! There was some additional steps since I had my domain name registered with a different domain name provider so Netlify couldn’t automatically do everything for me. But it was close enough.

What’s Next?

There’s still a lot to do with this blog. Just getting it running isn’t enough for me. I’m sure I’m still doing things weird and the way I’ve written some components probably isn’t very optimized (or even fundamentally correct) in terms of how I fetch and load data and where (client vs. server) that code runs.

Also, there’s a lot of style improvements to be made to ensure this blog is somewhat responsive. But before I even delve into that, I need to also make sure my margins/padding between pages are at least consistent lol.

In the meantime, please don’t destroy my blog while I figure things out still.

edit: I also just realized I’m missing basic information like a contact method and such so I should probably get to that too