Blog, old-school hand-written code (mostly)

A while ago, I created a new personal blog. Of course, I didn't want to deprive myself from writing about it here on dev.to!

Huge bummer ahead: It's not a coding blog!

That out of the way, here is the link: https://riidom.eu

Why the landing page?

It's for three reasons, two of them not really valid anymore.

1. My shared hoster offers only a cheap version of redirecting, and I didn't get it to work. But I want my blog tucked away in a separate folder, so you have to click the link or go straight to /blog.
2. There are other things than the blog, like a kanban board or a nextcloud instance. Turned out, I don't need these to be public and therefore no links for them.
3. My previous instance of a blog was slow. So I wanted a fast landing page for SEO stuff, and made an animated scanner stripe sort-of, which you can watch for 2 seconds after clicking the link. Now the site loads fast though.

Techs in use

The only 3rd-party code is https://htmx.org . I need it for swapping out the main area of the page with blog posts or other sites. This way I dont get page reloads and things feel modern.

The other only 3rd-party code is normalize.css.

Well, and the javascript is heavily inspired by various stackoverflow answers.

Weird things I'd like to fix but dunno how

FOWL

I think I invented FOWL (flash of wrong language). You can see it on the english version. I hope it's not too annoying, so sorry for that.

no routes

Also, there is only one URL, and it's the base URL. If you click on any post or page, it will never change. HTMX has a feature to rewrite browser history, but it didn't work for me, guess I set up my whole site wrong for it.

Problem? I believe most people who come to my site will read the newest post and maybe 1-2 random older ones, and that's it. I mean, let's be realistic about it :) So I guess it's not a huge problem actually.

Update procedure

For writing a new blogpost, I need to do the following things:

1. Write post in html-file. During writing, I make up image files and the description in alt- and figcaption-tags will help me remember what it is about when I make the screenshots. While I am a huge fan of Markdown, I noticed that writing in html is almost as smooth, if you make proper use of Emmet.
2. Copy-paste the whole thing and replace german text with english text. Both are wrapped in <div class="en or de" tags, in the same file.
3. Make the images I referred to before.
4. Run a shell script that uses ffmpeg to create 500x200px thumbnails of every image. These are for appearance within the blog posts' copy.
5. Run another shell script to create a 320x180px thumbnail of one of the images, which appears in the post list.
6. Inside the index.html, update the navigation (copy past last entry and replace link/text/date/image), also update which page to load by default (for now, the newest one).
7. Update feed.xml
8. Update image on landingpage and the image used for twitter cards and OG (these have a fixed filename so there is no code change required).

Comparison

So, step 1-3 you have to always do, whatever tech stack you use. Posts don't write themselves, afterall.

The image and thumbnail management you get from a CMS is quite nice, and I mildly miss it. But with the shell scripts and some follow-up copying of a few images, it is really not that much worse.

Updating index.html and feed.xml is maybe 10 minutes of work. In comparison, digging through the backend of some CMS and remember what to click, select and fill out (especially if you don't do daily), I dare to say just going through the code is easier and faster and less error-prone. Some slick streamlined SSG-workflow is probably unbeatable here, though. But again, we talk about 10 minutes, after you spent 1-2 hours of writing and screenshotting.

I find it kinda annoying to write every alt and figcaption twice (because of two languages), but well I picked that rabbit hole when I planned the project :)

VCS

Nothing, really. I have a copy of the website on my local hard disc, it gets synced to nextcloud, and a copy on my shared hoster. With dolphin (Kubuntu-equivalent of Windows Explorer), I have FTP built-in, so that's kinda cool and there is no need for Filezilla or alike.

I did use git (locally, mostly) in past for other projects, gamedev-related, but I somewhat think it is weird to use it for a website. But that's me being mentally a bit stiff here, I think.

The End

So if you have any questions or comments, go ahead, I try my best.
And if you have been reading first without clicking the link, let me save you some scrolling: https://riidom.eu

Thanks for reading!