Carolyn's

This Site Migrated to Astro

本站迁移到了 Astro
# Configuration # Web # 中文内容
This is the best framework for static site generation ever.
这是我用过最好的 SSG 框架。

契机

本站此前使用 Docusaurus 框架。如果仅为了呈现文字，这只诞生于工程师思维的「小恐龙」确实提供了易用性和技术上的深度。但也正因如此，Docusaurus 在美学表现力上稍显匮乏，我曾花费了大量精力去覆盖和调整其默认样式（CSS 文件甚至长达 1500 行）。

简而言之，作为内容呈现的工具，Docusaurus 是优秀的；但作为自我表达的载体，它显得过于拘谨，并不从容。

在选择 Astro 以前，我尝试过了许多 Next.js 的框架（例如 Fumadocs、Nextra 等），视觉审美尚且足够。但Next.js 的生态复杂性与其陡峭的学习曲线令我望而却步。

Astro 简洁的语法和灵活的架构设计吸引了我。它允许我用最简单的方式实现复杂的功能，同时保持代码的整洁和可维护性。

一些技术细节

最简开始

我从最简模板（Minimal）开始以便进行深度化的定制。

npm create astro@latest -- --template minimal

Material Design 3

我个人并不倾向于网页设计中过度泛滥的光影特效，尤其是时下流行的「流体玻璃（Liquid Glass）」风格。考虑到本站原本就在使用 Material Symbols 图标库，沿用 Material Design (M3) 也就顺理成章。

优化的 Material Symbols 加载

借此迁移契机，我重构了 Material Symbols 的加载策略。

此前，我虽然通过反向代理实现了 Google Fonts 的缓存以改善中国大陆地区的访问体验，但全量包的体积依然太大，加载延迟感明显。

优化方案：在构建的时候，提取站点实际使用到的图标，打包成精简的字体文件并以此托管在本地，解决了加载瓶颈。

http://carolyn.sh/fonts/material-symbols-subset.woff2

PDF.js 精简

在此前的构建中，我使用了自行编译的 PDF.js 来渲染页面中的 PDF 文档。

为了缩减最终分发（Distribution）的体积，我在构建流程中增加了一个步骤，用于剔除 PDF.js 中不必要的调试文件与示例文件。

echo "🚀 Optimizing for production..."
# Remove debugger files
rm -f public/pdfjs/web/debugger.mjs
rm -f public/pdfjs/web/debugger.css

# Remove sample PDF
rm -f public/pdfjs/web/compressed.tracemonkey-pldi-09.pdf

# Remove source maps to save space
find public/pdfjs -name "*.map" -type f -delete

其他细节

  • 排版优化：引入 @tailwindcss/typography 插件，显著提升了 Markdown 内容的渲染质感。

TODO

  • 目前的视觉实现尚未完全遵循 Material Design 规范。

EOF