diff --git a/website/blogs/build-system.md b/website/blogs/build-system.md new file mode 100644 index 0000000..9fb89ab --- /dev/null +++ b/website/blogs/build-system.md @@ -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 ). 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. \ No newline at end of file