All posts
DevEnglish

From Hexo to Astro, osu!-Style

Kyr1os2 min readDev
Sections
3
Images
1
Code
0
Read time
2 min

Welcome to osu!🔴

Why Migrate

I’ve been writing some frontend code recently and getting more experience with AI. Naturally, my old blog built on top of Hexo and NexT seems like a relic from some ancient ruin. Therefore, I decided to give it a new look. The inspiration came from osu!lazer, my favourite rhythm game with a comfortable and vivid UI design. For the framework, I picked Astro 7, as it is the best modern static blog framework I could find. It provides some useful features like MDX support, so I can phase out my hexo-react-filter.

Features

One Beat for the Whole Site

The first thing that comes to mind with osu! is rhythm, so let’s add a beat. I don’t want to add music since most of the time I’m just reading some text quietly, so the beat here only has visual effects: 84 BPM by day, 70 at night. The beat stays in sync across different components at the frame level. Due to CSS limitations, I don’t know how to sync it to the millisecond for now.

Visuals

I really like the experience of playing osu!lazer, so the new visual design/implementation was easy this time. I could find good answers to most questions in lazer. To get the lazer vibe, I brought in circles, triangles, a post carousel, a slider, and a footer. Thanks to agents, this work was finished in one afternoon.

Trivia

I also added smooth scrolling, virtualization, and other small improvements to the user experience.

Writing

Thanks to Astro and MDX, we can now use React components without the old filter. Additionally, we can set a cover for each post with a small code change. Some features like tags and archives came from the old blog, and they work well.

Discussion

The old Gitalk setup has been replaced by Giscus. The old comments were migrated to GitHub Discussions as well.

Epilogue

Updating my blog with AI to embrace the AI era is a brand new start. I hope this time I’ll have more chances to record my thoughts than I did in previous years (flag, again x

Comments