Making This Blog With SvelteKit
In early 2025 I decided to move my blog from WordPress to a custom SvelteKit site deployed on my own VPS. This has been a great learning experience, so in case you’re interested I’ve taken some notes.
Svelte
I’ve been keen to try Svelte and SvelteKit for some time now. Svelte is a JavaScript UI framework which uses a compiler to create speedy interactive sites and components. SvelteKit turns Svelte components into a complete site, with a router, server side rendering, APIs, etc. You can think of Svelte as similar to React and SvelteKit as similar to NextJS if you are familiar with those.
SvelteKit supports “prerendering” which is the ability to build the site into static HTML, CSS and JS files - the actual blocks of the web. In fact, an entire site can be prerendered and simply served to visitors in that form. This is perfect for blogs and other static sites where every visitor should see the same content. It’s faster to serve and easier to cache by a CDN.
Markdown
WordPress is a complete package, in that it’s a CMS (content management system) plus it handles the UI with themes and plugins. SvelteKit is not a CMS. I need a way to house, edit and manage my posts, topics, and images.
There are plenty of CMS solutions and I could even use WordPress in a “headless” fashion via a GraphQL or REST API. Instead I decided to bundle my content and my UI code together in the one place - within my SvelteKit project - as markdown (.md) files.
Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages.
This might not seem like a great idea. There is a lot to be said for separation of UI and content. My content should not be impacted by my choice of UI to display that content. I should be able to switch front ends and keep my content the same.
For this blog I decided to use markdown within the same project for a few reasons.
It gives me flexibility to quickly/easily create more than static blog posts in the future, that make use of Svelte reactivity. For example tables, data graphs, toggles, buttons, etc, directly in a blog post.
I can use Git and GitHub to version control the UI and content which, for this specific project, is convenient for me.
I can use simple markdown files which are fairly portable to new platforms. (As compared to some CMS solutions.)
There are some negatives to consider, it’s not as easy to handle images and I don’t have a WSIWYG editor experience. But for this tiny blog which is only written by me, it’s ok.
mdsvex
SvelteKit does not natively support markdown files or the markdown syntax, but luckily there exists mdsvex which takes care of the markdown to HTML conversion. In fact it takes the markdown file and converts it into a Svelte page. This means that I can also use Svelte syntax to add custom components and interactive elements directly in a markdown file. That seems nice!
This does mean that, again, it’s a mix of content and code together in the one file - impacting portability if I want to move to some other new platform in the future. But that’s ok with me.
VPS
I decided to host this site with my own VPS. I chose a simple and fairly cheap VPS since I don’t expect a huge amount of traffic. I went down this path to learn more about hosting and how a server works. I also have a few other projects that can make use of my little VPS.
Other approaches to hosting a SvelteKit blog include Vercel, Cloudflare Pages, etc. These may have free tiers, and would simplify things, but I want to see what I can handle on my own first.
Coolify
One aspect that I didn’t want to manage myself (or at least not 100% of it) is the CI/CD (continuous integration/continuous delivery) part. Or in other words how can I quickly and easily make changes, such as a new blog post or a new page, and then test those changes, and then deploy those changes to the world. Vercel and others have built a platform that assists with this.
A self-hosted alternative is Coolify which can be run on a VPS (even the same one that hosts the blog) to manage deployments. It can integrate with GitHub to watch a repo, and deploy any changes.
This blog now exists as a (private) GitHub repo, and when I push changes my Coolify instance deploys them. Simple!
sveltekit-mdblog-static
I use GitHub as my remote origin for my project. The repo for this blog is private but I have recently made sveltekit-mdblog-static which is the same idea. It’s the basis of my blog and you can use it too if you would like! There are details in the README for configuration, posts, images, etc.