The Astro Rewrite

Migrating my blog from bearblog.dev to Astro.

I migrated my blog from bearblog.dev to Astro!

Over the past month or two, I’ve been building heavily on Astro. I’ve been really impressed with some of the design decisions in the framework, particularly the content layer.

After spending all this time looking at Astro, I began to dream about how I could use those features on my own blog. And with a lot of struggles with some features (or lack of) on bearblog, particularly around dev-oriented features like a proper API, and syntax highlighting for newer languages, I decided to tackle the rewrite.

I used the Astro blog template to begin my rewrite. It was great! Out of the box, it has good support for rendering content and a few extra pages, like an index and about page.

I was able to take that template and update the styling to fit my needs. My new Astro site looks very similar to my bearblog, but with the added benefit of using Tailwind under the hood, along with any other additional components I want to add.¹

I’ve already started implementing a bunch of new features I’m excited about. The “Tips” page is a great example - it was built on a pretty hacky implementation in bearblog, but in Astro, I was able to build a full tag template/page and link to it directly in the nav (/tags/tip):

---
let posts = await getCollection('blog');
const tag = Astro.params.tag;
posts = posts.filter(post => post.data.tags.includes(tag));
---
{posts.map(post => (
  <div>
    <a href={`/${post.slug}/`}>
      {post.data.title}
    </a>
  </div>
))}

Really happy with the results! The code is fully open-source, and although it’s a bit messy now, I will be cleaning it up over the next few weeks.