A New Post Layout

Some time ago I have rewritten my blog from Hugo to Astro. It was quite fun! Astro felt less clunky and more close to web technologies than Hugo. However, I ran into two different issues with my blog recently. Issues with its tech stack to be precise.

The offenders are: code complexity and markdown.

Code Complexity

Having not worked on my blog's codebase for a while, I had a hard time understanding what is going on. There are a couple layers of abstraction like routing, layouts, and content collections. All of that to... generate a static website.

Markdown

The second offender is markdown.

B-b-but why?! Markdown is a good format to author in, right? Right?

Well... It is; until it isn't. To convert markdown to a website you need a build system of sorts. What makes this bad is that said build system rebuilds entirety of the content, including the old stuff.

This has bitten me recently. For no apparent reason, code snippets on my blog started to get an extra blank line at the end in their generated HTML. The posts that I written years ago changed!

Additionally, for more complex things you need to resort to HTML anyways. Then you are at mercy of the build system and what HTML subset it allows to use within its markdown.

What Now?

I already had this idea of writing my blog directly in HTML for quite some time. Latest annoyances made me revisit this idea. Learning about a Tailwind CSS Typography plugin reinforced it further.

People use static site generators for a reason, though. There have to be drawbacks, right? Here are some of the things I thought about before making the jump.

Considerations

Lack of reusable components (e.g. header, footer)

When you think about it, how many posts am I going to publish in the lifetime of this blog? A couple hundred at best? Mind you, this is a 23rd post.

Even if I had to replace the header or the footer in every post, then that can be done fairly quick manually. This will be true for a foreseeable future too.

Code snippets highlighting

I thought this would be a big one, but... I can highlight the code using the tip I shared in How to Highlight Code Syntax in Google Slides! It's a quick process and there aren't that many code snippets per post.

RSS

Having just added RSS, I don't want it to stop working. The tough part here is that I use an Astro extension to generate the RSS feed. I do, however, define what posts should go to the feed. I just need to inject the manual posts in there!

Image optimization

Again, how many images there will be? I don't need it automated. I can use something like Squoosh to resize and convert images. Or not do it at all. Unless a page assets size get out of hand that is.

Pagination

I haven't had it working in Astro. If anything, then making it work with two additional links is going to be easier than learning how to add pagination to Astro.

Rewriting older posts

I will make the clever thing and change layout starting from the next post. I might rewrite old posts to HTML eventually, but I don't want it to stop me from publishing.

The New

After weighing pros and cons, I opened a HTML file, configured Tailwind, plugged in its typography plugin, and... here we are. There are still some improvements that I have on my radar, but the core definitely is there.

Let me know what do you think about this new layout!