使用 Astro 搭建个人网站

搭建个人网站，这个想法如果放在以前，我可能会说：

这有什么用呢？
写些什么呢？
会有人看么？

但最近，我的看法发生了转变：

我曾多次点进某些个人网站，在看完一篇精彩的文章之后，忍不住去翻阅其他文章，并通过作者的介绍页去了解他的生平
我也曾在 X 上刷到 Timothy Ferriss 介绍速读技巧的视频，然后通过他的个人网站了解到了他的书和播客，并看完了他的那本十多年前的畅销书 The 4-Hour Workweek。

现在，我觉得个人网站的价值在于：

将你的思考、认知与成果展示出来，否则这些有价值的东西可能仅在你的家人、朋友和同事间产生影响
维护它是一个有长期复利的行为，它会累积你人生中一次次灵感迸发和高光时刻，并且不会随着一次跳槽或搬家而顷刻归零
它是一扇窗，可以与世界产生连接

不过，现在已经有了这么多的社交媒体和博客网站，为什么还要自己搭建一个呢？我觉得这两者并不冲突，我们可以都用，但是个人网站的优点在于：

你不必依附某一个平台，它是一个专属于你的平台
你可以自定义它的主题、格式，体现你的独特品味
你可以完全掌控它，添加什么功能、怎么部署以及使用什么域名，这些都由你决定

当然，这一切都需要一定的编程能力。不过，好在程序员都是十分无私的，不光免费提供很多好用的框架，还有详细的文档教你怎么使用，搭建一个网站在今天其实并没那么麻烦。好了，那就让我们开始吧。

技术选型

我的过往经历主要是后端开发，虽然对前端技术有一定了解，但从零开始搭建网站还是第一次，那就先找下最佳实践吧。问了下 ChatGPT，它的回复是：

Decide what your website is for:
Portfolio/resume?
Blog?
Project showcase?
Contact information?

好问题，我觉得博客最符合我对个人网站的定位。顺带一提，对于技术问题我习惯用英文提问，所以 ChatGPT 也是用英文回答的。接着，它罗列了一些技术框架:

Static Site Generators:
- Astro – modern, fast, great for blogs.
- Hugo – fast, Go-based.
- Jekyll – used with GitHub Pages.

No-code/low-code options:
- Notion + Super.so
- Wix, Carrd

首先 No-code/low-code 咱就不考虑了。Static Site Generators 倒是个新词，不过顾名思义也挺好理解，毕竟博客如果不考虑用户登录和评论等内容那就只需要展示文字和图片，所有内容都是静态的，就不需要后端服务和数据库那堆东西了。Google 了下 Static Site Generators，发现 https://jamstack.org/generators/ 总结了很多常见框架: ssg 我挑了4个热门的:

Astro
Hugo
Gatsby
Jekyll

用 https://www.star-history.com/ 对比了下他们的 GitHub Star 趋势: 发现 Astro 是最新的，也是增长速度最快的，那就用它了。

Astro

入门

astro Astro 官网总结了它的一些特性:

服务端渲染
内容驱动
可定制化

这些都挺符合我的需求。Astro 官方文档有一个教程 Tutorial: Build a blog，里面详细介绍了如何从零开始搭建一个博客。这个教程很棒，即使没有任何前端知识也能顺利完成。我抽了几个晚上的时间做完，最后的成品如下：可以看到，里面基本包含了一个博客所需的页面：主页、关于、文章、标签，另外还有深色模式和社交链接。可以说这已经是一个合格的博客了，只是看上去比较“朴素”，接下来需要把它弄得好看点。

主题

Astro 官方提供了主题库，里面提供了很多主题可供选择。经过一番挑选，我最终选择了 AstroPaper I18n 主题: 它具有以下3个优点：

免费
简洁，专注于内容
支持国际化

其中第三点是我特别关注的，因为我希望我的博客可以支持中英双语。关于主题的安装和国际化的设置可以参考 AstroPaper I18n 文档，它原生支持中文、英文和阿拉伯语，我们可以通过简单地修改 src/i18n/config.ts 配置文件只保留中文和英文。

除了国际化功能之外，这个主题的其他功能其实是基于 AstroPaper 主题的。如果不需要对主题本身进行修改的话，那么现在就可以开始写文章了。只需要把 Markdown 格式的文档放到 src/data/blog 目录下，Astro 就会自动处理好剩下的事情。

微调

AstroPaper 主题本身已经比较简洁美观了，但由于默认布局会涵盖所有的功能，并且包含一些模版内容，所以也是有一定精简和修改空间的，我就做了如下修改：

修改页眉文件 src\components\Header.astro
- 去掉了关于和归档按钮
修改主页文件 src\pages\[...locale]\index.astro
- 调整了欢迎语的内容和字体大小，去掉了 README 链接
修改常量文件 src\constants.ts
- 修改了社交链接
修改日期样式文件 src\components\Datetime.astro
- 将文章日期格式由 22 Mar, 2025 修改为 2025-05-02
修改全局样式文件 src\styles\global.css
- 微调了浅色模式的背景色

最终的效果如下: my-theme-dark my-theme-light

钩子

Astro 的文章有发布时间和修改时间两个属性: pubDatetime, modDatetime，需要我们自己每次修改文章时设置。AstroPaper 官方文章介绍了使用 Git Hooks 来自动设置这两个属性的方法，在此基础上我进行了点修改，然后添加到了 .husky\pre-commit 文件中：

# Loop over each line of the output from the git diff command (added/modified .md files), reading status into "_" and filename into "file"
while read -r _ file; do
    # Extract the YAML frontmatter section (between ---) from the file using awk; the second section is the actual frontmatter
    frontmatter=$(awk -v RS='---' 'NR==2 {print}' "$file")
    # Extract the value of the `draft` field from the frontmatter using grep
    draft=$(grep -oP 'draft: \K.*' <<<"$frontmatter")
    # Get the current timestamp
    now=$(date -u +%Y-%m-%dT%H:%M:%SZ)
    # If draft is marked as 'first', treat it as a first-time publish
    if [[ $draft = 'first' ]]; then
        echo "release $file: pubDatetime: $now, modDateTime:"
        # Replace the draft value with false in the frontmatter
        sed -r -i '/---/,/---/s/^(draft:\s*).*/\1false/' "$file"
        # Update the pubDatetime with current timestamp
        sed -r -i "/---/,/---/s/^(pubDatetime:\s*).*/\1$now/" "$file"
        # Clear the modDatetime value
        sed -r -i '/---/,/---/s/^(modDatetime:\s*).*/\1/' "$file"
        # Stage the modified file in git
        git add "$file"
    # If draft is false, it's a published post being updated
    elif [[ $draft = 'false' ]]; then
        echo "update $file: modDatetime: $now"
        # Update the modDatetime with current timestamp
        sed -r -i "/---/,/---/s/^(modDatetime: ).*$/\1$now/" "$file"
        # Stage the updated file in git
        git add "$file"
    fi
# Feed the list of staged Markdown files (added or modified) into the while loop
done < <(git diff --cached --name-status | grep -P '^(A|M).*\.md$')

部署

完成了所有修改，最后就剩下部署了。其实前文提到的 Astro 的官方教程中就包含了使用 Netlify 自动部署 GitHub 仓库的内容 Deploy your site to the web:

将 Astro 代码推送到 GitHub 仓库
在 Netlify 注册账号并关联对应 GitHub 仓库
Netlify 将在每次 GitHub 仓库更新后自动部署

配置完成后 Netlift 的页面: netlift 点击项目域名就能跳转到博客了。

至此，我们的个人网站就搭建好了！