Day 03: Trying Svelte and Breaking the Blog (almost 😅)

#webdev #programming #webdevblog

Hey devs! 👋

Today was all about Svelte, components, and my first real attempt at client-side routing — and wow, things got tricky fast!

🧠 Goal for Today

Integrate Svelte into my existing blog structure.
Break repetitive HTML into modular components like Navbar.svelte, Post.svelte.
Try using svelte-spa-router for page routing.

I used bun create vite svelteapp --template svelte to set things up.

Moved my old index.html, about.html, and posts.html into the public/ folder — Svelte was rendering fine.

Created components, and even App.svelte was showing up nicely.

But then…

Routing broke everything. ☠️

I added svelte-spa-router using:

bun add svelte-spa-router

…but couldn’t get the components to load on navigation. I think it has to do with the URL hash (#) not being detected. Still debugging this.

Svelte is super clean. Definitely loving the syntax and reactivity.
I’m using bunx live-server to serve files. It installs into ~/.bun/install/cache/ — a good thing to clean up later!
Learned to separate components properly, though I still need to figure out how to handle per-post pages (day01.html, etc.).
Vite + Bun combo is fast and neat!