sophie/website
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

new blog post

Browse source
This commit is contained in:
Soph :3 2024-07-24 01:30:14 +03:00
parent 3f42e1c9b4
commit 10572c4c26
Signed by: sophie
GPG key ID: EDA5D222A0C270F2
1 changed files with 24 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
website/blogs/build-system.md Normal file
View file

@ -0,0 +1,24 @@
title = Is it that hard to write a build system for a site?
time = 1721772261
========================
The answer may shock you.
## actually, what do you mean by a build system?
By a build system I mean in the Maven or Gradle (from Java) sense. You can add custom plugins, which add new functionallity, inject new code and more.
For [my project](https://sad.ovh), I wanted to have a system where I could flawlessly build .TS files, make custom metadata for my blogs, and do whatever else my mind wants to.
## okay cool, interesting, but why?
Honestly? I have no clue. I was looking at Esbuild, realised it doesn't have the features that I want (and the ones that it did have, I would've been forced to use through CLI). I also looked at webpack, realised it's way too slow and bulky have you ever even SEEN webpack's code? It's <rant snipped>). So, I thought that I have no other option than to roll my own. It was not as hard as I thought, as I had already planned most of this previously.
## nice, what does it do?
Currently, [it has 5 plugins](https://git.sad.ovh/sophie/website/src/branch/main/src/plugins). One for development environments, which automatically updates all open tabs on file change, and rebuilds. And then I have two markdown related plugins. One of these compiles .md files into .html files, and the second one compiles .md files into .json. It uses a hugo-esque format for getting the metadata for my blogs. I also added variables. These are defined in the variables.ts plugin, and I currently have `__STICKERS__` for the stickers on the side, and `__BLOG_POSTS__` for the blog posts. There is also a TS/JSX/TSX compiler.
## woah does the TSX work out of the box?
Partly. This is one of the biggest choke points I had with the whole build system. The actual site generation happens entierly in the client, so I had to find a entierly client JSX library.
TIL that there's two sides of JSX, one for bundling it and parsing it, and one for actually turning the parsed data into HTML.
With enough searching, [I did find a client JSX library](https://nanojsx.io) that worked perfectly for my usecase.
It was absolutely horrible implementing it, because I had to strangle esbuild's bundler to work properly.
## conclusions
Suprisingly, rolling your own build system for your website isn't a bad idea after all! Obviously, it's more code that you have to maintain, and that's not always good. But while writing a redesign for my website, it worked pretty well and I didn't run into any major issues with the build system. This project really wasn't the hardest thing to do, and I'm a person who's never ever looked at a single bundler's or anything's sourcecode.