I found my web dev mojo! I rebuilt this blog.. and far too much detail about both.

About 12 months ago, I was (finally, after quite the wait) prescribed dexamphetamine for my ADHD. I often call it my ‘big bag of speed from the Government’. Most people laugh, and others give me disapproving looks.

It’s done three things for me.

Focus

The first is the one it’s actually for. I can sit and focus on one thing for a long time (it still has to interest me, or at least not make my ADHD brain switch off, but that is a much higher bar).

Previously, sustained focus only happened when something triggered my hyperfocus, and that became increasingly rare, especially after I developed Long Covid.

Now I can sit and actually learn the dry stuff: the nitty-gritty of web code, the rather esoteric advice on building websites that actually work, sell, and inform people, and the back-end stuff like hosting and DNS. Things that used to feel like nailing jelly to a tree, no matter how much I wanted to learn them.

Energy

The second is a side effect and potentially the more significant one. It counteracts the fatigue that’s part of my Long Covid.

When I first developed Long Covid, I often had about eight hours of useful consciousness a day, for about six months. That gradually improved to ten or twelve. But that’s as good as it got, for a couple of years. I’m back to my old eighteen-hour days now.

Mood

The third one is the hardest for me to work out. I haven’t had a proper depressive episode since I started them. But I don’t know whether that’s down to the dexys (I loathe that name, I really do, it’s just so difficult to say anything else) or not.

Perhaps I’m just happier with what I’m doing. Perhaps I’m so busy that I don’t have those long, empty hours when negative thought spirals can take hold. Or perhaps they just make me feel happier.

I’m not going to stop taking them just to find out.

The other thing I found

Along with the medication, I’ve found some tools that help me learn how to build the kind of sites I want. “What kind of website is that, Mr. theaardvark?” I hear you ask…  Easier to start with what it isn’t.

Not WordPress or Joomla. Their processes are so complicated that you can’t really start from scratch. You find a template that’s sort of what you want, and beat the bloody thing into shape. Then spend the site’s entire life keeping the CMS patched so nobody turns it into a crypto-spam pr*n bot farm.

Not one of the myriad of drag-and-drop online builders where you just add, move or alter an element/block/section/whatever-this-particular-system-calls-it and have absolutely no idea what’s going on in the code underneath.

And not a JavaScript framework like React, Vue or Next.js. That shit pulls a few hundred megabytes of dependencies onto your machine before you’ve even written a word, needs a “build step” (I’m still not sure what that is) to display a paragraph of text, and then sends a pile of JavaScript to the visitor’s browser so it can draw a page that could have been plain HTML in the first place. Brilliant if you’re building a web app.

Massive overkill for a blog about pickled onions.

Six months of CSS frameworks

I spent nearly six months playing with various simple CSS frameworks before settling on one that I was happy with. It was still not quite right.

So I learned Git, chose GitLab over GitHub, and figured out how to fork µCSS (itself a fork of Pico CSS). That way, I could make my changes while keeping a remote master copy with full version history, so if I break anything (which I absolutely did, and inevitably will continue to do), I can roll back to a working version. I’ve rather proudly (and rather vainly) christened it aardCSS.

Hugo, take four (or five)

Next I needed something to build the sites with. I had a few goes at Hugo (a static site generator), but they all failed; then I tried Eleventy and a few others and got nowhere with any of them.

Publii was where it finally clicked. It’s a static generator with a proper Windows programme that works like a WordPress- or Blogger-style CMS, and its simplicity (it does one job, and it did it as well as I needed) reignited my interest in web tinkering. Until very recently, it powered this blog, and it still powers wheelyhappydays.uk (until I get round to migrating that too). In the end, though, it wasn’t flexible enough for the sites I wanted to build, and I was still relying on someone else’s templates.

So I ended up back with Hugo. This time though, I understood a bit more about CLIs (command-line interfaces, the text-based terminals you use to tell programmes like Hugo what to do). Hugo hadn’t got any easier. I’d got slightly less useless.

My own starter kit

Most Hugo guides start off by telling you to pick a theme. Many of those themes come with their own build pipeline (Tailwind and a bunch of npm packages), which is the React problem again, just in a different guise. So I didn’t use one.

