Building this Site: Part 1: 𓄿

Table of contents

I didn’t want to make a personal site for a while. And then I was like “maybe I want a job” and one thing led to another, and here we are. As of this writing, this site is very much a work in progress. Consider it sort of an 𓄿 stage right now. In fact, as I’m writing this, the site is not even live. Jumping the gun a little? maybe. But that’s the way I’m doing things, I guess.

Content management

Sanity

I started this project while still working on the Deru’s Book of Made-Up Facts, a blog for random and ridiculous things my family and I come up with. I used Sanity as a CMS for that, and originally I was planning to use Sanity for this as well.

Markdown/mdsvex

However, I switched to Markdown with Svelte with mdsvex for a few reasons:

• More portable (Sort of)
• More keyboard-centric writing experience
• Ability to embed Svelte components in pages

The first point, Markdown being more portable, is debatable. Maybe I should say it’s more portable specifically to other sites that use markdown, like Dev.to.

Second, if you’ve ever used Sanity, it’s mostly a traditional word processor, with a lot of clicking for formatting text. With markdown, you can just type.

The styles might be more limited with pure markdown (compared to Sanity), but with mdsvex, I can include Svelte components to do stuff like this or this type of thing, which I think brings the flexibility at least in line with Sanity.

I’m actually still using Sanity for the timeline, because I already set that up exactly the way I want it and I don’t see the need to change it.

I wouldn’t necessarily recommend this stack for other people, especially if you have multiple editors that aren’t as tech oriented. This article about how markdown is limiting is pretty good. Personally, I find it very annoying that article/writing changes show up in my git history and the blog post files get in the way of the site files (like endpoints, fallback pages, etc.) However, I can do this:

With just inline Svelte. Of course, this is possible in Sanity as well, but I would have to make the Svelte component, include it in the Sanity schema, and also interpret it in some way to render the correct component. Much more friction, which is fine if you just do normal writing with words and don’t have a bunch of one-off custom components.

Plugins

Additionally, mdsvex supports remark and rehype plugins. There are a ton of these, and it makes it very easy to do stuff like automatically generate a table of contents or add links to headers. In fact, I wrote my own rehype plugin to generate a table of contents. I wanted to combine the features of the remark-toc and rehype-toc plugins (namely, inserting under the table of contents header and wrapping in a nav element).

Writing

As for editing, I’m currently writing this in VSCode with the Spell Right extension. I also draft stuff in Obsidian, which has a live preview mode that’s much nicer to look at than the raw markdown. I actually themed Obsidian to look very similar to this site so I can see what things will look like as I write them.