The Tech Behind My Blog

Hello there! Welcome to the very first post on my brand new blog! Thought I’d share a bit about the technology stack I ended up choosing and what it was like getting everything up and running.

Finding the Right Static Site Generator

So after playing around with a few different options, I eventually went with Astro to build this site.

I actually tried Hugo first, but honestly, it just wasn’t clicking with me. I found myself wanting more freedom than what it offered. Then I gave Gatsby a go, but in the end, I was looking for something less complicated.

What really got me interested in Astro was how simple it is. It gives me all the flexibility I need while still being quite straightforward to use. Another big plus is that if I ever want to go beyond just a static site, Astro makes that transition pretty smooth, which is exactly what I would want.

How I Approached the Styling

For this blog’s design, I kept things quite simple with custom CSS. One thing I really like about Astro is its component-scoped CSS features, which helps me keep all the styles isolated and much easier to maintain.

There was one interesting challenge worth mentioning though: styling those components that get generated from markdown content. At first, I was struggling to style these components without making all the styles global, which wasn’t what I wanted since I prefer scoped styling.

My solution? I created a wrapper around the generated component and applied my styles to that wrapper class. It was actually quite a simple fix that let me keep the component-scoped approach I was aiming for. For example:

// ContentWrapper
<div class="content">
    <slot/>
</div>

<style is:global>// is:global makes sure that the styling also works for the children
    // Here put the styles in a css content class
</style>

Just remember you need to make sure that the “content” class doesn’t clash with any other global class you might have.

Managing the Content

I’m writing all my blog posts directly in markdown files. This approach keeps everything nice and simple, and it works perfectly with Astro’s workflow. Can’t really complain about that, can I?

Where It’s All Hosted

The blog is hosted on Gitlab pages, which is free and just works. When I push it deploys.

Keeping Track of Visitors

For analytics, I decided to go with Tinylytics. I chose this particular solution because it offers minimal tracking without needing cookies. In the future, I might add some extra features like page view counters or maybe even a kudos system so readers can show some love for posts they enjoy.

Starting with the Basics

My whole philosophy with this blog was to start small and only add complexity when I actually need it. Instead of trying to implement every possible feature right from the start, I focused on creating a solid foundation that I can build on over time.

Wouldn’t you agree that’s usually the best approach? Start simple, then add the fancy bits later when you know what you actually need.

---

Well, I hope this gives you some insight into how this blog came to be. As things evolve, I’ll share more about my experiences and any new features I implement. Thanks for taking the time to read this first post! Curious to hear what you think about these tech choices!