1. 安装 Node.js 和 npm#

• 访问 Node.js 官网 下载并安装最新的 LTS 版本，这将同时安装 Node.js 和 npm。

• 安装完成后，可以通过命令行输入以下命令来验证安装是否成功：

  1
  node -v
  2
  npm -v

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

2. 安装 pnpm#

• 您可以通过 npm 来安装 pnpm，打开命令行输入以下命令：

  1
  npm install -g pnpm

• 安装完成后，可以通过以下命令来验证 pnpm 是否安装成功：

  1
  pnpm -v

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

3. 安装 Git#

• 访问 Git 官网 下载并安装 Git。

• 安装完成后，可以通过命令行输入以下命令来验证安装是否成功：

  1
  git --version

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

1. 克隆博客模板#

• 导航到您想要存放博客项目的目录，例如：我直接把整个项目放在桌面上，那么于我而言，就是进入桌面目录：

  1
  cd D:/Desktop

• 使用 Git 克隆 Astro-theme-Mizuki 的模板仓库：

  1
  git clone https://github.com/matsuzaka-yuki/mizuki.git

• 进入克隆的项目目录，下文的所有指令都需要在该目录中进行：

  1
  cd Mizuki

2. 安装依赖#

• 使用 pnpm 安装项目所需的依赖包：

  1
  pnpm install

3. 配置博客#

根据自己的需求配置您的博客，详细的配置教程将在下文介绍。

4. 本地预览#

• 使用以下命令启动本地开发服务器：

  1
  pnpm dev

• 打开浏览器，访问 http://localhost:4321，您应该能够看到博客的默认界面。

5. 打包网站#

• 运行以下命令将网站打包成静态文件，生成到 dist 目录中：

  1
  pnpm build

生成的 dist 目录后续将可以部署到您自己的服务器上。

1. 创建 GitHub 仓库#

• 登录到 GitHub 并创建一个新的仓库。

• 将本地项目与 GitHub 仓库关联：

  1
  git remote add origin https://github.com/your-username/your-repo.git

• 将代码推送到 GitHub ：

  1
    git add .
  2
    git commit -m "提交信息"
  3
    git push -u origin main

有关 GitHub 的使用，请参阅：（我也不知道参阅哪里 先搁置吧

2. 配置 Cloudflare Pages#

1
# 构建设置
2
Build command: pnpm i && pnpm build
3
Build output directory: dist
4
Root directory: /

配置文件的查找与修改#

• 如果您使用vscode编辑项目，可以在左侧任务栏找到搜索框，输入关键词进行整个工作区目录下的相关查找。

• 也可以通过快捷键 ctrl + f 进行当前文件下的关键词查找。

更好的时间输入#

博客中很多地方需要输入时间，例如文章的发布时间、日记的日期等。

通过官方文档的介绍，我们可以知道，博客中使用的时间格式是 ISO 8601 格式，例如：2026-03-12T16:20:00Z。

这种格式虽然标准，但由于这个博客并没有自动化的时间输入工具（比如说日历选择器），因此我们的手动输入、修改显得繁琐且没必要。

因此，我尝试了 vscode 的 Insert Date String 扩展。

但是这个扩展的默认输出格式是 YYYY-MM-DD HH:mm:ss，并不符合我们博客的时间格式要求。

于是，我在 vscode 的设置中，手动将输出格式修改为 YYYY-MM-DDTHH:mm:ssZ。

然而，这个插件自动识别了时区，并在输出的时间字符串中加入了时区偏移，例如 2026-03-12T16:20:00+08。

这显然是我们不愿看到的，因为 通过配置 config.ts 中的 timeZone，我们已经自行选择了时区，因此我们需要将这个时区偏移手动修改为 Z，表示 UTC 时间。但是每次输入时间后都要修改一次时区，显然也是不合理的。

于是，我参考了自己先前打 acm 时候使用的， vscode 原生提供的 配置代码片段 功能，在惊喜的发现这个功能支持时间相关的预定义变量后，事情就变得简单了。

1. 使用组合键 ctrl + shift + p 打开命令面板，输入 Snippets: Configure Snippets (配置代码片段) 并选择它。

2. 选择 New Global Snippets file (新建代码片段) 来创建一个全局的代码片段文件，命名为 全局.code-snippets。

3. 在打开的 全局.code-snippets 文件中，添加以下代码片段：

1
"Insert ISO Z Date": {
2
  "scope": "typescript,markdown,mdx", // 只针对 TypeScript 和 Markdown 文件生效
3
  "prefix": "isodate",
4
  "body": [
5
    "${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}T${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}Z"
6
  ],
7
  "description": "插入当前 UTC 时间 (Z)"
8
}

此时，完整的文件内容大致如下：

保存文件后，您就可以在任何地方输入 isodate，然后按下 Tab 键，就会自动插入当前的 UTC 时间，格式为 YYYY-MM-DDTHH:mm:ssZ… 吗？

问题到此并没有结束，我发现在 markdown 文件中无法触发补全，而在 ts 文件中可以。

经过一番折腾，我发现这是因为 markdown 文件默认没有启用代码片段补全功能。

于是，我打开了 vscode 的设置，在右上角找到 Edit in settings.json (在 settings.json 中编辑) 的选项，点击它打开 settings.json 文件。

在文件中，我添加了关于 markdown 文件的代码片段补全配置：

1
"[markdown]": {
2
  "editor.quickSuggestions": {
3
    "other": "on",
4
    "comments": "on",
5
    "strings": "on"
6
  },
7
  "editor.snippetSuggestions": "top", // 让代码片段排在最前面
8
  "editor.tabCompletion": "on" // 允许按 Tab 键直接补全
9
}

问题终于解决了，现在在 markdown 文件中输入 isodate 并按下 Tab 键，正确格式的 UTC 时间就会被插入了…吗？？

仍然没有！在文章的表头中输入 isodate 并按下 Tab 键，竟然没有任何反应。

经过一番调查，我发现这是因为 markdown 文件的表头部分（也就是 --- 包围的部分）被 vscode 识别为 yaml 语言，而不是 markdown。…真是令人窒息。！

因此，我们回到 全局.code-snippets 文件中，将代码片段的 scope 属性增加一个 yaml，使其变为：

1
"scope": "typescript,markdown,mdx,yaml", // 现在也针对 yaml 文件生效

更新后的完整文件内容应如下：

请注意 29 行的更改

终于，我做到了，我可以随心所欲地在表头插入当前的 UTC 时间，而且格式完全符合博客的要求。我真想狠狠地吃掉一包放在旁边的香辣小鱼干来庆祝下！

评论功能的配置#

博客的评论功能是通过 Twikoo 实现的，您可以在 src/config.ts 文件中找到相关配置项:

1
export const commentConfig: CommentConfig = {
2
  enable: true, // 启用评论功能。当设置为 false 时，评论组件将不会显示在文章区域。
3
  twikoo: {
4
    envId: "...", // Twikoo 环境 ID，通常是一个 URL 地址。
5
    lang: SITE_LANG, // 评论界面语言设置，默认为站点语言。
6
  },
7
};

• enable: 设置为 true 启用评论功能，设置为 false 则禁用评论功能。
• envId: 这是 Twikoo 的环境 ID，通常是一个 URL 地址，您需要将其替换为您自己的 Twikoo 环境 ID。
• lang: 这是评论界面的语言设置，默认为站点语言，不动就行。

由是观之，我们操作的目的就是得到一个 以 .app 结尾的 URL 地址，并将其填入 envId 中。

我们可以直接访问 Vercel 部署 的教程来获取这个 ID 。

更多内容#

持续更新中…