The Making of the Nerd Cave

First a little backstory

In truth, it had been a while since I wanted to make a blog, some place to give my 2 cents in a longer form than what I could do on something like the microblogging side of fedi, maybe some other fun stuff like the quotebook. Infact I tried setting up blogs before, but most attempts went nowhere.

Self hosting?

Hosting something yourself is probably ideal for a lot of people, it gives you the most control, no need to tip toe around someone else’s arbitrary rules, and you can make the blog look and function however you want it to. So what’s the issue? Self hosting requires a pretty good internet connection, connections that are simply not available in my area.

Time for something else.

What about blogging websites?

There are a number of websites dedicated to offering free blogs for everyone interested. Vivaldi.net blogs and Medium are two I was aware of and tried, but I ended up sticking with neither. In truth, they may be decent options for others, but for me both just forced me to make everything far fancier than I wanted it. Vivaldi offers straight up WordPress with all its good, bad, and ugly. Medium offers something that as far as I can tell is their own thing, but that comes with the same stuff I didn’t like about WordPress. So, the blog didn’t really happen with either.

Neocities?

Truth be told, the blog kinda left my mind for a while, I had to focus on other things, so the blog went on the back burner. But at one point I randomly brought up the idea in a Fedi post and a friend reminded me Neocities is a thing. Neocities doesn’t offer blogs, but rather free hosting for websites as large as 1GiB. It’s not without some limitations, can only offer so much without charging money for the website after all, but none of the limitations got in the way for what I wanted. There’s no server side scripting, only static sites, but that was my plan anyway. 1GiB isn’t very big either, but the site’s unlikely to get big enough to run into that limit anytime soon. HTML documents are small, and I’m using little media on the site. With all that in mind, Neocities looked just about ideal for my purposes, so I got to work.

My spec for the site

Remember when I said Vivaldi and Medium were too fancy for my liking? Well, you’ll see why now.

I wanted my site to be static and with no unnecessary fat, absolutely zero in-browser scripting, and no crazy pre-made layouts for site generators. Another thing I wanted was for the site to be just as readable in both fat web browsers like Firefox, and minimalist web browsers like links or w3m.

Preproduction issues

Initially I thought I’d just grab the example site Neocities provides when you make an account, and edit the raw HTML and CSS.

That didn’t last long tho. While editing I quickly ran into some issues:

  • First, I DREADED the angled bracket soup that is HTML. If it exists as some intermediary form for publishing that the web browser then takes and turns into the end result, then it’s w/e, but editing it by hand got old quickly for me
  • Second, a more practical issue: if I wanted any elements to be present on all pages, such as the header you see on the site, then I’d need to either manually copy-paste said elements on each page, and then manually redo that every time there’s a change (which we can all agree is not a very good solution), or I’d have to automate that process, so use some sort of site generator.

Lispy web pages

While looking at my options for writing/generating the site, I stumbled upon Hyde, a static site generator written and configured in CHICKEN Scheme. It allows you to write your site in plain HTML and CSS if you so desire, but it also has some things that for me are even better: SXML and SCSS

For the sake of not making this article any longer than it needs to be, I won’t go into any more detail than I have to, but here’s what’s important

SXML is semantically identical to XML, but written in S-expressions. It was designed to make XML easier to manipulate from Lisps such as Common Lisp or Scheme, and as a result it’s also quite easy to write SXML directly and later convert to XML.

However, this doesn’t quite allow generating HTML from SXML: XML and SXML are quite strict about their syntax, but HTML plays rather fast and loose, with plenty of special cases where the user can just omit some closing tags for the browser to infer, and with tags that self-close without using self-closing syntax.

Enter XHTML. It is HTML, but with a stricter syntax. No omitting self-closing syntax from self-closing tags, or omitting closing tags for the browser to infer their existence. It also is, for all intents and purposes, a perfect subset of XML, meaning it can be generated from SXML.

So to sum up all of the above: S-expressions XHTML!
This allows me to use Vim’s pair motions, as well as Paredit.vim to edit everything (which is not a must but really nice), as well as use Scheme code to generate some elements of the page (such as the links in the header above the page)

For the CSS I went with SCSS. No, not that SCSS, this SCSS. It’s CSS, but in S-expressions. Once again, same advantages as with SXML: nicer editing experience, and the ability to generate from Scheme.

Back to Hyde for a moment, in addition to usual static site generator stuff (nested layouts, generating elements when compiling the sources from various formats into the final pages etc.) and allowing me to write SXML and SCSS that compile to XHTML and CSS respectively, it has one more feature that made it nice to work with: the ability to serve the site trough Spiffy, with pages getting automagically recompiled from the sources whenever a page is requested. This means you can just edit your sources from various formats (in my case SXML, SCSS, and Markdown) and not worry about the generated HTML, only about how it looks in the browser(s) you test in.

The Little Things

The site contents are primarily written in Markdown, as I find it to be a far nicer format to write stuff in than HTML or SXML. The contents of each Markdown file are placed inside a <div> that then gets a generic style for all things Markdown. (not fancy but results in a nice and consistent look)

The colours used trough the site are pulled in the stylesheet at compile-time by some Scheme code from a theme.scm generated by Pywal from the theme template I made for Tarme (made an article about that too!), which makes it very easy to change the colours across the site.

Now to comment on my more stylistic choices, the font used across the site is Google’s now retired Roboto. You might know it for being the default font in older Android releases, particularly the 4.x era (Ice Cream Sandwitch, Jelly Bean, KitKat). In short, it was a rather significant part of the look Android had at the time, dubbed “Holo”, and if you’re familiar with it then you’ve probably already seen it in the look of my site so far. It’s not a perfect match, I never went for that, but I’d be lying if I said Holo wasn’t an inspiration for the site’s look.

What have I learned?

Most of it is just how utterly FUCKED the modern web is. As I was trying stuff out , I ran into several instances of things behaving in ways that made absolutely no sense. Then as I looked stuff up, I ran into the information that actually nobody knows how some of that stuff works. <sarcasm>Truly a sane platform to be working with.</sarcasm>

My many grievances with the modern web aside, between the now 2 posts that I have published, and the posts I’ve been writing but haven’t finished yet, I did learn just how rubbish I was (and still am) at writing. But hey, that’s what practice is for!


Enjoyed the article? Spotted a mistake? Send me your feedback on Fedi: @Reiddragon@fedi.reimu.info