节流网

主题

00:00:00

外卖卷：非常划算 扫码领劵 省点小钱钱

2026-04-09学习一些文章
3663
16.4m
0

VitePress 博客部署教程 ​

服务器地址： 20.41.121.59
域名： blog.jieliu.me
部署目录： /var/www/blog
教程更新时间： 2025年10月3日

VitePress 博客部署教程 ​

服务器地址： 20.41.121.59
域名： blog.jieliu.me
部署目录： /var/www/blog

一、快速开始 ​

1. 构建VitePress项目 ​

在本地项目目录执行：

bash
cd C:\Users\xinha\Desktop\your-vitepress-project
npm run build

构建完成后会生成 .vitepress/dist 目录。

2. 上传到服务器 ​

方法一：使用WinSCP（推荐）

  1. 下载安装 WinSCP: https://winscp.net/
  2. 配置连接：
    • 主机：20.41.121.59
    • 用户：z
    • 密钥：C:\Users\xinha\Desktop.ssh\z.pem
  3. 连接后，将 .vitepress/dist 内的所有文件上传到 /var/www/blog

方法二：使用SCP命令

bash
scp -i "C:\Users\xinha\Desktop\.ssh\z.pem" -r .vitepress/dist/* z@20.41.121.59:/var/www/blog/

3. 访问博客 ​

HTTP访问：http://blog.jieliu.me
HTTPS访问：https://blog.jieliu.me （需先配置SSL证书）

二、配置SSL证书 ​

SSH连接服务器：

bash
ssh -i "C:\Users\xinha\Desktop\.ssh\z.pem" z@20.41.121.59

申请SSL证书：

bash
sudo certbot --nginx -d blog.jieliu.me --email your-email@example.com --agree-tos --redirect

三、更新博客 ​

每次修改后：

  1. 本地构建：npm run build
  2. 上传文件到服务器（覆盖旧文件）
  3. 刷新浏览器查看更新

四、自动部署脚本 ​

创建 deploy.bat 文件：

batch
@echo off
echo 构建项目...
call npm run build

echo 上传到服务器...
scp -i "C:\Users\xinha\Desktop\.ssh\z.pem" -r .vitepress\dist\* z@20.41.121.59:/var/www/blog/

echo 部署完成！
echo 访问: https://blog.jieliu.me
pause

双击运行即可自动部署。

五、常见问题 ​

问题1：403 Forbidden

bash
ssh -i "C:\Users\xinha\Desktop\.ssh\z.pem" z@20.41.121.59
sudo chmod -R 755 /var/www/blog

问题2：404 Not Found

检查是否上传了 index.html：

bash
ls -la /var/www/blog/

问题3：样式加载失败

检查 VitePress 配置中的 base 路径是否为 '/'

六、重要命令 ​

操作命令
SSH连接ssh -i "C:\Users\xinha\Desktop\.ssh\z.pem" z@20.41.121.59
上传文件scp -i "密钥" -r dist/* z@20.41.121.59:/var/www/blog/
重启Nginxsudo systemctl restart nginx
查看日志sudo tail -f /var/log/nginx/blog.jieliu.me.access.log

配置已完成，现在可以开始上传您的博客了！

一、环境准备 ​

1.1 服务器已配置内容 ​

✅ 博客目录： /var/www/blog （已创建并设置权限）
✅ Nginx配置： 已配置虚拟主机 blog.jieliu.me
✅ DNS解析： blog.jieliu.me → 20.41.121.59 （已配置）
⏳ SSL证书： 需要完成申请（见第五章）

1.2 本地环境要求 ​

在您的Windows电脑上需要安装以下工具之一：

方案一：使用WinSCP（推荐，图形化界面）

方案二：使用Git Bash或PowerShell

  • 使用SCP命令上传文件
  • 适合熟悉命令行的用户

二、VitePress 项目构建 ​

在上传之前，您需要先在本地构建VitePress项目。

2.1 在本地项目目录执行构建 ​

打开命令行（CMD、PowerShell或Git Bash），进入您的VitePress项目目录：

bash
# 进入项目目录
cd C:\Users\xinha\Desktop\your-vitepress-project

# 安装依赖（如果还没安装）
npm install

# 构建生产版本
npm run build

2.2 构建产物位置 ​

构建完成后，会在项目目录下生成 .vitepress/dist 文件夹，这就是需要上传到服务器的内容。

典型的dist目录结构：

.vitepress/dist/
├── assets/
│   ├── app.js
│   ├── app.css
│   └── ...
├── index.html
├── about.html
└── ...

三、上传方式详解 ​

方式一：使用 WinSCP（推荐） ​

3.1 安装并打开 WinSCP ​

  1. 下载并安装 WinSCP：https://winscp.net/eng/download.php
  2. 打开 WinSCP

3.2 配置连接 ​

在登录界面填写以下信息：

配置项值
文件协议SFTP
主机名20.41.121.59
端口号22
用户名z
密码（留空）

3.3 配置密钥认证 ​

  1. 点击"高级"按钮
  2. 在左侧选择"SSH" → "认证"
  3. 在"私钥文件"处点击"..."浏览按钮
  4. 选择您的密钥文件：C:\Users\xinha\Desktop\.ssh\z.pem
  5. WinSCP会提示转换密钥格式，点击"确定"
  6. 保存转换后的 .ppk 文件
  7. 点击"确定"返回登录界面

3.4 连接服务器 ​

  1. 点击"登录"按钮
  2. 首次连接会提示确认服务器指纹，点击"是"
  3. 连接成功后，左侧是本地文件，右侧是服务器文件

3.5 上传文件 ​

  1. 在右侧（服务器端）导航到： /var/www/blog
  2. 在左侧（本地端）导航到： C:\Users\xinha\Desktop\your-vitepress-project\.vitepress\dist
  3. 选择dist目录下的所有文件和文件夹（不要上传dist文件夹本身）
  4. 拖拽到右侧窗口 或 右键选择"上传"
  5. 等待上传完成

重要提示：

  • 上传的是 dist 文件夹内部的所有内容
  • 不是上传 dist 文件夹本身
  • 上传后 /var/www/blog 目录下应该直接看到 index.html 和 assets 文件夹

方式二：使用 SCP 命令（命令行） ​

3.6 使用 PowerShell 或 Git Bash ​

打开 PowerShell 或 Git Bash，执行以下命令：

bash
# 进入VitePress项目目录
cd C:\Users\xinha\Desktop\your-vitepress-project

# 上传dist目录下的所有文件到服务器
scp -i "C:\Users\xinha\Desktop\.ssh\z.pem" -r .vitepress/dist/* z@20.41.121.59:/var/www/blog/

命令说明：

  • -i 指定密钥文件路径
  • -r 递归上传目录
  • dist/* 表示dist目录下的所有内容
  • z@20.41.121.59:/var/www/blog/ 目标服务器路径

3.7 验证上传 ​

上传完成后，通过SSH连接服务器验证：

bash
# SSH连接服务器
ssh -i "C:\Users\xinha\Desktop\.ssh\z.pem" z@20.41.121.59

# 查看博客目录内容
ls -la /var/www/blog/

# 应该看到 index.html、assets 等文件

方式三：使用 rsync（高级用户） ​

如果您安装了 Git Bash 或 WSL，可以使用 rsync 进行增量同步：

bash
# 增量同步，只上传修改过的文件
rsync -avz --delete -e "ssh -i C:/Users/xinha/Desktop/.ssh/z.pem" \
  .vitepress/dist/ z@20.41.121.59:/var/www/blog/

rsync 优势：

  • 只上传变更的文件，速度更快
  • 支持断点续传
  • 自动删除服务器上多余的文件（--delete 参数）

四、访问您的博客 ​

4.1 HTTP 访问（临时） ​

在SSL证书配置完成前，可以通过HTTP访问：

http://blog.jieliu.me

或直接使用IP访问：

http://20.41.121.59

4.2 HTTPS 访问（推荐） ​

完成SSL证书配置后（见第五章），使用HTTPS访问：

https://blog.jieliu.me

五、配置 SSL 证书（HTTPS） ​

5.1 自动申请 Let's Encrypt 证书 ​

SSH连接到服务器，执行以下命令：

bash
# SSH连接服务器
ssh -i "C:\Users\xinha\Desktop\.ssh\z.pem" z@20.41.121.59

# 使用Certbot自动申请SSL证书
sudo certbot --nginx -d blog.jieliu.me --non-interactive --agree-tos --email your-email@example.com --redirect

命令说明：

  • --nginx 自动配置Nginx
  • -d blog.jieliu.me 指定域名
  • --email 填写您的邮箱（用于证书到期提醒）
  • --redirect 自动将HTTP重定向到HTTPS

5.2 证书自动续期 ​

Let's Encrypt 证书有效期为90天，Certbot已自动配置续期任务：

bash
# 查看自动续期任务
sudo systemctl status certbot.timer

# 手动测试续期（不会真正续期）
sudo certbot renew --dry-run

5.3 如果证书申请失败 ​

常见原因：

  1. DNS解析未生效（需等待几分钟到几小时）
  2. 服务器80端口未开放
  3. Nginx配置错误

解决方法：

bash
# 检查DNS解析
nslookup blog.jieliu.me

# 检查80端口是否监听
sudo ss -tulnp | grep :80

# 检查Nginx配置
sudo nginx -t

# 查看详细错误日志
sudo tail -50 /var/log/letsencrypt/letsencrypt.log

六、更新博客内容 ​

每次修改博客后，按以下步骤更新：

6.1 本地构建 ​

bash
cd C:\Users\xinha\Desktop\your-vitepress-project
npm run build

6.2 上传到服务器 ​

使用 WinSCP：

  • 重复"三、上传方式详解"中的步骤
  • 选择"覆盖"已存在的文件

使用 SCP：

bash
scp -i "C:\Users\xinha\Desktop\.ssh\z.pem" -r .vitepress/dist/* z@20.41.121.59:/var/www/blog/

使用 rsync（推荐）：

bash
rsync -avz --delete -e "ssh -i C:/Users/xinha/Desktop/.ssh/z.pem" \
  .vitepress/dist/ z@20.41.121.59:/var/www/blog/

6.3 清除浏览器缓存 ​

更新后如果看不到变化，按 Ctrl + F5 强制刷新浏览器缓存。

七、常见问题排查 ​

7.1 访问博客显示 403 Forbidden ​

原因： 文件权限不正确

解决方法：

bash
# SSH连接服务器
ssh -i "C:\Users\xinha\Desktop\.ssh\z.pem" z@20.41.121.59

# 修复权限
sudo chown -R z:z /var/www/blog
sudo chmod -R 755 /var/www/blog

7.2 访问博客显示 404 Not Found ​

原因： 文件未正确上传或Nginx配置错误

解决方法：

bash
# 检查文件是否存在
ls -la /var/www/blog/

# 应该看到 index.html 文件
# 如果没有，重新上传

# 检查Nginx配置
sudo nginx -t
sudo systemctl reload nginx

7.3 样式或图片加载失败 ​

原因： 资源路径配置问题

解决方法：

检查 VitePress 配置文件 .vitepress/config.js 或 .vitepress/config.ts：

javascript
export default {
  // 如果博客部署在根目录，base应该为 '/'
  base: '/',
  
  // 其他配置...
}

如果修改了配置，需要重新构建并上传：

bash
npm run build
# 然后重新上传

7.4 无法连接服务器 ​

原因： 密钥权限或网络问题

解决方法：

bash
# 检查密钥文件权限（Git Bash）
chmod 600 C:/Users/xinha/Desktop/.ssh/z.pem

# 测试SSH连接
ssh -i "C:\Users\xinha\Desktop\.ssh\z.pem" -v z@20.41.121.59

# -v 参数会显示详细的调试信息

7.5 上传速度很慢 ​

原因： 网络带宽限制或文件过多

建议：

  1. 使用 rsync 进行增量上传
  2. 压缩后上传再解压：
bash
# 本地压缩
cd .vitepress
tar -czf dist.tar.gz dist/

# 上传压缩包
scp -i "C:\Users\xinha\Desktop\.ssh\z.pem" dist.tar.gz z@20.41.121.59:/tmp/

# SSH连接服务器
ssh -i "C:\Users\xinha\Desktop\.ssh\z.pem" z@20.41.121.59

# 解压到目标目录
cd /var/www/blog
sudo tar -xzf /tmp/dist.tar.gz --strip-components=1
sudo chown -R z:z /var/www/blog
rm /tmp/dist.tar.gz

八、自动化部署脚本（可选） ​

为了简化部署流程，您可以创建自动化脚本。

8.1 Windows 批处理脚本 ​

创建文件 deploy.bat 在您的VitePress项目根目录：

batch
@echo off
echo ========================================
echo VitePress 博客自动部署脚本
echo ========================================

echo [1/3] 构建项目...
call npm run build

echo [2/3] 上传到服务器...
scp -i "C:\Users\xinha\Desktop\.ssh\z.pem" -r .vitepress\dist\* z@20.41.121.59:/var/www/blog/

echo [3/3] 部署完成！
echo 访问地址: https://blog.jieliu.me
pause

使用方法： 双击 deploy.bat 即可自动构建并部署。

8.2 PowerShell 脚本 ​

创建文件 deploy.ps1：

powershell
Write-Host "========================================" -ForegroundColor Cyan
Write-Host "VitePress 博客自动部署脚本" -ForegroundColor Cyan
Write-Host "========================================" -ForegroundColor Cyan

Write-Host "[1/3] 构建项目..." -ForegroundColor Yellow
npm run build

if ($LASTEXITCODE -eq 0) {
    Write-Host "[2/3] 上传到服务器..." -ForegroundColor Yellow
    scp -i "C:\Users\xinha\Desktop\.ssh\z.pem" -r .vitepress/dist/* z@20.41.121.59:/var/www/blog/
    
    if ($LASTEXITCODE -eq 0) {
        Write-Host "[3/3] 部署完成！" -ForegroundColor Green
        Write-Host "访问地址: https://blog.jieliu.me" -ForegroundColor Green
    } else {
        Write-Host "上传失败！" -ForegroundColor Red
    }
} else {
    Write-Host "构建失败！" -ForegroundColor Red
}

Read-Host "按任意键退出"

使用方法：

powershell
# 在PowerShell中执行
.\deploy.ps1

8.3 Git Bash 脚本 ​

创建文件 deploy.sh：

bash
#!/bin/bash

echo "========================================"
echo "VitePress 博客自动部署脚本"
echo "========================================"

echo "[1/3] 构建项目..."
npm run build

if [ $? -eq 0 ]; then
    echo "[2/3] 上传到服务器..."
    rsync -avz --delete -e "ssh -i C:/Users/xinha/Desktop/.ssh/z.pem" \
      .vitepress/dist/ z@20.41.121.59:/var/www/blog/
    
    if [ $? -eq 0 ]; then
        echo "[3/3] 部署完成！"
        echo "访问地址: https://blog.jieliu.me"
    else
        echo "上传失败！"
    fi
else
    echo "构建失败！"
fi

使用方法：

bash
# 添加执行权限
chmod +x deploy.sh

# 执行脚本
./deploy.sh

九、服务器维护建议 ​

9.1 定期备份 ​

建议定期备份博客内容：

bash
# SSH连接服务器
ssh -i "C:\Users\xinha\Desktop\.ssh\z.pem" z@20.41.121.59

# 创建备份目录
mkdir -p ~/backups

# 备份博客内容
tar -czf ~/backups/blog-backup-$(date +%Y%m%d).tar.gz /var/www/blog

# 下载备份到本地
# 在本地执行：
scp -i "C:\Users\xinha\Desktop\.ssh\z.pem" z@20.41.121.59:~/backups/blog-backup-*.tar.gz ./

9.2 监控服务状态 ​

使用已安装的 Uptime Kuma 监控博客可用性：

  1. 访问：https://status.jieliu.me
  2. 添加监控项：https://blog.jieliu.me
  3. 设置告警通知

9.3 查看访问日志 ​

bash
# 查看访问日志
sudo tail -f /var/log/nginx/blog.jieliu.me.access.log

# 查看错误日志
sudo tail -f /var/log/nginx/blog.jieliu.me.error.log

# 统计访问量
sudo cat /var/log/nginx/blog.jieliu.me.access.log | wc -l

十、快速参考 ​

10.1 常用命令速查 ​

操作命令
SSH连接ssh -i "C:\Users\xinha\Desktop\.ssh\z.pem" z@20.41.121.59
上传文件scp -i "密钥路径" -r 本地路径/* z@20.41.121.59:/var/www/blog/
查看博客文件ls -la /var/www/blog/
重启Nginxsudo systemctl restart nginx
查看Nginx状态sudo systemctl status nginx
测试Nginx配置sudo nginx -t
申请SSL证书sudo certbot --nginx -d blog.jieliu.me
查看证书状态sudo certbot certificates

10.2 重要路径 ​

项目路径
博客目录/var/www/blog
Nginx配置/etc/nginx/sites-available/blog.jieliu.me.conf
Nginx日志/var/log/nginx/blog.jieliu.me.*.log
SSL证书/etc/letsencrypt/live/blog.jieliu.me/
本地密钥C:\Users\xinha\Desktop\.ssh\z.pem

10.3 联系信息 ​

项目信息
服务器IP20.41.121.59
博客域名blog.jieliu.me
SSH用户z
SSH端口22

十一、下一步建议 ​

  1. ✅ 完成SSL证书配置 - 启用HTTPS加密访问
  2. 📊 配置网站统计 - 使用已安装的Umami统计访问数据
  3. 🔒 配置防火墙 - 参考服务器分析报告的安全建议
  4. 💾 升级服务器内存 - 当前内存不足，建议升级到2-4GB
  5. 🔄 配置自动部署 - 使用GitHub Actions实现推送即部署

附录：Nginx 配置文件说明 ​

当前的Nginx配置文件位于 /etc/nginx/sites-available/blog.jieliu.me.conf：

nginx
server {
    listen 80;
    listen [::]:80;
    server_name blog.jieliu.me;

    root /var/www/blog;           # 博客文件根目录
    index index.html;              # 默认首页

    # 日志配置
    access_log /var/log/nginx/blog.jieliu.me.access.log;
    error_log /var/log/nginx/blog.jieliu.me.error.log;

    # VitePress 静态文件配置
    location / {
        try_files $uri $uri/ =404;
    }

    # 静态资源缓存（1年）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 安全头部
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;

    # Gzip 压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript 
               application/x-javascript application/xml+rss 
               application/javascript application/json;
}

配置说明：

  • root 指向博客文件目录
  • try_files 实现URL重写，支持干净的URL
  • 静态资源设置了长期缓存
  • 启用了Gzip压缩，减少传输大小
  • 添加了安全头部，防止XSS和点击劫持

祝您使用愉快！如有问题，请参考本教程的"七、常见问题排查"章节。

最近更新

评论