Blog Migration II : Getting Started with Sveltekit

While learning more about the frontend world, I came across a framework called Svelte, that I found this framework to be good fit for my blog app. I decided to use Svelte instead of Vue.

Why Svelte?

loved-vs-dreaded

Firstly, performance. Svelte compiles your code at build time and produces highly optimized vanilla javascript code. It is said to be 30% faster than other popular frameworks that uses virtual DOM like React or Vue.

Secondly, Svelte has gentle learning curve to other frameworks. Its syntax is simple and intuitive, and it comes with integrted build system called Svelte Compiler. I prefer languages and framworks that are straightforward and intuitive, as they naturally promote good coding practices and uniform styles, especially for large-scale projects involving multiple developers.

Lastly, Svelte is gaining popularity in the developer community. It was ranked second for the most love web frameworks by developers in 2022. Furthermore, with the release of SvelteKit at the end of last year, the Svelte community is rapidly expanding.

Getting Started with SvelteKit

repo

You can install and launch SvelteKit with the following commands.

$ npm create svelte@latest my-app
$ cd my-app
$ npm install
$ npm run dev -- --open

Dependencies

I used few modules for styling and parsing my blog posts written with markdown. Here is list of dependencies I added so far.

sass: superset of css
marked: markdown parser
highlight.js: syntax highlighter for code blocks
js-yaml: yaml parser

Designing Pages

Page layout

In SvelteKit, You can create a layout for all app pages in src/routes/+layout.svelte. You can specify where your child page components sit using the <slot> tag.

<main>
	<slot></slot>
</main>

I designed a navigation bar that sits at the top of all pages in the layout file.

nav-bar

Routing Pages

SvelteKit uses filesystem-based router. Each directory in the codebase will correspond to url paths that the user can access. Each directory will contain a page component file,+page.svelte, and optional scripts, +page.js or +page.ts`.

src
├── blog
│   ├── [slug]
│   │   ├── +page.svelte
│   │   └── +page.ts
│   ├── +page.svelte
│   └── +page.ts
├── +page.svelte
└── +page.ts

src/+page.svelte will be my blog's root routes or home page.
src/blog/+page.svelte will be the blog page that lists blog posts.
src/blog/[slug]/+page.svelte will load individual posts with a slug corresponding to each blog post