How I Made My Website

Frameworks and Tools

SvelteKit

This site is built on SvelteKit (^1.24.1). The main reasons I chose this framework are as follows:

• Adapters: SvelteKit adapters allow for easy integration with many different hosting platforms (including multiple forms of self-hosting) via adapters. This makes the site agnostic to hosting service, but still plug and play with existing solutions like Cloudflare Pages (the current hosting service as of writing)
• SSR and Prerendering: Many different frameworks support this, but SvelteKit has first class support for both SSR (export const ssr = true;), and pre-rendering (export const prerender = true;). These features allow the site to be compiled into pure HTML and CSS wherever possible, speeding up page delivery and reducing redundant computation
• Optional Hydration: SvelteKit makes it easy to completely disable the JavaScript runtime (export const csr = false;)

Tailwind

I chose to use tailwindcss (^3.3.3) for styling on this site, as the localized styling as well as robust documentation and ecosystem made it a breeze to use.

When setting up the articles portion of this site, I also added @tailwindcss/typography (^0.5.10) to get access to the .prose which provides the majority of the styling for the very page you are looking at.

MDSveX

Another key tool is mdsvex (^0.11.0), a tool for generating HTML from markdown files, but with the ability to embed not only HTML but also svelte components. The flexibility this grants ensured that anything I could do with a normal svelte file was possible using the markdown files used to layout these pages.

Remark and Rehype

Using MDSveX also opened up a huge ecosystem of remark and rehype plugins, which allow complex transformations of the AST at both the markdown stage and the HTML stage of the transformation. The plugins used include the following:

• remark-math and rehype-katex: This combination of plugins allows for beautiful and easy math equations embedded right in the markdown. This plays nicely with markdown editors like obsidian, making editing more ergonomic.
• rehype-toc: Along rehype-autolink-headings and rehype-slug, this plugin provides an elegant way of creating a table of contents for the site.

Code Highlighting

Code highlighting was a tough nut to crack, and is actually still one of the pain points of this site. For the first pass of this site I used @bitmachina/highlighter (1.0.0-alpha.7), a plugin designed for use with MDSveX, which made it easy to get functional. Sadly the project is not maintianed, and so I switched to an option which was more feature-full and actively maintained, rehype-pretty-code (^0.14.0). To get this working I created a custom implementation for MDSveX’s highlighter hook and reassembled markdown code blocks strings which were then passed to a standard unified parsing pipeline with rehype-pretty-code. This solution, while kind of hacky, provides as much functionality as possible without having to modify either MDSveX or rehype-pretty-code.

Cloudflare Pages

Currently, the site is hosted on Cloudflare using Cloudflare Pages. There are some nice advantages:

• Cloudflare pages support serverless functions, which pair nicely with +server.ts routes in SvelteKit
• Continuous deployment is free and plentiful (500 per month on the free plan) and updates are extremely fast
• Integration with SvelteKit is completely automatic using the pre-installed adapter-auto
• Setting up multiple domains was easy, and I was already using Cloudflare to manage the relevant DNS
• Active community

Examples

If you like to check out the source code for any of the following examples you can find it here.

Math

Inline Math

Let $f(x) = 1$. $\forall x,y \in \Bbb{Z}$, $x + y = \sum_{i = 1}^{x+y} \frac{f(i)}{\sin^2(i) +\cos ^{2}(i) }$.

Math Blocks

Code

Basic Block

<script lang="ts">
	let data;
</script>

Title and Highlighting

import projects from '$lib/projects';

Highlighting and Line numbers

async function getProjects() {
	return projects;
}
 
export async function GET() {
	const projects = await getProjects();
	return json(projects);
}

Tables