Other posts

How this blog came to be

· 5 minImage representing the article

Introduction

Every line of code tells a story. This post is about the story behind this blog, how it started, what motivated me, and how it evolved into what you’re reading now.

The site before this one

Before I can start talking about this site, I want you to know that the URL you’re using to access it previously hosted a different website, which you can still check at https://old.otavioh.dev/en.
I know, it’s messy, buggy, and kinda tacky. But without a doubt, it was a start. That version was publicly available since Aug. 2023.

Old Portfolio
Old Portfolio

That site had a cool effect where a small shadow on the background followed your cursor, but that was the only thing I liked.

It was built using Nuxt. I chose it because I have a lot of experience writing Vue and thought it would be a good fit. But at the time, its static site generation capabilities weren’t great, and the Markdown support was lacking. So when I had the idea to add a blog section, I had a bad experience.

I didn’t like the final result, and some of the features I needed weren’t ideal. So, when I found time, I started rewriting it using a different technology, one with solid Markdown support, easy extensibility, and available themes so I could find a layout I liked before committing to customization.

It’s worth noting that I didn’t revisit Nuxt after releasing the first version of the old site. But while writing this post, I did a quick search and found that maybe today I could build this site with it just fine. Still, I felt adventurous and wanted to learn a new technology, so I skipped it.

The Requirements

To understand why I chose the tech I did, we need to look at the requirements I had in mind:

  • Easy i18n, because everything I write should be in at least two languages: Portuguese and English;
  • Markdown support, to keep writing simple and the layout clean;
  • Theme community, because I wanted to start from an already established base;
  • RSS support, because I want my posts to be readable anywhere and to notify readers when new posts come out.

Choosing the Stack

With all that in mind, I started searching and ended up with the following stack:

  • Frontend: Astro;
  • Styling: Vanilla CSS;
  • Markdown for content;
  • Deployed on: GitHub Pages;
  • Base Theme: Chiri;

This stack had everything I needed. So the last question is:

Why I Wanted a Blog?

Have you ever learned something so cool that you wanted to share it with the world, but didn’t know where?
Or maybe you had to compile knowledge from a dozen different sites just to make something work and wished you could give back in a way that wouldn’t get buried within days?

That’s the feeling I want to channel into this blog. I’ll be experimenting with technology, sometimes old, sometimes bleeding-edge. I’ll build a portfolio of projects and posts documenting the journey of building new applications, software, and services. I want to conduct experiments like “building your own X in Y language.”

So this blog is more than a website, it’s a personal lab, a project journal, and an archive rolled into one.

Let’s build it

With the motivation in mind and time on my hands, I started building:

Planning

First, I browsed a lot of themes on Astro’s website. That’s when I found Astro Pure, so I downloaded it and started tinkering. But within a few hours, I realized the theme had too much built-in complexity. It wasn’t just a base, it was a fully structured solution, which wasn’t what I wanted.

So back to searching. I tried Cactus and Paper i18n. Both were beautiful and nailed the simplicity I was looking for. I downloaded them and started learning Astro.

Then one day, I opened the Astro theme page by accident and saw Chiri a very similar theme to Cactus, but more aesthetically pleasing. I scrapped what I had done and started fresh with it.

Development

The first thing I added was i18n support. I wanted the site to be at least bilingual to support readers both in my country and abroad.

I initially tried Astro’s default i18n support, but couldn’t get URL locales working as I wanted. Then I tested a few third-party libraries, but the DX (developer experience) wasn’t great. Some generated duplicated code or added unnecessary overhead I didn’t want to deal with.

Later, I returned to the default support but looked into open-source projects for inspiration. I remembered Paper i18n had localization support. When I checked its implementation, I saw it extended Astro’s defaults in a very flexible way. I took inspiration and built my own version based on it.

Once i18n was working, I started adding the missing features I wanted:

  • Better navigation;
  • Support for experience, education, and contact pages;
  • Open Graph picture support;
  • Tags;
  • Related articles;
  • Language switcher;
  • Blog post listing;
  • Expanded blog post view;
  • Restyled table of contents;
  • Phosphor Icons integration (my favorite icon pack);
  • Compression and minimization on production builds.

Deployment

As with all my personal projects, I created a simple GitHub Actions pipeline to publish the static site to GitHub Pages at https://otavioh.dev/.
And wrote this first post so the site would go live with at least one piece of content to read.

What’s Next

Now that the blog is live, I plan to:

  • Write frequently (or at least try);
  • Share tutorials, experiments, and dev logs.

I already have ideas I want to explore involving Elixir Programming Language and the Cloud, or the lack of it.
So stay tuned and follow me on one of the social platforms on my contact page.

Final Thoughts

So thanks for visiting and reading it! I hope you found something useful in my journey building this blog and if you’re building your own, or already have one, I’d love to hear about it too.

#blog