Making this blog

reader@yggdrasil ~/posts/2024/making-this-blog $ ls tags/
website css python

reader@yggdrasil ~/posts/2024/making-this-blog $ stat -c %.10w content
2024-07-03

reader@yggdrasil ~/posts/2024/making-this-blog $ cat content

This is the story of how I was finally able to create my first normal looking webpage, this blog.

> The most crucial part of every project

If you have a fondness for your projects like me, you know that finding a good name for your stuff is the most important thing. You want to choose a clever, fitting name, because it makes it yours. Almost like a pet dog, cat, raptor or whatever. Sometimes... okay, almost always I use some sort of pun or acronym. I had projects where I've decided on the acronym way before trying to figure out a name which it could be an abbreviation for. This is the reason I was able to have multiple serious discussions with colleagues about what my "Maid" (Manageable Asset Information Database) could do, and what additional features should be considered (but this is a story for another time).

The other approach I have for selecting a name, is finding something with sentimental value or a grandiose/cool sounding vibe. For example in a relatively difficult period in my life, I had a PC with the hostname of "Hyouka". It's a Japanese word that translates to "ice cream". If you want to understand the deeper meaning behind the hostname, I recommend checking out the brilliant Kyoto Animation anime with the same name.

When trying to find a name for my blog I considered things like the Library of Babel. I love the idea that the place contains all the knowledge that had been or will be known, perfect for a blog striving to be the chronicle of my learnings. In the end I dropped the idea because it was too long and there is a website by that name already. If you are interested, I've found a pretty interesting book there.

In the end, my choice of name fell on... well I don't know, actually. I'm still looking at the placeholder text "@myblogname" as I'm writing these lines. Scroll up to the title at the top of the page, and you will know what I ended up with.

> The core concept

From the very beginning I wanted to create something nerdy and relatively original. Then I remembered, that a computer science teacher (unfortunately I forgot who) back in my university days had a webpage where all the menu items and chapters looked like shell commands. I decided I wanted to do something similar.

I started (with the help of a few friends) brainstorming on ideas I could use for the blog, like a fake "head" command for post summaries, or "ls" for listing the related tags for a post. For a while it was really bugging me, that I couldn't make the whole system "realistic". For example "head" obviously can't display images, even though I wanted the previews to contain one. In the end I decided I will just let it go, and have the commands mean "something similar" to their real shell counterparts.

Unfortunately I don't really have any graphics designer experience, so I had to look up some terminal colors on the internet. Luckily I've found a website called terminal.sexy where I really liked the default color template, so I could use it almost without any modification. The current color scheme is this:

+ Update (2024-09-07): since multiple themes are supported now, the colors may differ if you are reading this with a non-default theme.

For the font I used my all-time favorite font, JetBrains Mono, regular size, no ligatures. They had .woff format on their GitHub page,

- but unfortunately only the ligatures version, which I don't like that much, so in the end I had to use .ttf.

+ Update (2024-08-05): as a kind reader, György has pointed it out, I can use the .woff font, if I specify that I want no ligatures in the css:

+ Also, as a result, I had to implement the css for this codeblock, and I got the idea to add updates to a post in a git diff +/- style, so it was a good exercise.

> Putting together the whole thing

For most of the other subdomains under wazul.moe I already had a few thrown together Python scripts to generate the content. Luckily my friend Marcsello opensourced his whole blog, so it was easy for me to get inspired by it, and the templating engine he used. You could say he "led me into the Jinja". (If you are Hungarian this is your cue to laugh. Otherwise, disregard this pun.)

So I started learning Jinja, the templating engine. This was the first time I used it, but probably not the last one. I can see it being used for other than HTML as well.

Since I'm not really a fan of frontend, this was really my first "professional" looking webpage. I was always afraid of creating display size responsive layouts. Fortunately Bootstrap ended up being far easier to use than I anticipated. Truth to be told, I used a stripped down version with only the grid system included, nothing else.

I've written the actual content of the posts in Markdown, so I also used Marko, which is a neat little Markdown converter with great extensibility. I ended up creating a few extensions for it, they can be found here on my git (and it's called warko, because W is an upside down M, and also W like Wazul, get it?).

- When I got to implementing the RSS feed I was a bit tired already so I almost straight up ripped it from Marcsello's code (not like I didn't steal all the other libraries from his project). It's using feedgen to do the job.

+ Update (2024-08-07): I was not satisfied with the original RSS feed generator, as it was leaving out some of the tags, so in the end I made the whole thing in a Jinja template. I guess that's a use other than HTML technically.

I'm planning to opensource my blog as soon as I've got it in order, it will be available on my git soon™.

+ Update (2024-09-04): source code is available now in this repository.

> TODO

There is still a lot of small things to do on the blog. I ended up implementing mostly those features I needed for writing this second blogpost. I also want to use my Jinja knowledge and rebuild the rest of my webpage. Maybe add a normal menu to the main domain instead of the current content, which is just the game over message from the Legend of Zelda: Mayora's Mask.

I also want to do other projects, like designing an icon for myself. I have some ideas already, now I only need to learn Inkscape and do it. <sarcasm> Piece of cake! </sarcasm>

And of course, I have a ton to write about, both my past and future projects, so I think I'm going to be busy. I ended up working a bit more on this post than I first anticipated but I enjoyed it regardless. Hell, I even took my laptop to a holiday drinking party and coded some of the last features for the blog! No sarcasm this time.

Alright then... see you in the next one I guess!

reader@yggdrasil ~/posts/2024/making-this-blog $ find other_posts/ -type f -exec head {} +

Let there be light theme...

...and there was light theme.

Still working on this website

This time I made some improvements to the website.