选择的框架：Astro#

Astro 是一个现代化的静态网站生成器，非常适合构建博客、文档站等以内容为中心的网站。它的核心优势是加载速度快、SEO 友好，并且支持在 Markdown 文章中嵌入多种 UI 框架组件。

选择的主题：Mizuki#

Mizuki 是基于 Astro 的一款功能丰富的博客主题，界面采用 Material Design 3 风格。它内置了暗色模式、搜索、评论、追番、友链、音乐播放器等众多功能，可以帮助你快速搭建一个完整的个人博客。

准备环境#

在开始之前，请确保你的电脑上已安装以下工具：

第一步：下载 ZIP 包#

1. 访问 nodejs.org
2. 点击 “Download” → 选择 “Prebuilt Binaries”
3. 选择对应的系统版本：
   • 操作系统：Windows
   • 架构：64-bit 或 32-bit
   • 文件格式：.zip
4. 推荐下载 LTS（长期支持）版本

第二步：解压到指定目录#

1. 将下载的 .zip 文件解压到你想要的目录，例如： D:\nodejs

2. 解压后的目录结构类似：

1
D:\nodejs\
2
├── node.exe
3
├── npm.cmd
4
├── node_modules\
5
└── ...

注意：解压路径中不要包含中文、空格或特殊字符，避免后续出现问题。

第三步：配置系统环境变量#

这一步是为了让系统在任意位置都能识别 node 和 npm 命令。

1
node -v
2
npm -v

安装 pnpm#

在终端中执行以下命令进行全局安装：

1
npm install -g pnpm

安装完成后，验证 pnpm 是否安装成功：

1
pnpm -v

如果显示版本号，说明安装成功。

安装 Git#

访问 Git 官网，下载适合你操作系统的安装包

双击安装包，一路保持默认选项即可

安装完成后，验证 Git 是否安装成功：

1
git --version

如果显示版本号，说明安装成功。

第一步：克隆 Mizuki 主题#

在终端中执行以下命令：

1
# 克隆主题到本地
2
git clone https://github.com/LyraVoid/Mizuki.git
3

4
# 进入项目目录
5
cd Mizuki

第二步：安装依赖#

1
pnpm install

第三步：启动开发服务器#

1
pnpm dev

启动成功后，在浏览器中打开 http://localhost:3000 ，你就能看到 Mizuki 主题的默认界面了。

第一步：在 GitHub 上创建仓库#

1. 登录 GitHub
2. 点击右上角 ”+” → “New repository”
3. 填写仓库信息：

4. 点击 “Create repository”

第二步：初始化本地 Git 仓库#

在项目根目录打开终端，执行以下命令：

1
# 初始化 Git
2
git init

1
# 查看当前状态
2
git status

第三步：添加远程仓库#

复制 GitHub 仓库的地址，执行以下命令：

1
# 添加远程仓库（替换成你自己的仓库地址）
2
git remote add origin 你的仓库地址
3
# 查看远程仓库是否添加成功
4
git remote -v

第四步：添加并提交文件#

1
# 添加所有文件到暂存区
2
git add .
3
# 提交文件（-m 后面是提交说明）
4
git commit -m "初始化博客"

第五步：推送到 GitHub#

1
# 首次推送（-u 关联本地和远程分支）
2
git push -u origin main

第六步：登录 Cloudflare Pages#

1. 访问 cloudflare.com
2. 点击 登录（没有账号先注册）

第七步：进入 Pages#

1. 登录后，左侧菜单点击 “Workers & Pages”
2. 点击 “创建应用程序” 按钮
3. 点击底部的 “Pages” 选项卡

第八步：连接 GitHub#

1. 点击 “连接到 GitHub”
2. 授权 Cloudflare 访问你的 GitHub 账号
3. 选择你的博客仓库
4. 点击 “开始设置”

第九步：配置构建设置#

在构建设置页面，填写以下信息：

如果下拉菜单中没有 Astro，选择”无”，然后手动填写构建命令和输出目录。

第十步：点击”保存并部署”#

等待 1-3 分钟，部署完成后会显示：

部署成功！

你的项目已上线：https://NiChengya.pages.dev

第十一步：更新 siteURL#

部署完成后，回到本地项目，修改 src/config/siteConfig.ts：

1
// 修改前
2
siteURL: "http://localhost:4321/",
3

4
// 修改后（替换为你的 Cloudflare 地址）
5
siteURL: "https://NiChengya.pages.dev/",

然后提交并推送：

1
git add .
2
git commit -m "更新 siteURL 为 Cloudflare Pages 地址"
3
git push

Cloudflare Pages 会自动重新部署。

部署成功标志

访问 https://NiChengya.pages.dev 就能能看到博客

每次 git push 自动重新部署

一点小建议#

• 遇到报错不要慌：复制错误信息去搜索，问AI，大部分问题都能找到答案
• 善用官方文档：Mizuki 和 Astro 的文档都很详细，遇到配置问题优先查文档
• 多备份：修改配置前记得备份原文件，方便回滚

后续可以继续优化的方向#

• 写更多技术文章，丰富博客内容
• 优化主题样式，增加个性化元素

博客搭建只是一个开始，持续写作才是更重要的事。

希望这篇记录能对你有所帮助，如果遇到问题，欢迎在评论区交流讨论！😊