从Hexo到Astro博客1分钟迁移指南

🎉 本文将介绍如何将 Hexo 博客迁移到 Astro 博客，只需要 1 分钟即可完成！

作为 Hexo 的长期用户，我在 2024 年开始尝试 Astro，Hexo 基于模板引擎（EJS/Swig）的字符串拼接，而 Astro 采用基于 Vite 的组件化构建体系。Hexo 在 hexo generate 时完成全量渲染，Astro 在 astro build 时执行 SSG（静态站点生成）+ ISR（增量静态再生）。

Astro 的组件化架构、按需加载，构建速度、Vite 驱动，热更新速度快等现代化开发体验 深深吸引了我！

项目结构对比

HexoAstro说明_config.ymlsrc/config.ts配置文件sourcesrc/content/blog主内容目录themessrc/components组件目录publicpublic静态资源目录迁移步骤详解

1. 初始化 Astro 项目

<pre data-language="bash" tabindex="0">```
# 创建美妙的 Astro 项目
npm create astro@latest --template uxiaohan/vhAstro-Theme astro-blog
# 进入项目目录
cd astro-blog
# 安装依赖
npm install
# 本地预览
npm run dev

### 迁移文章内容

将 `Hexo` 博客的 `src/_posts/` 目录下的文章文件，复制到 `Astro` 的 `src/content/blog/` 目录下即可，然后自定义 `src/config.ts` 配置文件去自定义博客。

⚠️ `Hexo` 的部署、使用、自动化部署等方法 完全适用于 `Astro` 博客！

🎉 此时，你已成功迁移 Hexo 博客至 Astro 博客！

### Vercel 自动部署

[Vercel 一键部署](https://vercel.com/new/clone?repository-url=https://github.com/uxiaohan/vhAstro-Theme)### Cloudflare Pages 自动部署

[Cloudflare Pages 一键部署](https://dash.cloudflare.com/?to=/:account/workers-and-pages/create/deploy-to-workers&repository=https://github.com/uxiaohan/vhAstro-Theme)其他更多部署方式（简简单单闭眼部署），请参考 [Astro 官方文档](https://docs.astro.build/en/guides/integrations-guide/cloudflare/)。

### 迁移后性能对比

指标HexoAstro提升构建时间12.3s5.1s58%↑Lighthouse 性能8910012%↑页面大小145KB23KB84%↓### 总结

迁移到 Astro 后，我的技术博客实现了：

✅ 构建速度提升 2.4 倍✅ 页面性能评分全满分✅ 开发体验现代化✅ 扩展能力显著增强
[ Hexo ](/tag/Hexo)[ Astro ](/tag/Astro)[ 静态博客 ](/tag/%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2)[ 迁移](/tag/%E8%BF%81%E7%A7%BB)