Rewrite my website in simple HTML and CSS

January 15, 2025

This week, I decided to rewrite my website using simple HTML and CSS. When I originally made itI use SvelteKit for simplicity. This was a more interesting project than I expected when I started working on it so I wanted to share my thoughts on the experience.

Why?

There are several reasons I decided to do the rewrite. One is that I don’t have a job right now so I have a lot of free time for side projects. Another one is that, as you can see, this website is pretty simple so I didn’t get much out of using SvelteKit. I also want to move the site to Cloudflare Pages so this is a good time to make some changes.

However, the main reason I decided to make some changes was that I found Javascript bundler and ecosystem building unbelievable
aggravate use. For example, one of the things I set my old website to do was build a blog section from a set of Markdown posts. I think it is easy to do. SvelteKit and Vite allow you to prerender your website and I have a set of files at build time – I need to add some logic to convert them. However, it was very difficult to find a way to just get a handle on a bunch of files in my tree at build time (let me caveat that I’m not a frontend dev and I might have forgotten one something obvious). It took me hours of Googling and trying different options to make this awesome piece of code work to load the contents of a file and render it on my page:

import type { PageLoad } from "./$types";

export const load: PageLoad = async ({ params }) => {
  const file = await import(
    `../../../../lib/assets/posts/${params.slug}.md`
  );

  return { content: file.default, ...file.metadata };
};

I’m tired of dealing with things like this for the small amount I get from using SvelteKit. And so, I finally decided it was time for a rewrite.

How?

I think spending a lot of time on Hacker News gave me the wrong impression that writing a website using simple HTML and CSS will be a relatively paved path in 2025. I spent some time looking for guides or a “canonical” way of doing it and knowing that there really isn’t one. Because of that, I decided to just start from scratch in an empty directory and go from there. My website is so small that I have recreated many pages as static HTML.

However, I prefer writing blog posts in Markdown. It’s easier to write than HTML, I can pull the posts from my existing Obsidian vault, and I find it easier. So, I need some kind of script to convert my Markdown blog posts into HTML content. I checked some options for this and found Pandoc. Pandoc is a universal document converter for converting markup formats. It provides a library and a CLI for converting documents from Markdown to HTML (along with many other formats).

To write the script, I wanted something as lightweight as possible but easy to use rather than a Bash script. This brought me to Python and uv. I find that uv basically abstracts the Python environment in a way that is very convenient for a small project like this. Using Python also gives me a free way to serve my website with http.server modules. Finally, I wrote a small Makefile so that I don’t have to remember the command to serve.

result

the result not the MANY revolutionary because my website was simple at first. But the size of my “compiled” website assets went from ~356kb to ~88kb. My project tree has become simpler and the only Javascript on the site now is code highlighting. I’m also happier with the way things are. I feel like I understand how and why my site works (where before I understood parts but not the whole mystery).

Previously, with SvelteKit	After all, with plain HTML

Next Steps

There are two failures that I have found so far. I want to investigate ways to fix or improve it.

• More copying of code. SvelteKit has a component system so I can create my navigation bar as a component and reuse it. When I removed it, I had to duplicate that code in a few places. Fortunately the cost was minimal as I only had four HTML pages. I know there are some ways to do this with web components. This is something I intend to look into as one of my next side projects.
• No live reloading. I had to kill the website to build it now. I’m sure there’s a tool I can find to fix this, or maybe just use something like FastAPI with automatic reloading. But until I do something about it, there will be a little extra cost every time I change.

Also, I think this repository is now a reasonably good template for someone who wants to create a simple website with a few blog posts in Markdown without using a generator. I was surprised when I started this project how hard it was to find guidance on how to write your site without a framework. Hope this helps other people.