I went with a “starter kit”: a bare Hugo setup with aardCSS as the base, only the templates I actually need, and a written step-by-step for setting up a new site. Every site goes through the same shared pipeline in GitLab, on the same version of Hugo so I’m not having to relearn the basics for every project.

Each site then has its own little theme file on top of aardCSS. Ours is aard.theaardvark.css, which sets the “dusty rose” (apparently - it’s pale pastel pink if you ask me), the teal, the yellow, the fonts and the spacing. aardCSS does the heavy lifting, and I don’t have to re-fork the entire framework every time I want a different shade of blue.

It’s important to me that each site is as accessible as I can make it, and that includes light and dark theme options, so I try to build that into all of them from the outset. It informs the colour palette choices from the beginning. By default, it follows whatever your device is set to, and the menu has a button to switch if you disagree with your phone.

This was the first site I built that way. My first “client” (actually a “free build for portfolio ‘exposure’”) site was built from the same kit once the blog was going, which I think is a good sign I am headed in the right direction.

Getting it onto the internet

The blog also moved house (from FastComet to Krystal). I went with Krystal for its green credentials, UK-based servers, a separate cPanel for each site, and fantastic customer service that treats you like a customer, not a burden. It was also cheaper, which was a bonus.

The site’s code and content files live in a git repo that, as I found out, can also automatically build the site with Hugo and upload it to the hosting server. That took me a while to get my head around.

At first, I used FTP from GitLab to upload the whole site every time I added a page or changed a single word. Then I came across a guide on using rsync over SSH, which only uploads the files that have actually changed. Not being an idiot turns out to be a lot quicker.

I came across a lightweight form builder and submission script. The downside was that you had to go to the server and check for submissions yourself, which I would absolutely never remember to do. So I added a lightweight SMTP connection to email them to me instead.

Then there was a web-based content editor (far too simple to be called a CMS, to be honest) which just saves directly to the site’s GitLab repo. Saving a post causes the site to rebuild and upload, so there’s no need to go around editing the Markdown files or opening a terminal just to type git commit/git push to get something published.

The Carbon Badge

The old site had a Website Carbon badge (which gave you a pretty good indication of how much CO2 a page view would generate). Having chosen a host in part on its green credentials, I was keen to keep that.

The badge’s script had never really worked properly. I think Website Carbon’s API is no longer available for free in the way that the badge called it. So I moved it into the build. Once Hugo builds the site, GitLab runs an additional step that “weighs” each page and puts the figure in the badge before anything gets uploaded. A separate weekly job uses Website Carbon’s working API to refresh a table that converts page “weight” bands into carbon amounts based on the latest calculations. It makes eight API calls a week, rather than two every time the page loads.

It’s the bit I’m most chuffed with, mainly because I fixed it rather than deleting it and pretending I’d never wanted it. I spent far, far, far longer on it than it actually warranted. But it’s all the sweeter for it.

Why I’m Chuffed with it

It’s not done. Moving off Publii has broken a few things. The syndication links (which tell IndieWeb where else a post has been shared, i.e., Mastodon, Bluesky, etc.) were hard to recreate with any automation. But I managed that this evening. The social preview cards are also broken, so the links to the blog on social media looked as if they’d been sent by fax. Images still don’t display as I’d like, and I’ve lost the image galleries Publii’s plugins provided, so I haven’t rebuilt those yet. The old web addresses still all work, though. I’ve checked.

Even with that, I’m pretty happy with the outcome. It won’t stand still, though. I built it, so I know how to play with it. There’s no mysterious template to reverse engineer, very little JS to wrestle with and no fixed interface like Publii’s. I can pretty much do what I like with it.

And my non-fatigued brain (which has rediscovered just how much it loves learning new shit) wants to do that sooooooo much…

The main issue right now is that I’m moving on to the next concept so quickly that I’m not properly assimilating what I’ve just learned. When I come back to it later, I’m not always 100% sure what I did or how. So I’ve started writing comments on everything. (Hugo strips most of these out of the live site, so you’ll have to take my word for how extensive they are.)

I hope you like it. I really do. Mostly, I’m just happy that I like it.