准备工作#

1
cd {你的项目文件路径}
2

3
例如（注意是 “/” 而不是 “\” ）：
4
cd F:/Projects/IDE_projects/MizukiMaster

1
git init
2
git commit -m "first commit"
3
git branch -M main
4
git remote add origin {你的仓库地址}
5
git push -u origin main

本地编辑#

认识项目基本架构与编辑项目内容

1. 通过VSCode打开项目所在文件夹
2. 了解下列目录作用，注意：图片路径可以自行添加文件夹

1
src/
2
├── content/
3
│   ├── posts/              # 博客文章 (Markdown)
4
│   │   ├── *.md            # 单文件形式文章
5
│   │   └── guide/          # 文件夹形式文章
6
│   └── spec/               # 特殊页面
7
│       ├── about.md        # 关于页面
8
│       └── friends.md      # 友链页面
9
└── data/                   # 结构化数据
10
    ├── anime.ts            # 番剧数据
11
    ├── devices.ts          # 设备数据
12
    ├── diary.ts            # 日记数据
13
    ├── friends.ts          # 日记数据
14
    ├── projects.ts         # 项目展示
15
    ├── skills.ts           # 技能数据
16
    └── timeline.ts         # 时间线
17

18
public/
19
├── assets/
20
│   ├── anime/              #本地加载的动漫界面图片
21
│   ├── desktop-banner/     #电脑模式下主页显示图片
22
│   ├── font/               #字体
23
│   ├── home/               #主页图片
24
│   ├── mobile-banner/      #移动端主页显示的图片
25
│   ├── music/
26
│   │   ├── cover/          #本地加载音乐时，音乐封面
27
│   │   └── url/            #本地加载音乐时，音乐文件
28
│   └── projects/           #项目图片
29
├── favicon/                #标签栏图片
30
├── images/
31
│   ├── albums/             #相册图片
32
│   │   ├── AcgExample/
33
│   ├── device/             #设备图片
34
│   └── diary/              #日记图片
35
└── pio/models/pio/         #看板娘模型文件
36
    ├── motions/
37
    └── textures/

2. src\config.ts文件为配置文件，可以在此处进行页面配置，此文件包注释，根据实际需求按照注释内容修改即可

1
    // 特色页面开关配置（关闭未使用的页面有助于提升 SEO，关闭后请记得在 navbarConfig 中移除对应链接）
2
    featurePages: {
3
        anime: true, // 番剧页面开关
4
        diary: true, // 日记页面开关
5
        friends: true, // 友链页面开关
6
        projects: false, // 项目页面开关
7
        skills: false, // 技能页面开关
8
        timeline: false, // 时间线页面开关
9
        albums: false, // 相册页面开关
10
        devices: false, // 设备页面开关
11
    },

3. 文章内容为Markdown格式，您可以通过下列编辑器快速编辑，教程使用Obsidian进行演示
   1. Obsidian - 免费
   2. Typora - 付费
   3. VSCode+ Markdown All in One插件 -免费
   4. 或是其它您已经在使用的编辑器

Markdown编辑器可以给您提供更为优秀的界面显示

4. 网站内对文章的编写有一定的要求，您需要在文章的开头加上“文章属性”，文章属性的添加通过”---“（三个减号）进行添加，其中下列属性必须添加

1
title           #标题
2
tags            #标签
3
description     #介绍
4
category        #分类
5
published       #发布时间

1
---
2
title: My First Blog Post
3
published: 2026-04-01
4
description: This is the first post of my new Astro blog.
5
image: ./cover.jpg
6
tags: [Foo, Bar]
7
category: Front-end
8
draft: false
9
---

5. 您也可以在文件提供的示例中查看编写方式

1
draft           #是否为草稿
2
image           #封面图片
3
licenseName     #许可证名称
4
author          #作者
5
sourceLink      #该帖子内容的来源链接或参考资料

6. 博客模板是使用 Astro 构建的。对于教程中未提及的其他事项，您可以在 Astro 文档 中找到答案。
7. 编辑.gitigrone文件，确保不需要上传的文件或文件夹被忽略

若您使用了Obsidian进行文章的编辑，Obsidian会自动在目录下创建.obsidian文件夹

1
# 忽略所有的.obsidian文件夹
2
.obsidian/

8. 若您配置完成了Git，则使用Git可快速将您的项目文件提交到云端仓库
   1. 点击Git按钮
   2. 输入所需提交内容的简要介绍
   3. 点击提交按钮
   4. 点击“同步更改X个“
   5. 之后您的项目文件皆可以通过这种方式将文件保存到云端仓库

