注意 现在本站用的不是Mizuki了 是Halo了 下面的内容请理性观看

准备工作

  • 一个好用的大脑

  • 一个 Edgeone 账号（要求有 EO 套餐）

  • 一个好用的域名

  • Git：版本控制器，用于操作代码仓库

  • Node.js：Mizuki 基于 Node.js，需安装此环境

  • 一个Github账号：用于存放代码仓库

  • MarkText：可视化 MarkDown 编辑器（用于编写文章）

  • 基本的 MarkDown 语法知识（可参考Markdown 基本语法）

开始～

首先本站用的是Mizuki，Mizuki 是基于 Fuwari 主题的Astro 框架

1. 调整 EO

打开腾讯云的官网 然后在搜索框里搜索 EO

image-20250913194459853.webp

image

点击立即使用的按钮，没有登录的话需要登录，登录后进入如下界面：

image

然后点击 Pages 按钮

image

暂时先将 EO 放在一边，先处理本地项目。

2. 把 Mizuki 弄到本地并关联 Github

在桌面创建一个文件夹：

image

点击地址栏，输入 CMD：

image

打开后界面如下：

image

安装必要工具

安装 npm

如果已安装 npm，跳过此步骤。访问 Node.js 官网 下载并安装最新 LTS 版本。安装完成后，验证是否成功：

node -v
npm -v

显示版本号即为成功。

安装 pnpm

如果已安装 pnpm，跳过此步骤。通过 npm 安装：

npm install -g pnpm

验证：

pnpm -v

显示版本号即为成功。

安装 Git

如果已安装 Git，跳过此步骤。访问 Git 官网 下载并安装对应版本。验证：

git --version

显示版本号即为成功。

操作步骤

1.Fork 并克隆仓库到本地

  • 首先访问 Mizuki 仓库，点击 Fork 将仓库复制到自己的 Github 账号下。

  • 克隆到本地（推荐使用 SSH 链接，可避免部分网络问题）：

git clone <你的Fork仓库SSH地址>
cd mizuki

2. 配置 Git 信息

git config --global user.name "你的Github用户名"
git config --global user.email "你的Github邮箱"

（如果已配置过 Git 全局信息，可跳过）

3. 安装依赖

pnpm install

4. 修改博客配置

编辑 src/config.ts 文件自定义博客设置：

  • 更新站点信息、主题颜色、横幅图片和社交链接

  • 配置翻译设置和特殊页面功能

  • 可参考以下配置项进行修改（以示例为例）：

import type { SiteConfig, NavBarConfig, ProfileConfig } from './types/config'
export const siteConfig: SiteConfig = {
  title: '你的博客标题',
  subtitle: '你的博客副标题',
  lang: 'zh_CN',
  themeColor: {
    hue: 355, // 主题色色调值
    fixed: false
  },
  // 其他配置...
}
// 导航栏和个人信息配置类似

5. 启动开发服务器预览

pnpm dev

启动后，在浏览器访问 http://localhost:4321 查看效果。

6. 撰写文章

创建新文章：

pnpm new-post 文章标题

文章会生成在 src/content/posts 目录下，用 MarkText 打开编辑。文章头部信息说明：

title: 文章标题
published: 发布日期
description: 文章描述
image: 封面图链接
tags: [标签1, 标签2]
category: 分类
draft: false # 是否为草稿
lang: ''

7. 构建网站

pnpm build

生成的静态文件会在 dist 目录中。

8. 推送代码到 Github

git add .
git commit -m "描述"
git push

3. 创建 EOPages

创建项目：

image

点击直接上传：

image

imageimage

等待上传部署完成后，点击添加自定义域名。

4.关联EOPages到你的Github并且自动构建

我们再创建一个新的项目：

选择这个

image-20250920171939347

这边可能要你关联一下你的github账号 你关联一下就好了 我这里已经关联好了 关联好了就是这个界面

image-20250920172214071

选择你刚刚Fork的仓库 EOpages会检测项目的类型 并且自动构建（EOpages会检测仓库的更新要是检测到有新的版本 就会自动构建！）

然后还是配置一下域名什么巴拉巴拉的最后就能上线了

4. 进阶功能

1. 怎么置顶文章？

在 markdown 开头添加 pinned: true（true 为置顶，false 为不置顶）：

image

5. 结尾

至此，你已经掌握了使用 EOPages 搭建 Mizuki 博客系统的方法，后续只需在本地编写文章，推送至 Github 后重新部署即可更新博客内容。

6. 更新日志

  • 2025-09-13 创建了这个文章

  • 2025-09-20 更新了关于怎么让EOPages关联到Github