本地部署

约 1451 字大约 5 分钟

2025-11-21

本地构建部署是一种灵活的方式，你可以在本地构建 Mizuki 博客，然后将生成的 dist 文件夹部署到你喜欢的任何平台。这种方式适合对构建过程有完全控制的用户。

为什么选择本地构建？

灵活性高：可以将构建结果部署到任何支持静态文件的托管平台
控制力强：可以完全控制构建过程和结果
节省构建时间：避免每次推送都重新构建
离线工作：即使没有网络连接也能构建博客

准备工作

安装 Node.js（推荐 18.x 或更高版本）
安装 pnpm 包管理器
克隆或拥有 Mizuki 博客源码

第一步：安装依赖

在你的 Mizuki 项目根目录下运行：

pnpm install

第二步：构建项目

运行构建命令生成静态文件：

pnpm build

构建完成后，你会在项目目录下看到 dist 文件夹，这个文件夹包含了所有需要部署的静态文件。Astro 会生成高度优化的静态文件，包括 HTML、CSS 和 JavaScript。

第三步：预览构建结果

在部署前，你可以本地预览构建结果：

pnpm preview

或者使用任何静态文件服务器：

# 使用 Python
cd dist
python -m http.server 8080

# 使用 Node.js serve
npx serve dist -p 8080

然后在浏览器中访问 http://localhost:8080 查看效果。

第四步：部署到不同平台

现在你可以将 .vuepress/dist 文件夹部署到各种平台。以下是几种常见平台的部署方法：

方案一：传统虚拟主机

大多数虚拟主机都支持 FTP/SFTP 上传文件：

使用 FTP 客户端（如 FileZilla）连接你的虚拟主机
将 .vuepress/dist 文件夹中的所有文件上传到网站根目录
确保服务器有正确的 MIME 类型配置：
- .html → text/html
- .css → text/css
- .js → application/javascript
- .json → application/json

方案二：对象存储 + CDN

使用阿里云 OSS、腾讯云 COS 等对象存储服务：

阿里云 OSS

登录阿里云控制台，创建 OSS 存储桶
开启静态网站托管功能
将 .vuepress/dist 文件夹中的所有文件上传到 OSS
配置 CDN 加速（可选）

腾讯云 COS

创建 COS 存储桶
开启静态网站功能
上传 .vuepress/dist 文件夹中的所有文件
配置自定义域名和 CDN

方案三：CDN 边缘平台

使用又拍云、七牛云等 CDN 服务：

又拍云

注册又拍云账号，创建云存储服务
开启 CDN 加速

使用又拍云官方工具上传：

npm install -g upx
upx login your-operator your-password
upx sync .vuepress/dist /your-bucket-name/

方案四：个人 NAS

如果你有 NAS 设备（如群晖、威联通）：

登录 NAS 管理界面
创建 Web Station 或类似服务
将 .vuepress/dist 文件夹复制到 Web 目录
配置端口和访问权限

方案五：VPS 简单部署

在 VPS 上简单部署（不需要复杂配置）：

安装 Nginx 或 Apache
创建网站目录
上传 .vuepress/dist 文件夹内容
配置简单的 Web 服务器：

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}

高级技巧

自动化构建脚本

创建一个自动化脚本来简化部署过程：

#!/bin/bash
# build-and-deploy.sh

echo "开始构建 Mizuki 博客..."
pnpm install
pnpm build

echo "构建完成！"
echo "dist 文件夹位置：$(pwd)/dist"

# 根据你的部署方式取消注释相应部分

# FTP 部署（需要安装 lftp）
# lftp -u username,password -e "mirror -R .vuepress/dist /remote/path" ftp.example.com

# SCP 部署
# scp -r dist/* user@server:/path/to/website/

# AWS S3 部署（需要安装 AWS CLI）
# aws s3 sync dist s3://your-bucket-name --delete

echo "部署脚本执行完成！"

使用方法：

chmod +x build-and-deploy.sh
./build-and-deploy.sh

优化构建结果

在 astro.config.mjs 中添加优化配置：

import { defineConfig } from 'astro/config';

export default defineConfig({
  // ...其他配置
  
  // 启用压缩优化
  build: {
    // 启用压缩
    minify: 'terser',
    // 优化图片
    vite: {
      build: {
        rollupOptions: {
          output: {
            manualChunks: {
              vendor: ['astro', '@astrojs/vue'],
              ui: ['vue']
            }
          }
        }
      }
    }
  }
});

多环境部署

为不同环境创建不同的构建命令：

{
  "scripts": {
    "build": "astro build",
    "build:prod": "NODE_ENV=production astro build",
    "build:dev": "NODE_ENV=development astro build",
    "preview": "astro preview",
    "dev": "astro dev"
  }
}