本地部署#

本地部署有助于您快速预览项目

1. 安装node.js
2. 按下“Win+X”，选择“终端（Windows PowerShell）”并打开后输入

1
npm install
2

3
pnpm install

3. 在“命令提示符”中输入以下命令确定是否正确安装并被识别

1
npm -v
2

3
pnpm -v

4. 输入cd {你的项目路径}后回车

1
cd F:\Projects\IDE_projects\MizukiProject

5. 确保此时已经进入项目文件夹
6. 使用pnpm dev以开发环境运行项目（较快进入项目，但显示的页面为开发页面，并非实际部署在服务器上的页面）
7. 输入pnpm build来进行生产环境的构建，运行完成后，项目中会创建一个dist文件夹
8. 输入pnpm preview 启动一个本地服务器预览（浏览实际显示的页面）
9. 您可以把dist文件夹上传到各种你希望部署的平台
10. 按下Ctrl+C来结束项目的运行

1
例如
2
D:\Tools\nodejs\node_global\node_modules\

云端部署#

在您每次提交仓库后，下列工具都会自动重新部署您的网页

1. 可以使用下列工具部署，教程使用EdgeOne进行演示

   1. Vercel
   2. Cloudflare Pages
   3. EdgeOne

2. 首次登录账号，点击“创建项目”，选择“通过Git仓库创建”

3. 链接Git仓库后，选择你需要部署的分支，一般是main或master

4. 加速区域选择：全球可用区（不含中国大陆）

5. 请按照如下规则填写

   1. 框架预设：选择 “Astro” 或 “静态网站”
   2. 编译命令：修改为 pnpm i && pnpm build
   3. 输出目录：设置为 dist
   4. Node.js 版本：建议选择 18.x 或更高版本

6. 部署完成后，网页会自动给你提供一个域名进行访问

7. 可以在网页的“项目设置”中，修改项目信息

8. 快打开看看吧

个人域名的申请与使用#

需要支付一定的费用

1. 您可以通过百度云、腾讯云、阿里云来申请一个域名，需要实名认证，教程使用腾讯云演示。

2. 在各个官网的搜索栏，搜索”域名注册“

3. 选择一个便宜的就行，注意续费价格（有的域名首年便宜，但续费价格高，如图）

4. 购买完成后，返回“控制台”，并选择“域名注册-我的域名”可以查看到已购买的域名

5. 打开EdgeOne控制台（用的什么搭建，就打开哪个平台的控制台）

6. 点击“域名管理-添加自定义域名“，填写一个带有主机记录的域名地址，例如：example.reclock55.com，其中reclock55.com为购买的域名

7. 点击“下一步”后，网站会要求验证“域名归属权“

8. 在“域名控制台-我的域名”处点击添加“解析”

9. 按照要求填写对应数据后点击确定

10. 再点击“新建”，按照以下方式填写

    1. 主机记录：你的自定义前缀
    2. 记录类型：CNAME
    3. 记录值：先随便填一个

11. 回到EdgeOne页面，点击“验证”，此时应该显示验证完成

12. 随后，网页会给你提供一个主机地址

13. 找到新建的解析将主机地址改为EdgeOne提供的地址，等待一小段时间后，网站就能正常通过自定义域名访问

添加SSL证书#

可能会遇到以下情况
您的连接不是私密连接，攻击者可能会试图从 example.xxx 窃取您的信息（例如：密码、消息或信用卡信息）

1. 在注册域名的平台，搜索“SSL证书“，教程使用腾讯云演示

2. 选择“申请免费证书”

3. “证书绑定域名”处填写自定义域名

请尽量选择注册域名时选择的服务商来申请，可以省去很多麻烦

4. 提交申请后，网站会提示“添加解析记录”，在“域名控制台”处填写对应的解析记录（腾讯云购买会自动填写）

5. 需要等待一段时间，可以选择“自动续费”来避免证书过期

6. 在“SSL证书”界面，点击对应证书后的“部署”页面，选择“边缘安全加速平台EO”，并选择自定义域名

7. 若是通过其它平台申请的证书，在”EdgeOne“控制台-域名管理-HTTPS配置”处点击“配置”

8. 选择“申请免费证书“或者“使用SSL托管证书”按照要求配置后，点击保存

9. 等待一段时间后，再次访问网站，发现“不安全“提示消失

参考资料#

Mizuki文档
EdgeOne文档
Astro 文档