Alasco Logo
Career Open positions

Back to the Future: Our Tech Blog's Transition from Jekyll to Astro

A Journey Sparked by Curiosity

Dima Pravotorov
Dima Pravotorov
Wed Sep 06 2023
Dima Pravotorov
Back to the Future: Our Tech Blog's Transition from Jekyll to Astro

Greetings, tech enthusiasts! Today, we’re sharing the fascinating story of Alasco’s tech blog evolution. We’ve embarked on a cosmic journey, transitioning from Jekyll to the sleek Astro framework, all while channeling the spirit of innovation. So, fasten your seatbelts as we take you on this adventure and explore how this leap has reshaped our blogging universe, delivering speed, simplicity, and a touch of magic along the way!

A Journey Sparked by Curiosity

Our tech blog has been an integral part of our company’s tech culture. It’s the place where Alascians—that’s what we call ourselves—share invaluable insights, recount their experiences, and offer intriguing glimpses into the dynamic world of product and technology at our company. Originally, we chose Jekyll because it was well-suited for blogs and easily deployable to GitHub Pages.

So, why did we venture into the cosmos and choose Astro over our old (now stable) friend Jekyll? Well, curiosity got the best of us. Astro’s appeal was undeniable, tempting us to explore its potential.

Astro is tailored for content-rich websites, emphasising peak performance. It seamlessly aligns with our tech blog’s needs, offering adaptability and effortless integrations that could enhance our capabilities. We’re also impressed by the continuous improvements, like the recent release of Astro 3.0.

Astro holds the potential to surpass our expectations, ensuring not only an exceptional user experience but also an enhanced developer experience for our tech blog.

Chronicles of Our Astro Migration

In this section, we delve into the notes we’ve penned down during our cosmic journey with Astro.

Migration PR title

While Jekyll boasts a richer set of built-in blogging features, we seamlessly bridged the gap in Astro by adopting a straightforward blog template from Astro’s collection. This allowed us to enjoy a smooth transition without encountering any noticeable difficulties.

To transfer our content, we followed these steps:

  1. We defined collections schemas for authors and posts.
  2. We moved content collections from _posts and _data, to src/content/. To preserve existing URLs, we renamed post files from YYYY-MM-DD-title.md to YYYY/MM/DD/title.md.
  3. We queried collections within our components front matters.

Embracing the Comfort of JSX Templates

Our component transformation extended beyond front matters. While Jekyll relies on Liquid templates, Astro employs a JSX-like template language. Here’s a side-by-side comparison of listing items in both languages:

<ul>
 {% for item in items %}
  {% if item.displayed %}
     {{ item.description }}
   {% endif %}
 {% endfor %}
</ul>
 
<ul>
  {items
    .filter((item) => item.displayed)
    .map((item) => (
      <li>{item.description}</li>
    ))}
</ul>
Liquid Astro

As you can imagine, the changes were quite straightforward and didn’t take a lot of time to implement.

In the early stages, the Alasco application heavily relied on Django templates. However, as time progressed, we invested more in our React-based frontend tooling. The transition to Astro brought us closer to what we are familiar with enhancing our development experience.

Simplifying Image Handling

Astro’s image handling truly worked like magic. It allowed us to specify image quality, ensuring our blog loaded faster while maintaining impeccable image quality. Gone are the days of manual image tweaking for our authors—Astro took on the heavy lifting.

Streamlining and Enhancing with Astro

Astro’s wide array of integrations offers versatile solutions for various purposes.

Tailwind integration, in particular, allowed us to dramatically reduce our CSS code. We removed around 3000 lines of redundant styles that had accumulated over the years, much of it unused. Moreover, integrating the Typography plugin improved the visual presentation of our Markdown content with minimal extra styling.

Embracing Astro presented us with an opportunity to declutter our codebase and address long-standing issues, including the removal of unnecessary dependencies to reduce data usage for our readers.

The Exciting Possibilities Ahead

Our transition from Jekyll to Astro has transformed our tech blog, bringing speed and simplicity to our content creation process. With Astro as our foundation, we’ll continue to share captivating tech stories and insights. Join us as we explore the evolving world of tech at Alasco! 🚀🌌✨