Hung Yu Ling

Migrating website to Astro


One thing in common between machine learning and front-end development is that there is never a lack of new tools to try. This post is about my experience migrating my old pure HTML website to Astro.

GitHub recently announced (and backtracked) that they are deprecating the GitHub trending page. Upon seeing the news, I started browsing GitHub trending repos thinking that I may soon not be able to discover interesting new projects. Per usual, I look through my favourite language categories — Python, JavaScript, and Rust — and that is when I rediscovered Astro.

I had previously came across Astro, but it did not leave an impression at first. It felt like yet another front-end framework at a time when I was looking for a much simpler solution. To be honest, I still do not see the benefit of using a framework to develop my website. Perhaps it was out of the sadness of the impending loss, I decided to give Astro a try.

The overall development experience is good. It is nice to be able to write posts in Markdown without having to painstakingly write out every HTML tag. The .astro format feels similar to Vue.js files and the project structure also feels familiar from other static site generators, e.g., VuePress and Gatsby. Coming from the land of HTML and CSS, everything just works when I renamed .html extension to .astro. That is really nice.

The biggest problem I encountered in the migration process was conditional rendering. The syntax of nested curly brackets and parentheses is not very intuitive. But the good thing with components is that it only has to be written once.

<div>
    {(fileURL && <a href={fileURL}>Paper</a>)}
    {(siteURL && <span>/ <a href={siteURL}>Website</a></span>)}
    {(codeURL && <span>/ <a href={codeURL}>GitHub</a></span>)}
    {(posterURL && <span>/ <a href={posterURL}>Poster</a></span>)}
</div>

I am not sure if I will continue to use Astro. For the purpose of building my personal website, it feels like any other static site generator. My fear is that this will be another use it or lose it skill. In four months, will I be spending time migrating to Astro version 2 or will I be switching back to writing HTML? Only time will tell.