从 Jekyll 到 Astro

我的博客在 Github Pages 上运行了很多年, 直到我不再是学生以后, GitHub Education 过期, 我再也无法用 Private repo 创建页面, 于是开始寻找替代品. 今年年初我开始用 CloudFlare Pages 运行, 只需要给它 access 任何一个仓库, 它就可以根据其内容构建页面, 和 GitHub Pages 是一样的, 但可以用 private repo, 而且可访问性远远强于前者.

借此契机我决定重写整个博客, 使用更加现代的解决方案和框架, 替换掉让我抓狂的 Ruby 和 Jekyll. 当前这个博客已经改成基于 Astro.js 的方案, 在 CloudFlare 上构建速度极快 (~30s), 远远快于之前的 Jekyll 博客 (~6 min). 除了快之外, Markdown 是线性的、没有排版的语言规范，而在 Astro 上我可以设计各种组件去控制显示效果, 脱离 markdown 的限制, 让这里变成一个沉浸式阅读的完整体验。目前的一些小问题, 一是这个博客还非常不完善, 要我说大概也就 30% 的完成度吧, 二是, 如果想要复杂一点的东西, 就要写 MDX, 而不是 Markdown, 而 JSX 本身对语法要求严格一些, 总是改一些鸡毛蒜皮的东西也有点麻烦, 所以虽然写了一些 Component, 但以后可能会重写很多成插件形式, 在 markdown 里直接解析和扩展.

而原本博客的内容迁移将会让我花很长很长时间, 因为之前产出的垃圾内容太多了, 我想借此机会筛选一下; 目前的版本还有一些兼容性问题, 我还在考虑是否要对曾经的内容兼容, 如果不的话, 我需要修改每篇文章的元内容; 此外, 我很懒.

现在这个版本基于 Dante 主题, 但我对它的内部进行了大规模修改, 并把之前在 Jekyll 上玩的各个自定义的功能带到了这里, 它们分别是:

卡片式链接:

五角星打分:

我最最最喜欢的, iMessage 风格的对话:

以及可以在文章中显示高亮提示 section 的:

地图插件:

Roadmap

As I mentioned before, 这个博客的完成度相当之低, 这个 Dante 主题本身也就是一个空壳而已, 之后会增加和优化的一些功能包括:

新功能

• 支持 YouTube 视频链接解析: https://github.com/lxchapu/astro-gyoza/blob/7261f40b670871512d02122860643a600a812403/src/plugins/remarkEmbed.js#L7
• 图片: https://github.com/francoischalifour/medium-zoom, https://github.com/moersou/1plus.me/tree/main
• 搜索: https://astro-antfustyle-theme.vercel.app/blog/faqs-and-known-issues/#search-functionality
• Collapsable note: https://astro-antfustyle-theme.vercel.app/blog/faqs-and-known-issues/#search-functionality

优化

• Retypeset 标题->博客标题动态效果: https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/components/PostList.astro
• linkCard mesh gradient https://www.magicpattern.design/tools/mesh-gradients
• Table
• 分割线
• Subtitle
• Unlisted indicator
• Theme toggle animation, https://github.com/moersou/1plus.me/tree/main

Fix

• Message bubble tail
• Message bubble indentation placeholder
• Emoji as avatar
• Mail fix: https://developers.cloudflare.com/waf/tools/scrape-shield/email-address-obfuscation/

但是目前大概还是会以内容优先, 反正只有我看, 博客的功能性和体验都是 second place.