eirikur.dev

Building This Blog 🛠️

Published on • 5 min read
A computer laptop, used for coding

Why Start Blogging?

Well, it’s something that I’ve wanted to do for a while. I think there’s enough for me to draw on from my professional experience to produce interesting content. But up until recently, I just didn’t have that much free time. I’m a father of two awesome kids who have kept me quite busy for the past 10 years. But as the kids grow older, I suddenly find myself with a bit of hobby time.

I want to make use of this leeway to hone my writing skills and share some of my experiences, both new and old.

Why Build It?

In the past, whenever I had an idea for an article or a post, I wouldn’t know where to publish it. I once published an article on LinkedIn. I found it convenient since that’s where my professional network is. But the editor was quite restrictive. For example, there’s no syntax highlighting for code snippets, making it less than ideal for the things I’d like to write.

Medium.com and dev.to seem to be the primary publishing platforms for articles on programming. To be honest, I’ve tried neither. Medium’s business model seems to revolve around charging readers for access to content, whereas dev.to shows you ads. I get it, these are business and they need revenue. But I want my content to be free of charge and free from ads (unless I get the ad revenue!)

Building a blog site from scratch is obviously a bit more work, but it has some compelling benefits. First, I can construct articles that are sprinkled with interactivity that couldn’t be achieved within the confines of a rich-text editor. Second, it gives me a playground in which to explore new tech.

How

This web site is statically generated using Astro. The Astro docs contain a pretty comprehensive guide on how to build your own blog, but that will leave you with a pretty bare-bones web site. Instead, I went to the theme gallery and found a nice blog theme named Nimbus Narratives. Now, Astro themes aren’t themes in the traditional sense of the word. They are more like cookiecutter templates. That’s fine, but it means that these themes come with a bit of baggage. For instance, the theme I chose was made with Astro 2.x whereas the latest version is 3.5. So when I ran

npm create astro@latest -- --template abdllahdev/nimbus-narratives

to set up my project, I rather surprisingly ended up with an Astro 2.x web site. It took a bit of massaging to update all of the npm packages to the latest version and fix the things that broke as a result (note to self: open a PR to update the theme).

With the web site taking shape, it was time to deploy it using Cloudflare Pages. When I googled how to deploy Astro to Cloudflare Pages, I found several different guides. I mistakenly thought that I needed to install the @astrojs/cloudflare adapter. I wasted a bit of time on that path until I realized it was only needed for web sites that leverage server-side-rendering. Once I had backtracked, configuring the deployments using the Cloudflare Dashboard turned out to be dead-simple.

How Much Does It Cost?

I bought the domain from Cloudflare for $20.36/year. That’s it. There are no other 💸.

Other Options and Why I Ruled Them Out

At GRID.is we use Next.js to build our app. That would have been a rather convenient choice. I decided against it first and foremost because I wanted to try out something new (well, new to me at least). I also thought that Next.js would be overkill for a personal blog. I wanted something lighter, both in terms of complexity and bundle size.

I did consider SolidStart as I’m quite intrigued by it. Reasoning about React hooks is hard, which is why I’m excited to try out Solid.js and signals. However, a personal blog doesn’t require much reactivity. I’ll have to wait until I have a different use case to try it out.

I came to the conclusion that I should look at frameworks that are designed for content sites. I don’t need a CMS, just something that can take articles written in Markdown and transform them into HTML. Two options stood out: Hugo and Astro. I gave Hugo a spin and the developer experience seems very slick. But I went with Astro because I’m more familiar with JSX than Go templates.

As for hosting, I could have gone with Vercel or Netlify as both offer generous free tiers for hobby projects. I simply chose Cloudflare due to familiarity and because they are the only provider with a data center in Iceland.