Recently I've started again my personal blog, having considered many possible platforms, at the end, I can't fight the feeling of giving the newer frontend framework, SvelteJS, a try so here comes the site.

In the series, Sveltekit Study Note, I will explain the process in which I have been going through building this website. And I would like to let you guys know that this is also my first experience of using a frontend framework to build an application, so I think it will be useful as a reference for people who want to build up something similar too.

Possible Platforms for building a personal blog

The first issue that I had encountered was how to choose between different ways and find out which one suits me more. The followings are some possible options:

1. Self-Hosted CMS (Content Management System)

Wordpress should be the most well-known Self-Hosted CMS, it's quite convenient, well documentation, and has lots of extensions. I would go for it if it didn't have that heavy weight or if I was a big fan of PHP.
Conclusion: It's so heavy that would have problems if I'd like to integrate many features into it. If I am able to put many customizations into it, which means I'd be good at PHP and WordPress family, I'd rather go for another solution.

2. Static Site Generator

A static site generator, like HUGO or Jekyll is pretty attractive to me at the first glance, lightweight, well documentation as well. However, it is a static website, which means it would be harder to integrate some functionalities like website statistics, internationalization, administrating panel, etc.
Conclusion: I would have full control of it but it'd be too hard to add many customizations to it.

3. Build up my own CMS with a frontend framework

Build a web application from scrach by React: NextJS, Vue: NuxtJS, or Svelte: SvelteKit. I'd have full control of the whole project, and easily integrate it with any backend technologies. The very only drawback would be the time consuming, but it would be funner too.
Conclusion: Because the purpose is to have fun, I gave the SvelteJS family a try.

The Blueprint of the Project

The plan was as following steps, this series will go for the details of each of them.

1. Check how SvelteJS and SvelteKit works

I spend a few days going through the official guide.
Basically, SvelteJS generates views from some input data, the view is composed of HTML, CSS, and Javascript, and the input data usually comes from a backend API endpoint, or user input.
And SvelteKit is a more comprehensive solution for building a WebApp, it integrates a client-side router, NodeJS backend service, and packaging tool to deploy the application.

2. Create the project and design the structure

To start a SvelteKit project (Assume you have NodeJS and Vscode installed):

# [REF] https://kit.svelte.dev/docs/introduction#getting-started
$ npm create svelte@latest my-app
Need to install the following packages:
  create-svelte@latest
Ok to proceed? (y) y

create-svelte version 2.0.0-next.158

Welcome to SvelteKit!

This is beta software; expect bugs and missing features.

Problems? Open an issue on https://github.com/sveltejs/kit/issues if none exists already.

✔ Which Svelte app template? › Skeleton project
✔ Add type checking with TypeScript? › No
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Playwright for browser testing? … No / Yes

Your project is ready!

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-adders

Next steps:
  1: cd my-app
  2: npm install (or pnpm install, etc)
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

$ code my-app/

You can see that I didn't use TypeScript, you will also see that I use only CSS with Bootstrap5, SQLite3, and the build-in NodeJS backend to make the project as simple as possible first.

SvelteKit skeleton project

And after adding the other modules the project would be like this: Project Blueprint

All the business logic of the application is under the src folder. Detailed structure of SvelteKit itself

3. Survey the necessary libraries and Implement the functionalities

After the design of the project, I saw that I would need the following implementations/libraries:

I will not go through every detail of choosing between the following implementations/libraries since it would be too many things to discuss at the first lecture, but you will see the details in the following articles of the series.

Database Related

API Authentication

Image Processing

Svelte Components

Frontend libraries

4. Build the project and deploy it to the cloud

I already have rented a DigitalOcean virtual machine for a while, so the plan would be:

  • Local PC: Package the project into a docker image
  • Local PC: Push the image to a private docker registry
  • DigitalOcean VPC: Pull the image and run it on a container
  • DigitalOcean VPC: Use Nginx virtual host to proxy the service
  • DigitalOcean VPC: Install the Letsencrypt SSL certification by acme.sh
  • CloudFlare: Set up the DNS to the DigitalOcean VM

Conclusion

This article gives you an overview of the entire implementation. Every part of the system has many topics inside, I hope this article can provide not only the steps of building a blog web application by SvelteKit, but also how we make every decision during the system design and implementation. Next chapter we will check out the implementation of the home page, which will include the basic structure of SvelteKit, markdown&html conversion, simple nodeJS API implementation, and basic SQL&schema design.

References