1. 环境依赖安装#

为了运行项目，我们首先安装了必要的软件和工具：

• Node.js: 项目基于 Node.js 环境，我们根据项目要求，通过 Node.js 官网 或 nvm (Node Version Manager) 将 Node.js 升级到了 v18.20.8 或更高版本，解决了因版本过低导致的 Astro 框架兼容性问题。
• pnpm: 作为项目指定的包管理工具，我们通过 npm install -g pnpm 命令进行了全局安装，并解决了 'pnpm' 不是内部命令 的环境变量配置问题。
• Git: 用于从 GitHub 克隆 Mizuki 项目的源代码。

2. 项目配置与构建#

环境就绪后，我们开始对博客项目本身进行配置和构建。

• 克隆项目: 使用 git clone https://github.com/matsuzaka-yuki/mizuki.git 命令将项目代码下载到本地。
• 设置网络代理: 为了顺利下载依赖，我们在命令行中配置了网络代理，使用了 set HTTP_PROXY=... 和 set HTTPS_PROXY=... (Windows CMD) 命令。
• 安装依赖: 进入项目目录，执行 pnpm install 命令，下载项目所需的所有依赖包。
• 个性化配置: 修改 src/config.ts 文件，设置了博客的标题、描述、主题颜色等关键信息。
• 生成静态文件: 在完成所有配置和内容编写后，执行 pnpm build 命令。该命令成功生成了一个 dist 文件夹，其中包含了最终要部署到服务器的所有静态网站文件 (HTML, CSS, JS 等)。

1. 选择部署方案#

我们最初探讨了使用 Docker 部署 Nginx 的方案，但遇到了 address already in use 的错误。经过分析，我们确定这是因为宝塔面板自带的 Nginx 已占用了 80 端口。因此，我们果断选择了更简单、更高效的方案：直接利用宝塔面板管理网站。

2. 使用宝塔面板创建站点#

我们利用宝塔面板的图形化界面，快速完成了服务器端的配置。

• 登录宝塔面板: 通过 IP 地址和端口访问并登录了宝塔管理后台。
• 添加站点:
  • 在 「网站」 功能菜单中，点击 「添加站点」。
  • 域名: 填入了准备好的个人域名。
  • 项目类型: 正确选择了 「纯静态」 作为项目类型，因为 Mizuki 最终产物是静态 HTML 文件。
  • 数据库: 选择 「不创建」，因为静态网站无需数据库支持。

3. 上传与部署文件#

站点创建后，我们得到了一个网站根目录，接下来就是将文件上传。

• 打包文件: 在本地，我们将 dist 文件夹内部的所有内容压缩成了一个 .zip 文件。
• 上传文件:
  • 通过宝塔的 「文件」 管理器，进入了网站的根目录。
  • 首先删除了宝塔默认生成的 index.html 等占位文件。
  • 使用上传功能，将本地打包好的 .zip 文件上传至服务器。
• 解压文件: 在服务器上，使用宝塔的解压功能，将压缩包解压到网站根目录，确保 index.html 等文件位于顶层目录。