好久没打理我的博客了，这两天忽然想重新拾起写作，顺便把整个站点好好翻新一番。之前的博客一直基于 Hexo 搭建，虽然稳定够用，但用久了总觉得少了点新鲜感，自己也想体验一下更现代的工具。
无意中，我发现了 Astro，被它的「群岛架构」理念吸引，再加上 GitHub 上极高的热度和不少大厂的实际应用，我当即决定：把博客从 Hexo 迁移到 Astro，也让这个沉寂许久的地方，重新活过来。
说干就干，经过一番倒腾，终于顺利完成博客迁移。随后，我又用谷歌 Lighthouse 重新跑了分。对比之前 Hexo 时代的成绩，Astro 构建的站点直接接近满分，这一番折腾果然没白费。
欢迎点开看看，基于Astro重建后，我的全新博客站点：晚阳Crown - Blog
0.为什么选择Astro
Astro 是一个专门为内容网站（如博客、个人作品集、营销网站、文档站等）设计的 Web 框架。它的核心思想是：在保证网站加载飞快的前提下，为你提供现代前端开发的灵活性和舒适感。
Astro官方网站 | Astro官方仓库 | Astro官方文档
从个人站长的视角来看，Astro 就像一位既懂内容创作又懂性能优化、SEO的“智能”建站伙伴，无论是站点搭建过程还是后续维护、升级，都能提供流畅高效的体验。
🌟 核心理念：为“内容驱动”而生
- 专注内容而非重应用：Astro 与 Next.js、Nuxt 等为复杂 Web 应用设计的框架不同，它天生为展示文字、图片等内容优化。如果你的网站主要目的是“让读者看到内容”，Astro 会是更纯粹、更高效的选择。
- 优秀的性能表现：官方目标很明确——“用 Astro 几乎不可能做出慢网站”。它通过架构设计，让网站开箱即拥有极致的加载速度和 SEO 表现，这对博客和营销站点的成功至关重要。
🏝️ 关键创新：“群岛架构”
这是 Astro 速度的秘密武器，理解起来其实很形象：
- 想象一片静态的 HTML 海洋：你的大部分页面都会被 Astro 提前生成好，变成纯粹、快速的静态 HTML。这确保了绝大部分内容能以最快速度抵达访客。
- 海上漂浮的“交互岛屿” ：页面上需要交互的部分（如评论区、图片轮播、订阅弹窗）就像一个个独立的“岛屿”。只有这些岛屿需要加载 JavaScript，并且它们是独立加载和激活的。
群岛架构不仅带来了强大的性能，还有优秀的灵活性：
- 按需激活，绝不浪费：你甚至可以控制这些“岛屿”何时加载，或是根据每个组件的使用情况来处理不同的加载优先级。比如，一个在页面底部的“相关文章”轮播图，可以设置只有当用户滚动到它时才加载，进一步节省流量和资源。
- 兼容多框架，生态更灵活：由于每个岛屿相互独立运行，同时支持状态共享与通信。这种灵活性让 Astro 能够支持多种 UI 框架，你可以在同一个页面内混合使用 React、Vue、Solid等技术栈，且互不冲突。这为技术选型、团队协作以及旧项目渐进式迁移，都带来了极大的便利与扩展性。
⚡实时反馈：热模块替换（HMR）
对站长来说，建立和维护个人站点的体验好不好，关键就在于从 “改配置 / 改内容” 到 “看到实际效果” 之间的等待时间。
传统静态站点生成器（如 Hexo）的工作流中存在“手动重启服务”、“重新生成站点”和“刷新页面”等多重步骤，才能看到变更效果，流程不够连贯，调试效率也相对较低。
Astro 则截然不同，其开发服务器具备强大的热更新（HMR，Hot Module Replacement） 能力，让你在保存文件后，变更便能自动、无缝地呈现在浏览器中，实现了真正连贯的创作流程。
Hexo 的工作流是典型的 “编辑 → 生成、重启 → 刷新 → 查看” 手动循环，开发流程存在明显的中断和延迟：
修改markdown文件 → 保存修改 → 手动刷新浏览器 → 查看变更
修改配置、代码等文件 → 保存修改 → 停止开发服务器(Ctrl+C) →（有时需清理并重新生成）→ 重新执行(hexo server命令)启动服务器 → 手动刷新浏览器 → 查看变更
而 Astro 提供了近乎无缝的 “编辑 → 保存 → 即时可见” 的丝滑、连贯的体验：
修改markdown文件 → 保存修改 → 浏览器自动刷新，变更立即可见
修改配置、代码等文件 → 保存修改 → 浏览器自动刷新，变更立即可见
核心优势：得益于先进的热更新开发服务器，无论是内容、配置还是前端组件代码的修改，保存后均能在浏览器中瞬时反映，无需手动生成或重启。
| 特性/操作 | Hexo | Astro |
|---|---|---|
| 热重载 | ❌ 默认不支持 | ✅ 完整支持 |
| 实时更新 | ❌ 需手动刷新 | ✅ 自动更新 |
| 编译速度 | ⚠️ 相对较慢 | ✅ 极快（Vite驱动） |
| 增量编译 | ❌ 通常全量生成 | ✅ 只编译修改部分 |
| 开发反馈 | 差（等待时间长） | 优秀（即时反馈） |
这彻底解决了我过去使用 Hexo 时的一大困扰：由于每次修改通常都需要手动重启服务器、刷新页面，有时还需要清理并重新生成，总是机械化地重复在命令行敲着同样的命令，等待测试结果，这种间断的工作流，导致调试效率低下。
原本的博客 DIY 过程变得繁琐耗时，甚至让人失去动手调整的兴致。而 Astro 的 HMR 功能将这种间断的流程变为无缝的实时调整，让过程变得直观高效，体验从拖沓繁琐直接变成丝滑流畅，省心又顺手，这点深得我心！
这种感觉，就像是终于能把时间花在“创作”本身，而不是反复等待构建和刷新——现在，每一次调整都能立刻获得视觉反馈，修改和DIY博客重新变成了一件有即时正反馈、让人愿意持续琢磨的乐趣~
💡 总结
对于个人博客或站点而言，Astro 的核心优势在于：它既保留了静态站生成器（SSG）的简单高效，又具备了现代前端框架的灵活表现力，同时在性能上做到了极致。日常创作时，你能像用传统博客工具那样只专注内容本身，而当需要个性化定制时，Astro 所具备的拓展空间和实操体验，是传统建站工具难以企及的。
对我来说，从 Hexo 迁移到 Astro，本质上是从「能用就行」的静态博客，升级成一套高性能、易维护、灵活的现代站点体系。Lighthouse 分数拉满不过是顺带的结果，真正让我满意的，是博客终于回到了轻盈、快速、干净的纯粹样子。
1.Astro博客初体验
如果你也想拥有这样轻、快、干净的博客，接下来的简易教程，带你轻松入门。
1.1 环境准备
1.1.1 安装Git
访问 Git 官网 下载并安装适合你操作系统的 Git 版本。
安装完成后，打开终端或命令提示符，运行以下命令验证 Git 是否安装成功：
git --version
如果显示版本号，则表示安装成功。
1.1.2 安装Node.js
访问 Node.js 官网 下载并安装最新版本的 Node.js。建议使用 LTS 版本。
安装完成后，打开终端或命令提示符，运行以下命令验证 Node.js 是否安装成功：
node -v
npm -v
如果显示版本号，则表示安装成功。
1.1.3 安装pnpm
pnpm 是比 npm、yarn 更节省空间、安装更快的包管理工具，能有效提升依赖管理效率，减少依赖冗余、幽灵依赖等常见问题。
通过 npm 安装 pnpm：
npm install -g pnpm
-g：--global 的缩写，代表全局安装，包会被安装到系统全局路径，这样终端任意目录可直接使用包命令。
1.2 安装最新版本Astro
pnpm create astro@latest
执行命令后，首先会检测本地是否安装 create-astro（Astro 官方脚手架），输入 y 并回车，确认安装 / 更新该工具
1.3 初始化Astro项目
- 工具安装完成后，会自动调用启动 Astro 项目创建向导。
- 指定项目目录（dir）：输入自定义项目名（比如my-blog）后回车确认。（默认是在当前命令行所在路径下创建项目文件夹，也可以指定具体路径）
- 选择模板（tmpl）：通过上下方向键选中
blog template（博客模板），回车确认。 - 安装依赖（deps）：确认自动安装项目依赖
- 初始化 Git（git）：确认自动创建 Git 仓库，完成版本控制初始化。
1.4 启动Astro开发服务器测试
这样基础的博客模板就生成好了，命令行进入到博客目录下，输入pnpm run dev命令启动Astro开发服务器：
在浏览器输入 http://localhost:4321/ 访问博客，测试完成后，回到命令行Ctrl+C关闭服务器
2.Astro项目结构
打开前面创建的Astro博客根目录，我们通过这个例子来了解下Astro项目的文件结构。
关键的三个部分：
src/：放所有需要处理的源码。Astro 通过构建、压缩、处理这里的文件（页面、组件、样式等）创建最终传递到浏览器的网站。public/：放完全静态的资源。如某些图片和字体，或特殊文件（如robots.txt和manifest.webmanifest）等等。-
- 所谓完全静态指的是该资源的最终形态在网站构建前就已经确定，Astro在构建网站时，不会去转换、编译、打包或优化这些文件和资源。
- 这个文件夹中的文件将会被原封不动地复制到构建文件夹中，也就是直接复制到Astro最终生成的网站目录中。
src/pages/：放页面文件，决定网站页面路径。-
- Astro 使用基于文件的路由，它根据项目
src/pages目录中的文件结构来生成你的构建链接。Astro路由 | Docs
- Astro 使用基于文件的路由，它根据项目
更多相关内容参考官方文档：Astro项目结构 | Docs
3.Astro博客主题模板推荐
前面，我们使用了Astro官方提供的最基础的博客模板搭建了一个Astro博客，主题相对比较简陋，接下来给大家推荐一些github上star比较多以及更新活跃的Astro博客主题模板。
- AstroPaper：非常简约、干净，页面结构简单，适合喜欢极简风格的博主。Lighthouse Score全满分，不足之处就是暂时没有侧边目录，长文章阅读起来体验不好。(官方仓库链接)
- Astro Cactus：和Paper一样也是简约风，Lighthouse Score全满分。(官方仓库链接)
- Astro Theme Pure：设计独特，一打开就有让人眼前一亮的感觉，在网站内容组织方面也比较新颖，Lighthouse Score全满分。(官方仓库链接)
- Fuwari：优雅美观，中规中矩，页面结构和大多数博客主题设计相似，文档比较简陋。(官方仓库链接)
- Firefly：基于Fuwari模板开发，做了创新升级，如双侧边栏、文章网格（多列）、瀑布流布局等，中文友好，文档丰富详细。(官方仓库链接)
4.Astro博客搭建最佳实践
4.1 Git版本管理
选定心仪的 Astro 博客主题后，后续需基于该主题仓库持续维护并个性化定制（DIY）自己的博客，此时版本控制的规范操作就尤为关键 —— 它能保障你后续顺利同步原仓库的更新，最大程度减少代码冲突，且在冲突不可避免时能够可控、高效地解决。接下来为你详细拆解具体的操作方法。
4.1.1 Fork主题仓库
首先Fork一下你选择的Astro博客主题仓库（这里我用的是Firefly）到自己的Github仓库：仓库名、描述可以自定义，只拷贝主分支。
然后再克隆到本地：
4.1.2 制定分支策略
核心原则：不要直接在 master 分支做自定义修改，让 master 分支纯粹用于跟踪原博客主题仓库的更新，自定义修改放在独立的开发分支中。
具体操作：
# 1. 创建专属的开发分支（比如叫 blog-dev），所有自定义修改都在这个分支做
git checkout -b blog-dev
# 2. 把本地的 blog-dev 分支推送到你的 Fork 仓库（后续提交都推到这个分支）
git push -u origin blog-dev
# 3. 查看本地分支和远程分支的关联状态（关联后，后续可以直接 git push）
git branch -vv
4.1.3 日常维护博客
平时修改博客内容、调整自定义配置等常规操作，全程在你的开发分支（如 blog-dev） 完成，master 分支保持 “干净”（仅用于跟踪原仓库更新），避免日常操作污染主分支。
# 1. 确保当前在开发分支（每次操作前先确认，避免切错分支）
git checkout blog-dev
# 2. 查看修改内容（可选，但建议做，确认只提交需要的修改）
git status
# 3. 将修改的文件加入暂存区
git add .
# 4. 提交修改（备注最好要清晰，方便后续追溯）
git commit -m "feat: 修改主页布局"
# 5. 推送到你的Fork仓库（把本地修改同步到GitHub）
git push
4.1.4 同步原主题仓库更新
这是原主题作者发布更新（如修复 Bug、新增功能）后，你需要把这些更新同步到自己仓库的操作，核心是 “先更新干净的 master 分支，再合并到开发分支”。
GitHub 网页端同步你的 Fork 仓库（更新 master 分支）：
- 当原仓库有更新后，你的Fork 仓库会有如下图所示提示
- 点击 Sync fork > Update branch 同步更新
先让 master 分支同步原仓库最新代码，再将更新合并到你的 blog-dev 分支，冲突只在「开发分支」解决，不影响主分支。
步骤 1：更新本地 master 分支
# 1. 切到master分支
git checkout master
# 2. 拉取Fork仓库更新
git pull
步骤 2：合并到你的开发分支
# 1. 切回开发分支
git checkout blog-dev
# 2. 合并更新后的 master 分支到开发分支
git merge master
# 3. 若有冲突，本地解决后提交
git add . # 标记冲突文件已解决
git commit -m "merge: 同步主题更新，解决xxx文件冲突"
git push
4.1.5 私有化仓库
对于不想公开自己的博客仓库、希望将其设置为私有化的博主来说，由于 GitHub 上 fork 的仓库不支持直接设为私有，我们可按以下步骤操作：首先点击「Leave fork network」，脱离原 fork 网络；随后刷新页面，再点击「Change visibility」，将仓库可见性修改为私有。
脱离 fork 网络并将仓库设为私有后，无法再通过 GitHub 网页端直接同步原仓库的更新。
替代方案：你可以在本地仓库中，手动添加原仓库作为 “上游仓库”，通过 Git 命令行拉取原仓库的更新，修改完成后再推送到自己的私有仓库，就能实现间接同步（全程需在本地操作，无法通过网页端完成）
初始设置（只需做一次）：
# 切换到master分支
git checkout master
# 添加上游仓库
git remote add upstream https://github.com/原始作者/原始仓库名.git
# 检查
git remote -v
同步更新（以后每次都这样操作）：
# 切换到master分支
git checkout master
# 从上游仓库主分支拉取最新代码
git pull upstream master
# 推送到你的私有仓库
git push
最后再按照前文的教程，将更新合并到你的开发分支即可。
4.2 配置与DIY博客
0.首次拉取主题仓库到本地后，需要先安装依赖：
# 安装项目依赖
pnpm install
1.在本地启动开发服务器，在浏览器中实时预览博客效果。
运行以下命令启动开发服务器：
pnpm dev
博客将在 http://localhost:4321 可用。
2.对照所选博客主题的官方文档，修改对应配置文件。
3.根据预览结果，逐项调整、测试配置，直到效果符合预期。
这个过程的技术门槛并不高，需要投入一定耐心 —— 逐一测试每个配置项对应的视觉 / 功能效果，明确不同参数修改后会影响博客的哪个具体部分（比如站点标题、导航栏样式、文章排版、侧边栏组件、评论模块等）。
不过有了前文提到的 Astro 开发服务器自带的热更新（HMR）能力，在这个测试调整阶段能极大提升效率。你对配置文件的每一处修改都会即时同步到浏览器的预览页面中，无需手动刷新页面，也不用重启开发服务器，让你能快速验证每一项配置的效果，大幅缩短调试周期。
4.3 写文章
不同博客主题，文章存放位置略有不同，具体要查看主题文档，比如Firefly主题的文章文件放在 src/content/posts/ 目录中。
另外文章Frontmatter字段的设定也不一样，我们只需要依据主题官方文档来配置即可。
更多内容查阅官方文档： Astro 中的 Markdown | Docs
4.4 构建与预览网站
首先执行构建命令：
pnpm build
- Astro 会把你的网站打包成可直接上线的版本，放在Astro项目根目录的
dist/文件夹里，打包进度会在终端里显示。 - 打包过程中会自动检查项目里的各类错误，帮你在正式上线前及时发现问题；如果你的 TypeScript 开启了
strict或strictest严格模式，打包时还会额外检查代码的类型错误。
构建完成后，你可以在终端执行预览命令：
pnpm preview
执行后就能在本地浏览器中预览已构建好的网站。需要注意的是，预览展示的是你最后一次执行 pnpm build 时的网站状态—— 如果在打包后修改了代码，这些改动不会立刻出现在预览中，必须重新运行 pnpm build 打包，才能看到最新的修改效果。
若要退出预览模式，可按下 Ctrl + C 终止预览进程，随后在终端执行其他命令（例如重启开发服务器）即可回到开发模式。开发模式下，你的代码修改会实时同步到预览窗口，无需重复构建。
4.5 Vercel 部署
Astro部署方案有很多，具体参考官方文档：部署你的 Astro 站点 | Docs
- 这里我选择Vercel，主要是Vercel原生支持Astro项目，不需要复杂的配置，只需要导入你的Astro项目仓库即可。
- 另外部署在Vercel的站点实测国内访问速度会比部署在Cloudflare Pages快一些，这也是我选择它的一个重要原因。
4.5.1 创建与部署项目
首先，前往Vercel官网注册账号，然后创建一个新项目：
授权你的Github账户，导入你的Astro博客仓库：
Vercel自动识别出了Astro项目，帮我们做好了部署配置，无需任何修改，直接点击Deploy
- 这里Vercel导入项目就直接强制执行一次部署，而且部署分支是默认的，在这时还不能改，这个设定有点难绷。。。
- 而我们前文指定了master分支是用来跟踪主题更新的，blog-dev才是我们博客源码所在的分支，所以得等它部署执行完后，我们要把Vercel项目的部署分支设置为blog-dev。
打开项目设置>Environments>Production，将分支修改过来后点击保存
这样我们的Vercel项目跟踪的就是blog-dev分支，每次推送到该分支的提交，Vercel都会自动帮我们创建一个生产部署（也就是自动更新我们线上的博客）。
所以，我们后续只需要再往blog-dev分支推送一次新的提交，就可以触发Vercel项目的自动部署。
自动部署未触发时，可检查提交作者的邮箱是否与你的 Vercel 账户邮箱一致（若通过 GitHub 登录，则需匹配关联的 GitHub 账号邮箱）。
# 检查
git config --global user.email
#修改为正确的邮箱
git config --global user.email "xxx@xxx.com"
4.5.2 自定义域名
部署成功后，就可以通过Vercel分配的域名xxxx.vercel.app访问你的博客了，但是国内需要魔法才能访问，因为vercel.app域名被屏蔽掉了。
绑定自己的域名后，国内才能不开魔法直接访问，另外有了域名后，还可以通过优选IP，再提升国内访问速度与稳定性。
如果你还没有域名，可以通过性价比很高的 NameSilo 注册：
2026 年 NameSilo 域名购买与使用全流程 | 晚阳 Crown
域名注册好后，推荐免费托管到 Cloudflare 来管理解析：
Cloudflare 托管域名 | 晚阳 Crown （注意：这里托管到Cloudflare不要开启Cloudflare的CDN，因为我们要走Vercel自己的CDN。）
点击Add Existing添加自定义域名：
输入完整域名后，点击保存：
然后点击自动配置：
会自动跳到Cloudflare添加记录，非常方便，点击授权即可
等待记录生效后，就可以通过你的自定义域名访问站点了。
4.5.3 优选IP提速
这里我们使用这个项目提供的优选IP：GitHub - xingpingcn/enhanced-FaaS-in-China 在Cloudflare上把 cname 记录值改为：vercel-cname.xingpingcn.top即可。
通过炸了么 - 网站测速，晚高峰（22点多）实测如图所示：表现还是非常不错的
（本文完）
💬 如有疑问或不同见解，欢迎留言交流。
关于更新
本文后续如有修正或内容补充分享，将仅在我的个人博客保持更新。欢迎收藏访问，获取最新版本及更多技术干货。
🔗 本文永久链接：Astro博客搭建全攻略：性能+SEO双拉满 - 晚阳Crown
🏠 博客首页：晚阳Crown的博客
感谢阅读，我们下篇见！
