wubba lubba web dev
In the spirit of Blaugust (and an attempt to get back into blogging regularly) I am here to do the bare minimum: make a post!
Woo! I did it! Go me!
It's not that I've been uninterested in blogging, I've just been...more interested (see: hyperfixated; see further: unhealthily obsessed) in other pursuits—namely, web development.
I've been building my personal website since April. A few weeks ago I hit a wall, though. Unsure of what to build next, I decided I'd work on some other website ideas I had, starting with my online collective for trans men at transmen.online.
It's been a blast! I wanted to keep the UI retro and minimalist. Somehow, this ended up becoming more complicated than my personal site.
My personal site is just a hodgepodge assortment of random crap and schlocky HTML/CSS. My trans website has a veneer of professionalism and legitimacy that drives me to be more organized. I even wrote the HTML exhaustively *:・゚✧*:・゚✧ semantic! ✧・゚: *✧・゚:*
I knew that I wanted the layout to be uniform across every page. You might then assume that I decided to use an SSG—and you'd be correct. But I didn't do that at first. I was scared of SSGs, and they intimidated me. I've fucked around in the terminal a fair few times now as a middling-to-intermediate Linux user—but actually using a terminal program to maintain and build a coding project? That seemed beyond me.
So, I decided to do something really simple and smart instead: use the terminal copy the same HTML file over and over again with different file names! It was very efficient and definitely not a waste of time or energy.1
After awhile I realized this was untenable. The more pages I made the more annoying it all became. I was also really limited in my design choices; I wanted to keep the layout the same, right? So I just made all the navigation links point to an <iframe>
in the middle of the page, which meant I only really had to built one index page. Everything else was just plain HTML.
Sounds easy, because it is. But it's not flexible. And the UI experience sucked ass. You had to scroll down the page to get to the bottom of the iframe. Then you had to scroll within the iframe to get to the bottom of the content. Just a mess. It pissed me off enough times that I finally decided to learn an SSG.
I chose Astro because my buddy JB2 in the Nekoweb Discord server recommended it. I gave it a spin and it gave me a fucking migraine, lol. I sorta got the gist and used it to build some HTML text templates but left it at that. I basically wrote content pages in Astro, then copied the files into my main site directory, and then uploaded that to my server through FTP.
The more I looked into Astro, though, the more enticing the idea became. Basically with Astro you can build layouts and components in their own separate HTML/CSS files. So your actual content just becomes a very lean document wrapped in different tags, which import code from their respective standalone files. It was a bit of a learning curve, but if you're determined enough (and mildly autistic) you can figure it out. I mean, if you're geeky enough to learn how to hand-code HTML/CSS or start your own blog, you can probably figure out an SSG.
For example, my new content pages look like this:
The <Base>
and <Page>
tags wrap around the HTML content, imported from the file paths in the front matter. The files themselves are just made of more HTML, which is then styled by imported CSS files. Everything is compartmentalized and isolated, then packaged recursively. Think of it like nesting dolls.
This makes making webpages a lot easier. All I have to do is add some tags and then carry on with the actual content. It's so streamlined, I even started building a mirror directory of the entire site that is mobile-friendly.
So, yeah. I faced my fears and learned how to use a SSG.
I really like Astro. It took me a few tries to get the hang of it, and I forced poor JB to field a lot of noob questions, but with his help and some perseverance, I managed to figure it out! Once I've got transmen.online mostly set up, I'm gonna tackle migrating my personal site into Astro next.
To use Astro, you have to download Node.js, which is a Javascript runtime and package manager. What does that mean? I wish I knew. But as far as I can tell, it basically puts Astro into motion.
JB uses bun, and so do a lot of other people. I looked into it because the name is cute and the commands are shorter. For example, to run Astro's dev mode you have to enter the command: npm run dev
; with bun it's just bun dev
. For the build command, npm is npm run astro build
; bun is bun astro build
. Wow! That'll shave off about five microseconds. Talk about performance!
All jokes aside, there are some actual performance improvements. I thought it might be overhyped but I was blown away once I tried bun out. The build time for Astro is so quick, it's crazy.
I guess I should clarify what Astro's build command does. Basically, it takes all the files you have, parses their format, imports all the code you reference with tags, creates fat HTML files with embedded CSS, and minifies3 them into giant blocks of unintelligible code, and then repackages them into a tidy little distribution folder you can push on Github or copy and paste to your server and upload as-is. And there's your website.
Here's what the real About page on transmen.online (AKA, the file that is actually rendered in your browser) looks like under the hood:
Isn't that crazy?
There are more SSGs other than Astro. After one of my many rage-quits, I downloaded 11ty and checked it out, but I honestly didn't like it personally. Astro is just so neat and tidy, and I find it to be pretty intuitive once you understand its basic functions.
Before I forget, this whole thing made me learn a lot more about Sublime Text, too. I downloaded some cool add-ons and also updated my config file. The coolest thing is this add-on called Terminus, a built-in terminal. Here's my latest setup:
I never thought I'd get so into web development, but here I am. I've literally been coding non-stop for weeks lol. Hell, I'm staying up until 2:00 or 3:00 AM most nights, retinas melting out of my eye sockets, hunched over my desk and telling myself "Just one more fix, just one more line of code, just one more commit!"
I haven't stayed up late like this since I was 19—and at least back then I exploited performance-enhancing drugs like pot and cigarettes. All I've got at my disposal now is pure obsession and decaf coffee. I'm nearly thirty for fuck's sake—my back is NOT happy! Also, I had to magnify the text on my terminal by like 4 sizes so I wouldn't have to crane my neck and squint as much.
I don't really know how to end this post. I guess if you're thinking about making a website, DO IT! But please note that I will not be liable for any resultant consequences that may occur as it takes over your entire life.
Here's some cool sites to check out, while I've got your attention. This isn't a list of "favorites" or anything (so worry not, Nekoweb friends who might be reading this!), but just some sites I've found recently. For more sites, you can check out my Links page on my site.
- https://kimberlygb.nekoweb.org/
- https://ichohneschnauzbart.nekoweb.org/
- https://bewsite.nekoweb.org/
- https://techperson389.nekoweb.org/
- https://dreamscape.place/
- https://32enoki.net/
✘ Posted on — 08/08/25
✘ Last modified — 2 weeks ago
✘ Link — https://blog.xavierhm.com/wubba-lubba-web-dev
Footnotes
For all my autistic kings and otherwise subtext-challenged friends out there, I am being SARCASTIC. Don't do this. It's STUPID and DUMB!↩
"Mini-fying" basically deletes all the deadspace in HTML files. Line breaks, indentations, spaces, etc. This makes the file size smaller and the client-side rendering quicker!↩