The Technical Design of my Blog
How I redesigned my blog using Svelte, Sapper, and MDsveX
I wanted to build a blog platform that
used Svelte for the overall website design
would allow me to write in Markdown, and use intermixed Svelte for custom elements in blog posts
felt dynamic, but was actually purely static with no backend API.
Although I was not aware of it while building my site, my blog’s architecture is very similar to what Josh Comeau built with React/Next.js.
Basically I have a simple Svelte/Sapper website that uses MDsveX to convert markdown to Svelte components. The site is exported to static files using Sapper’s built-in export option.
To enable the “dynamic” features of the website (ex: the list of blog posts, tags, and the “Most Popular”) section, I’m (ab)using Sapper’s preload function. Since we know that API calls will be run on the “server”, it means that during a Sapper export any API Routes will have access to a normal NodeJS environment. For the posts/tags section I made an API route that parses the .svx files on disk to build a map of all my blog posts and their corresponding tags. For the “Most Popular” section, I make an API call to Google Analytics to see which pages were most visited over the last 90days. Since all of this data is fetched during a page’s preload(), it means that Sapper will be able to embed this data into pages during export time and will not need these APIs to work at runtime. This is what allows me to have these “dynamic” sections of the website without needing a real server to provide their data at run time.
I know the Sapper is being phased out, but I hit weird issues trying to use SvelteKit so I didn’t want to use it right now. I may migrate over to it once it is more stable.