Welcome to this website that I made! I think it's very dot org. Perhaps it's even very very very dot org. We might never know.

I made this website because I keep writing things and I never know where to post them. A lot of people seem to use Medium for this purpose but it sucks to hand your work to someone else so they can make money off it. Plus they just fired a bunch of people last year and I would rather not build a house on quicksand.

I'm a programmer, I can make my own blog. So here it is! It took me about 4 hours to write the code, another 4 hours to do all the visual design, 2 hours to draw the fairy, and 2 hours to write this post and the about page. Not bad for a couple workdays, if I do say so myself.

If you want all the juicy technical details about how this site is put together, read on.

I think most websites are tragically laden with Javascript, usually to serve ads or provide an unnecessary fancy-pants UI. It's also a pain to maintain and hurts performance. So I really wanted to serve completely static HTML and CSS. I had to cheat a little bit to add analytics, but that's the only Javascript on any of these pages.

At the same time I don't want to update a bunch of HTML files manually every time I want to post something new. I did that with my last website; never again. The obviously solution was to write a website compiler, basically. I put all my posts into a folder, run the compiler, and it should spit out the whole website.

Honestly at this point I was expecting this project to take a huge amount of time or be forced to make a bunch of compromises. Blessedly neither of those things ended up being true. About halfway through I realized I was probably reinventing a few wheels, but it wasn't hard so I don't care.

The compiler is a Python script called generate.py. I almost always use Python for random stuff that I'm never going to share with anyone, like this. It's fast and simple to hack something together, and it's usually surprisingly readable in the end.

There are four HTML templates I handmade called index.html, about.html, post-main-template.html, and post-full-template.html. The compiler takes them and does a bunch of simple text substitution to create the website.

The "about" page is the simplest example. It looks like a normal HTML page with my bio and author image in it, but it also has four tags in it:

• <!--FAVICON-->, which becomes the block of favicon declarations. I found this neat website that generates everything for you.
• <!--ANALYTICS-->, which becomes the snippet of JavaScript I use for analytics.
• <!--HEADER-->, which is the title of the website. I want it to look the same on every page so it was easier to just write it once and make the compiler embed it.
• <!--SIDEBARNAV-->, which ends up having the "Home" and "About" links in it.

I made them HTML comments because I thought it would be convenient to view the pages uncompiled but I didn't ever do that in practice. The post-full-template.html template is similar, but it has a couple extra tags for the post title and contents. The compiler makes one HTML file from the post-full template for each post on the site. That's the full text of the post, like you're reading right now.

The post-main template is a bit more complicated. There is also one for each post on the site, but they're not intended to be viewed on their own. Instead the compiler sorts them by creation date so the most recent post is on top, splits them into pages, and then embeds the whole kit-and-caboodle into the index.html template. That becomes the home page, where you can view the snippets for multiple posts. Since it knows about every post on the site it also updates the sidebar with the dynamic navigation controls ("Older posts" and "Newer posts").

There's a final step at the end where it puts all the completed HTML pages—plus some ancillary files like the CSS, image, and font files—into the output directory.

That's it! Really, that's all the code I wrote.

Of course I also had to do the actual visual design. I found this Stack Overflow post about how to make a decent two column layout in CSS which was extremely helpful. I went on Google Fonts and picked out some fonts I liked. Since I sometimes work offline I downloaded all the TTF files and made a bunch of @font-face blocks instead of linking to Google Fonts directly.

The color scheme was actually a bit of an accident. I made the header #880088 as a placeholder at the very beginning. Later I tried to make a color scheme based on a medium green-gray and made the header a copper color to complement it. Then I looked at a screenshot I had taken of the placeholder and thought "dang, I actually like that purple way better" so I completely reverted it.

I wanted the sidebar to be visually distinct from the body text so I made it a light purple-pink. The background is a light gray to draw attention to the white area. I tried a darker gray but it looked out of place. The link color in the sidebar is actually the same color as the header, it just felt perfect. But in the post body links didn't draw enough attention so I turned up the saturation. The post title color is the same hue as the header but a bit darker, so it looks more similar to the post body. Originally I put borders around the body text and sidebar but I slept on it and decided it looked too busy so they are gone. And I picked a nice copper for <code>, so it stands out a little.

I drew the fairy myself. It took a couple tries; my first attempt had bold black outlines and its wings were the same color as the sidebar. As I was fiddling with its position I realized it was really out of place because nothing else on the site has an outline. So I went back and made the current version, which also shrinks down to favicon size much better.

Here's a fun bug I ran into: when I put up the the title of the blog, with the italics on the third "very," the kerning was all messed up. I was confused and got worried I would have to drop the italics, which I really liked. Then I took a shower and realized I had forgotten to define the italic version of the font, so it was displaying in Arial or something.

Here's another fun bug: the arrows in the navigation links are written in the compiler script like this: "\N{RIGHTWARDS ARROW}". When I first added that and tried to compile I got a weird error like "that character is undefined" or something, even though it was coming up with the right UTF-8 code. After some searching around it turns out that Windows open files in ASCII mode by default (of course it does) so I had to add encoding="utf-8" to all my file open calls.

Special thanks to my sweetie Maddox, Executive Design Consultant. I made it sound like I made all the decisions myself but a second pair of eyes is extremely helpful, especially one that has way more experience than me with fonts and text layout and color.