50 lines
3.3 KiB
TypeScript
50 lines
3.3 KiB
TypeScript
import type { ProjectMeta } from "../types.js";
|
|
const project: ProjectMeta = {
|
|
status: "draft",
|
|
title: "My Website",
|
|
ref: "/projects/my-site.html",
|
|
startedAt: "2025-01-20",
|
|
};
|
|
const content = <>
|
|
<p>
|
|
A decade ago I tried making my own website. I got a domain, wrote some code to generate my site, put some content on it and had big aspirations for what I would do with my very own place on the internet. Unfortunately that project lost steam more or less as soon as it started and was left abandoned gathering dust ever since.
|
|
</p>
|
|
<p>
|
|
This is my second attempt at making a website for myself. Inspired in large part when I surfed the small web and discovered personal pages like <a href="https://melvian.xyz/">Melvian's beautiful site</a>, the insanity that is <a href="https://melonland.net/">MelonLand</a>, and whole communities centred around small personal pages and projects like <a href="https://nekoweb.org/">Nekoweb</a>, and <a href="https://tildeverse.org/">tidleverse.org</a>.
|
|
</p>
|
|
<h2>Architecture</h2>
|
|
<p>
|
|
I've decided to use my website as a place to experiment with a hybrid architecture that sits in-between a static site generator and a fully dynamic site. Instead of having custom code generate the whole response on every request, my code instead generates the HTML and then writes it to a folder just like a static site generator would, but in response to requests from web clients.
|
|
</p>
|
|
<p>
|
|
This has some interesting advantages:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
HTML content is only generated when it's changed, rather than being redone on every request.
|
|
</li>
|
|
<li>
|
|
There's a high barrier against implementing features that would make every request return a different response, as that doesn't play nice with the system. This helps to make the site highly cacheable.
|
|
</li>
|
|
<li>
|
|
Caching works without me having to implement any special logic for it. The webserver detects when files are changed and handles correctly replying to clients with cached responses.
|
|
</li>
|
|
<li>
|
|
A complete archive of the site is always available as a bunch of HTML files in the root of the webserver's directory. This makes creating snapshots of the site trivial, just archive the directory!
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
Of course, this would only work for a site who's content changes only rarely. Which is precisely what I expect the vast majority of the content on my site to be: Content that once made is rarely revised.
|
|
</p>
|
|
<h2>Frameworks on a diet</h2>
|
|
<p>
|
|
I thought about options for languages and frameworks to build my site on and eventually settled on using TypeScript with JSX running on Node.js to generate static pages. I wanted my site to be as close to working with plain HTML as practical, while still being easy to compose and reuse different parts together.
|
|
</p>
|
|
<p>
|
|
I opted to use JSX because I don't want to gouge my eyes out writing HTML with pure JavaScript notation (something I incidentally have tried to do before). To represent the HTML as data I wrote <a href="https://github.com/Hornwitser/antihtml">antihtml</a>, a tiny library that only does one thing: Treat HTML as a data structure that can be serialised.
|
|
</p>
|
|
<p>
|
|
What that means is that I write my content mostly as if it was plain HTML, but get to combine the parts that make up my site using JavaScript logic.
|
|
</p>
|
|
</>
|
|
export default { ...project, content };
|