修改文档✅
This commit is contained in:
Han
parent
a2d19f5045
commit
a87c93acd6
28
README.md
28
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` 配置文件去自定义博客。<br> 此时，你已成功迁移 Hexo 博客至 Astro 博客！
|
||||
|
||||
### 自动部署
|
||||
|
||||
**Vercel 部署：**
|
||||
### Vercel 自动部署
|
||||
|
||||
[](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` 配置文件去自定义博客。<br>⚠️ `Hexo` 的部署、使用、自动化部署等方法 完全适用于 `Astro` 博客！<br>🎉 此时，你已成功迁移 Hexo 博客至 Astro 博客！
|
||||
|
||||
## 🍬 特色页面
|
||||
|
||||
### 友情链接
|
||||
|
||||
@ -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)"
|
||||
|
||||
@ -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` 配置文件去自定义博客。<br> 此时，你已成功迁移 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
|
||||
|
||||
|
||||
@ -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 组件
|
||||
|
||||
|
||||
73
src/content/blog/从Hexo到Astro博客1分钟迁移指南.md
Normal file
73
src/content/blog/从Hexo到Astro博客1分钟迁移指南.md
Normal file
@ -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 倍
|
||||
- ✅ 页面性能评分全满分
|
||||
- ✅ 开发体验现代化
|
||||
- ✅ 扩展能力显著增强
|
||||
Loading…
x
Reference in New Issue
Block a user