Making of: This Website | HypnoticOcelot
Theme Settings Aa Making of: This Website<br>By HypnoticOcelot , posted 2026/08/07 at 08:27 PM UTC, last updated 2026/08/12 at 12:53 PM UTC<br>It was around April 2022 that I'd made my original website, and if you can't tell, I knew very little about programming back then! Fortunately, I like to think I know a little more now, and after being inspired by elle(who has a really nifty site, consider checking it out), I decided I'd start from scratch on a brand new site, one with a little more substance. I had two goals in mind for this new-and-improved site: I wanted to add a blog with an RSS feed, and I wanted a comment section for each blog post.<br>Picking a framework<br>The first decision I had to make was how I was going to create the website. Plain HTML/CSS/JS is great, but I'm a sucker for tools that allow you to generate things like layouts dynamically. I also wanted the website to be (at least almost) entirely functional without client-side JavaScript, so a framework that supports server-side rendering is important. After some cursory searching online, I first decided I'd give Django a shot, since I've used Python a fair bit in the past for personal projects.<br>It wasn't for me! I'm sure if I gave it more of a chance, I could've gotten the hang of it, but I ultimately decided I'd switch gears and use Svelte instead. Technically, I'm actually using SvelteKit: Svelte lets you create interface components for websites, whereas SvelteKit has additional functionalities like handling page rendering. There were a couple reasons for choosing this over Django: First, the Svelte documentation is incredibly well-done; It's organized nicely, and they have plenty of tutorials that really help you internalize how parts of Svelte work in practice. The other(maybe less consequential) reason is that DailyTxT, an application I use every day, uses Svelte for its frontend!<br>Creating the development environment<br>Since I'd recently started using NixOS for my computer, I wanted to do things the "Nix way", which meant creating a development environment for my website using the Nix programming language. I'd done it before for some other projects, but this was a bit different, because I also wanted to have it accessible as a Nix package. I took some inspiration from Marius Niveri's flake.nix in order to create my own Nix flake for this project. I used Bun to set up the environment and handle package management, and I also set up bun2nix to convert bun.lock files into a Nix equivalent, bun.nix.<br>I figured out that I could set up my project with bunx sv create my-app, and I was greeted with a whole lot of files that I had no clue how to use! I ended up creating a list of the purpose of each file(even the ones I already knew the purpose of), just so I could keep my head straight:<br>.gitignore - List of files/folders that shouldn't be published to Git<br>.npmrc - Config file for NPM, see https://docs.npmjs.com/cli/configuring-npm/npmrc<br>bun.lock - Locks installed Bun packages to the specified versions<br>bun.nix - Generated by bun2nix, makes it possible to build the project as a Nix package<br>flake.lock - Locks installed NixOS packages to the specified version<br>flake.nix - Sets up the development environment, generates the Nix package(s) for the project<br>package.json - Used by flake.nix to determine package and script information<br>tsconfig.json - Helps IDEs determine how to treat different files in the project(for purposes like autocomplete)<br>svelte.config.js - Configuration for Svelte and SvelteKit<br>vite.config.js - Configuration for Vite, which Svelte uses under the hood<br>.env - Node.js environment variables, see https://nodejs.org/api/cli.html#environment-variables-1<br>Due to some of the recent controversy involving Bun and its Anthropic acquisition, I later decided to switch to using Node.js instead, which is actually better-supported by the NixOS ecosystem anyways. That saw the removal of bun2nix and bun.nix, and the replacement of bun.lock with package-lock.json(though they're functionally the same).<br>During setup, I was prompted to use either TypeScript or JavaScript, which was a hard decision; I liked the idea of being able to specify types with TypeScript, but I'd never really used it before. I started out with JavaScript, and I still use it for some of the inline scripts, but tried out TypeScript for a lot of the server-side scripts, which was fun! I don't know that it's so necessary to verify types when I'm the only one sending input to the scripts, but I figure it's a good learning experience either way.<br>Acquainting myself<br>I then got to the actual site-making! I followed a lot of the examples in the Svelte documentation as I played around with this new framework, but eventually I turned my attention to one problem in particular: meta tags. Before I get into that, let me explain SvelteKit's "layouts" feature. See, SvelteKit lets you specify a "root layout", which is a set of scripts and HTML that every other page...