📖 一、简介#

==Astro-theme-Mizuki== 是一个基于Astro的现代化静态博客模板，具有丰富的功能和美观的设计，适合生活类博客、技术类博客、 或者是 知识库、系列文档 等搭建。(来源:(https://docs.mizuki.mysqil.com/guide/intro/))

🧰 二、环境准备(以我目前使用的环境配置为例)#

📦 三、宝塔的相关配置#

1.复制粘贴外网面板地址到浏览器中，输入用户名和密码即可进入宝塔面板主页面。 2.点击左侧数据库栏目，点击node项目，安装node版本管理器，下拉选择显示所有版本，并安装nodejs大于20的版本，我目前选择的是nodejs_v22.19.0。 3.刷新终端，使用node —version指令查看是否有输出，若输出node指令不存在，可自行在.bashrc文件底部加上相关环境变量。 4.在自己安装的node中点击模块，分别搜索astro和pnpm进行安装。(对照图中，没有哪个就搜对应名字安装即可)

📦 四、下载miziku项目文件#

1.可在终端输入如下指令

1
cd /www/wwwroot
2
git clone https://github.com/matsuzaka-yuki/Mizuki.git
3
cd Mizuki

或直接下载压缩包zip文件，解压文件到/www/wwwroot/Mizuki中。

2.修改首页配置，进入Mizuki项目根目录src文件夹，编辑config.ts，在SITE_LANG中选择需要的语言代码，我这里改成zh_CN中文。其他网页基础信息也是在这里修改，这里暂时不修改，后续有需要再修改

⚙️ 五、安装与建立#

1.终端进入/www/wwwroot/Mizuki路径，输入如下指令

1
pnpm install && pnpm build

目录下生成dist目录及相关文件，这是后续的网站目录的路径 2.宝塔面板，左侧栏目点击网站->PHP项目->添加站点，域名可选择与云服务器相同的公网ip加对应想要的端口号，例如1.2.3.4:88，php版本选纯静态，点击确定创建站点。 3.点击站点的设置，选择网站目录，网站目录路径修改为/www/wwwroot/Mizuki/dist，修改好后点击保存，显示更新成功。 4.使用设置的域名和端口号访问，看看是否可以正常连接网页 稍等一会儿，如果能正常访问，那么恭喜你大部分初始配置都已经完成了。

🛠️ 六、修改基础页面配置#

以下路径均相对于项目根目录路径/www/wwwroot/Mizuki/，配置文件为/config.ts

编辑：

1
src/config.ts

在这个文件中可进行大部分首页信息修改，相关图片路径修改，可自行了解和修改。

✍️ 七、各个功能板块#

• about-关于页面(about.md)
• friend links-友链(friend.ts)
• diary-日记
• projects-项目
• devices-设备
• albums-相册
• Posts-博客文章
• timeline-时间线
• skills-技能 编辑可参考官方项目:https://github.com/matsuzaka-yuki/Mizuki-Content 以下是相关功能板块目录，Mizuki-Content对应Mizuki的src中的相关目录，如content，data

1
Mizuki-Content/
2
├── posts/              # 博客文章 (Markdown)
3
│   ├── *.md            # 单文件形式文章
4
│   └── guide/          # 文件夹形式文章
5
├── spec/               # 特殊页面
6
│   ├── about.md        # 关于页面
7
│   └── friends.md      # 友链页面
8
├── data/               # 结构化数据
9
│   ├── anime.ts        # 番剧数据
10
│   ├── devices.ts      # 设备数据
11
│   ├── diary.ts        # 日记数据
12
│   ├── friends.ts      # 友链数据
13
│   ├── projects.ts     # 项目展示
14
│   ├── skills.ts       # 技能数据
15
│   └── timeline.ts     # 时间线
16
├── images/             # 图片资源
17
│   ├── posts/          # 文章配图
18
│   ├── albums/         # 相册图片
19
│   └── diary/          # 日记图片
20
└── .github/
21
    └── workflows/      # 自动构建触发器

这里推荐一个项目:https://github.com/DoublePigeon/Mizuki-Content-Manager 相关视频:【我制作了Mizuki博客的图形化管理器界面！-哔哩哔哩】 https://b23.tv/gxymhjK 可以较为方便管理更新mizuki相关板块内容

✍️八.后续的网站编辑与发布#

主要指令: 热更新

1
pnpm dev

和 重建

1
pnpm build

(或者npm run dev和npm run build)，注意这个指令要在项目根目录上执行。 一般情况下，直接在配置文件修改内容，访问对应ip加端口无法看到内容的修改，修改后实际需要使用上述的build指令才能使得修改全局生效。 dev指令是一种热更新网页的方式，其会创建一个本地端口文件，能够实时刷新接收修改，但是实际上发布的网站版本暂未更新，仍需要使用build进行最终更新。

🎉 恭喜，进行到这一步，你已经学会mizuki的部署和基础操作了!当然你可能会思考:用ip访问地址是不是太复杂了，因为都是没有规律的数字，记不住，为了解决这个问题，让我们下回分解。#