Home
avatar

.𝙃𝙖𝙣

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

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

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

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

项目结构对比

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

迁移步骤详解

1. 初始化 Astro 项目

# 创建美妙的 Astro 项目
npm create astro@latest --template uxiaohan/vhAstro-Theme astro-blog
# 进入项目目录
cd astro-blog
# 安装依赖
npm install
# 本地预览
npm run dev

迁移文章内容

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

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

🎉 此时,你已成功迁移 Hexo 博客至 Astro 博客!

Vercel 自动部署

Vercel 一键部署

Cloudflare Pages 自动部署

Cloudflare Pages 一键部署

其他更多部署方式(简简单单闭眼部署),请参考 Astro 官方文档

迁移后性能对比

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

总结

迁移到 Astro 后,我的技术博客实现了:

  • ✅ 构建速度提升 2.4 倍
  • ✅ 页面性能评分全满分
  • ✅ 开发体验现代化
  • ✅ 扩展能力显著增强
Hexo Astro 静态博客 迁移