diff --git a/README.md b/README.md index 5bb4106..97b56fc 100644 --- a/README.md +++ b/README.md @@ -60,27 +60,21 @@ - 执行 pnpm newpost '文章标题' 创建新文章，并在 src/content/posts/ 目录中编辑 - 参考官方指南将博客部署至 Vercel, Netlify,Cloudflare Pages, GitHub Pages 等 -### ⚠️ Hexo 迁移 Astro 方法 - -> `Hexo` 的部署、使用、自动化部署等方法 完全适用于 `Astro`，只需要将 `Hexo` 博客的 `src/_posts/` 目录下的文章文件迁移至 `Astro` 目录下的 `src/content/blog/` 目录下即可，然后自定义 `src/config.ts` 配置文件去自定义博客。
此时，你已成功迁移 Hexo 博客至 Astro 博客！ - -### 自动部署 - -**Vercel 部署：** +### Vercel 自动部署 [![vhAstro-Theme](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/uxiaohan/vhAstro-Theme) ### 使用命令拉取模板 ```bash -# pnpm -pnpm create astro@latest --template uxiaohan/vhAstro-Theme - -# yarn -yarn create astro --template uxiaohan/vhAstro-Theme - -# npm -npm create astro@latest -- --template uxiaohan/vhAstro-Theme +# 使用 pnpm +pnpm create astro@latest --template uxiaohan/vhAstro-Theme astro-blog +# 或者 yarn +yarn create astro --template uxiaohan/vhAstro-Theme astro-blog +# 或者 npm +npm create astro@latest -- --template uxiaohan/vhAstro-Theme astro-blog +# 进入项目目录 +cd astro-blog ``` ### 本地开发 @@ -96,6 +90,10 @@ pnpm build pnpm newpost '文章标题' ``` +### ⚠️ Hexo 迁移 Astro 方法 + +> 将 `Hexo` 博客的 `src/_posts/` 目录下的文章文件，复制到 `Astro` 的 `src/content/blog/` 目录下即可，然后自定义 `src/config.ts` 配置文件去自定义博客。
⚠️ `Hexo` 的部署、使用、自动化部署等方法 完全适用于 `Astro` 博客！
🎉 此时，你已成功迁移 Hexo 博客至 Astro 博客！ + ## 🍬 特色页面 ### 友情链接 diff --git a/script/newpost.js b/script/newpost.js index 919f8b4..6323db1 100644 --- a/script/newpost.js +++ b/script/newpost.js @@ -15,8 +15,7 @@ if (!articleName) { const ArticleContent = `--- title: "${articleName.replace(/"/g, '\\"')}" categories: 分类 -tags: - - 标签 +tags: ['标签'] id: "${articleID.slice(0, 16)}" date: ${dayjs().format('YYYY-MM-DD HH:mm:ss')} cover: "封面图URL (为空默认随机内置封面 /public/assets/images/banner)" diff --git a/src/content/blog/Astro主题优雅的vhAstro-Theme.md b/src/content/blog/Astro主题优雅的vhAstro-Theme.md index 745aa31..fcd26ac 100644 --- a/src/content/blog/Astro主题优雅的vhAstro-Theme.md +++ b/src/content/blog/Astro主题优雅的vhAstro-Theme.md @@ -68,42 +68,35 @@ top: true ## 🚀 使用方法 +### 使用 Github 模板 + - 使用此模板 [生成新仓库或 Fork 此仓库](https://github.com/new?template_name=vhAstro-Theme&template_owner=uxiaohan) - 进行本地开发，Clone 新的仓库，执行 `pnpm install` 以安装依赖 -- 若未安装 pnpm，执行 `npm install -g pnpm` +- 若未安装 [pnpm](https://pnpm.io)，执行 `npm install -g pnpm` - 通过配置文件 `src/config.ts` 自定义博客 - 执行 pnpm newpost '文章标题' 创建新文章，并在 src/content/posts/ 目录中编辑 - 参考官方指南将博客部署至 Vercel, Netlify,Cloudflare Pages, GitHub Pages 等 -- 部署前需编辑 `astro.config.mjs` 中的站点设置。 -### ⚠️ Hexo 迁移 Astro 方法 +### Vercel 自动部署 -> `Hexo` 的部署、使用、自动化部署等方法 完全适用于 `Astro`，只需要将 `Hexo` 博客的 `src/_posts/` 目录下的文章文件迁移至 `Astro` 目录下的 `src/content/blog/` 目录下即可，然后自定义 `src/config.ts` 配置文件去自定义博客。
此时，你已成功迁移 Hexo 博客至 Astro 博客！ +::btn[Vercel 一键部署]{link="https://vercel.com/new/clone?repository-url=https://github.com/uxiaohan/vhAstro-Theme"} +其他更多部署方式（简简单单闭眼部署），请参考 [Astro 官方文档](https://docs.astro.build/en/guides/integrations-guide/cloudflare/)。 -## 📄 文章格式 +### 使用命令拉取模板 -```md ---- -title: 标题 -categories: 分类 -tags: - - 标签1 - - 标签2 -id: 文章ID -date: 文章创建日期 -updated: 文章更新日期 -cover: "封面图URL (为空默认随机内置封面 /public/assets/images/banner)" -recommend: false # 是否推荐文章 -top: false # 是否置顶文章 -hide: false # 是否隐藏文章 - -type: "links" # 页面类型 -comment: false # 关闭页面评论（默认开启） ---- +```bash +# 使用 pnpm +pnpm create astro@latest --template uxiaohan/vhAstro-Theme astro-blog +# 或者 yarn +yarn create astro --template uxiaohan/vhAstro-Theme astro-blog +# 或者 npm +npm create astro@latest -- --template uxiaohan/vhAstro-Theme astro-blog +# 进入项目目录 +cd astro-blog ``` -## 💻 命令 +### 本地开发 ```bash # 安装依赖 @@ -116,6 +109,16 @@ pnpm build pnpm newpost '文章标题' ``` +### ⚠️ Hexo 迁移 Astro 方法 + +:::note{type="success"} +将 `Hexo` 博客的 `src/_posts/` 目录下的文章文件，复制到 `Astro` 的 `src/content/blog/` 目录下即可，然后自定义 `src/config.ts` 配置文件去自定义博客。 + +⚠️ `Hexo` 的部署、使用、自动化部署等方法 完全适用于 `Astro` 博客！ + +🎉 此时，你已成功迁移 Hexo 博客至 Astro 博客！ +::: + ## 🍬 特色页面 ### 友情链接 @@ -201,6 +204,29 @@ export default { } ``` +## 📄 文章格式 + +```md +--- +title: 标题 +categories: 分类 +tags: + - 标签1 + - 标签2 +id: 文章ID +date: 文章创建日期 +updated: 文章更新日期 +cover: "封面图URL (为空默认随机内置封面 /public/assets/images/banner)" +recommend: false # 是否推荐文章 +top: false # 是否置顶文章 +hide: false # 是否隐藏文章 + +type: "links" # 页面类型 +comment: false # 关闭页面评论（默认开启） +--- +``` + + ## ✅ Lighthouse ![vhAstro-Theme-Lighthouse](https://uxiaohan.github.io/v2/2025/03/1742543844078.svg) @@ -628,9 +654,9 @@ $\cup$、$\cap$、$\in$、$\notin$、$\ni$、$\subset$、$\subseteq$、$\supset$ ::vhLivePhoto{photo="https://static.vvhan.com/img/2.webp" video="https://static.vvhan.com/img/2.mp4"} ``` -::vhLivePhoto{photo="/public/assets/livephoto/1.webp" video="/public/assets/livephoto/1.mp4" type="y"} +::vhLivePhoto{photo="/assets/livephoto/1.webp" video="/assets/livephoto/1.mp4" type="y"} -::vhLivePhoto{photo="/public/assets/livephoto/2.webp" video="/public/assets/livephoto/2.mp4"} +::vhLivePhoto{photo="/assets/livephoto/2.webp" video="/assets/livephoto/2.mp4"} ### Music 组件 diff --git a/src/content/blog/从Hexo到Astro博客1分钟迁移指南.md b/src/content/blog/从Hexo到Astro博客1分钟迁移指南.md new file mode 100644 index 0000000..d2accea --- /dev/null +++ b/src/content/blog/从Hexo到Astro博客1分钟迁移指南.md @@ -0,0 +1,73 @@ +--- +title: "从Hexo到Astro博客1分钟迁移指南" +categories: Share +tags: ["Hexo", "Astro", "静态博客", "迁移"] +id: "hexo-to-astro-1-minute-migration-guide" +date: 2025-04-07 17:20:46 +cover: "https://i0.wp.com/uxiaohan.github.io/v2/2025/04/1744018738123.webp" +--- + +:::note{type="info"} +🎉 本文将介绍如何将 Hexo 博客迁移到 Astro 博客，只需要 1 分钟即可完成！ + +作为 `Hexo` 的长期用户，我在 2024 年开始尝试 `Astro`，`Hexo` 基于模板引擎（EJS/Swig）的字符串拼接，而 `Astro` 采用基于 `Vite` 的组件化构建体系。`Hexo` 在 `hexo generate` 时完成全量渲染，`Astro` 在 `astro build` 时执行 `SSG`（静态站点生成）+ `ISR`（增量静态再生）。 + +`Astro` 的组件化架构、按需加载，构建速度、`Vite` 驱动，热更新速度快等现代化开发体验 深深吸引了我！ +::: + +### 项目结构对比 + +| Hexo | Astro | 说明 | +| ------------ | ---------------- | ------------ | +| \_config.yml | src/config.ts | 配置文件 | +| source | src/content/blog | 主内容目录 | +| themes | src/components | 组件目录 | +| public | public | 静态资源目录 | + +## 迁移步骤详解 + +### 1. 初始化 Astro 项目 + +```bash +# 创建美妙的 Astro 项目 +npm create astro@latest --template uxiaohan/vhAstro-Theme astro-blog +# 进入项目目录 +cd astro-blog +# 安装依赖 +npm install +# 本地预览 +npm run dev +``` + +### 迁移文章内容 + +:::note{type="success"} +将 `Hexo` 博客的 `src/_posts/` 目录下的文章文件，复制到 `Astro` 的 `src/content/blog/` 目录下即可，然后自定义 `src/config.ts` 配置文件去自定义博客。 + +⚠️ `Hexo` 的部署、使用、自动化部署等方法 完全适用于 `Astro` 博客！ + +🎉 此时，你已成功迁移 Hexo 博客至 Astro 博客！ +::: + +### Vercel 自动部署 + +::btn[Vercel 一键部署]{link="https://vercel.com/new/clone?repository-url=https://github.com/uxiaohan/vhAstro-Theme"} + +其他更多部署方式（简简单单闭眼部署），请参考 [Astro 官方文档](https://docs.astro.build/en/guides/integrations-guide/cloudflare/)。 + +### 迁移后性能对比 + +| 指标 | Hexo | Astro | 提升 | +| --------------- | ----- | ----- | ---- | +| 构建时间 | 12.3s | 5.1s | 58%↑ | +| Lighthouse 性能 | 89 | 100 | 12%↑ | +| 页面大小 | 145KB | 23KB | 84%↓ | + +### 总结 + +迁移到 Astro 后，我的技术博客实现了： + +- ✅ 构建速度提升 2.4 倍 +- ✅ 页面性能评分全满分 +- ✅ 开发体验现代化 +- ✅ 扩展能力显著增强