使用宝塔面板部署博客

Astro 博客部署到宝塔服务器 + GitHub Actions 自动部署指南

🛠️ 一、项目背景

本项目使用 Astro 生成静态博客，托管于 GitHub，并通过 GitHub Actions 自动部署到自购 Linux 服务器（已安装宝塔面板）。

🚧 二、准备工作

✅ 环境要求

Linux 服务器（如 Ubuntu 24.04，其他也可以2H2G）
宝塔面板（可选但推荐）
Astro 博客代码
域名如 blog.uf4.top
GitHub 仓库 + Actions 权限

🔧 安装宝塔

# 官方安装脚本（以 Ubuntu 为例）(宝塔官网也有，直接找)
wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh

访问面板地址，设置账户密码。

🔐 三、配置 SSH 密钥（用于 CI 自动部署）

生成 SSH 密钥对

#　生成 SSH 密钥对
ssh-keygen -t rsa -b 4096 -C "github-ci" -f ~/.ssh/id_rsa_ci
# id_rsa_ci：私钥（你要保存在 GitHub Actions 的 Secrets）
# id_rsa_ci.pub：公钥（你要放到你服务器的 ~/.ssh/authorized_keys 中）

# 在服务器上执行：
mkdir -p ~/.ssh
cat id_rsa_ci.pub >> ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys

配置 GitHub Secrets:
在你的博客 GitHub 仓库：
Settings → Secrets → Actions → New repository secret：
SSH_PRIVATE_KEY：内容是你生成的 id_rsa_ci
SSH_USER：服务器用户名（如 ubuntu）
SSH_HOST：服务器公网 IP 或域名
SSH_TARGET_DIR：比如 /var/www/blog.uf4.top

建议将服务器默认 22 端口更改为其他端口如 22022，并开启防火墙相应端口。

📦 四、宝塔创建静态站点

添加网站：blog.uf4.top
网站目录：/www/wwwroot/blog.uf4.top(自己选个目录就行，与CI仓库目录一致)
安装 Nginx，修改配置：

location / {
    try_files $uri $uri/ /index.html;
}

可选：使用 Let’s Encrypt 免费申请 HTTPS

🤖 五、GitHub Actions 自动部署配置

.github/workflows/deploy.yml：

name: Build & Deploy Astro Blog to Linux Server

on:
  push:
    branches: [main]  # 如果你用的是 master 分支请改为 master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: npm ci

      - name: Build Astro site
        run: npm run build

      - name: Deploy via rsync over SSH
        uses: burnett01/rsync-deployments@7.0.2
        with:
          switches: -avz --delete
          path: dist/
          remote_path: ${{ secrets.SSH_TARGET_DIR }}
          remote_host: ${{ secrets.SSH_HOST }}
          remote_user: ${{ secrets.SSH_USER }}
          remote_key: ${{ secrets.SSH_PRIVATE_KEY }}
          remote_port: 22022  #　这个是自己选的端口

🕳️ 六、常见坑点总结

1. 自动跳转到 cn.blog.uf4.top？

原因：Cloudflare 有旧跳转规则或你开启了代理
解决：关闭 Cloudflare 代理（变成灰色小云），删除所有 Page Rules

2. SSH 连接失败 / 权限拒绝？

原因：密钥未添加、端口未开放
解决：检查 authorized_keys，使用 chmod 600 权限，开放 22022 端口，或者检查一下面板的防火墙设置

3. 网页无限刷新 / 空白？

原因：Nginx 缺失 try_files 配置或上传路径错误
解决：确认 dist/ 中内容被正确上传，并加上 try_files 规则

4. DNS 已解析但仍然重定向？

解决：用 ping blog.uf4.top 看是否指向你新服务器的公网 IP

✅ 七、最终测试

访问：

http://blog.uf4.top ✅
https://blog.uf4.top ✅（推荐申请宝塔 SSL）

如果启用了宝塔防火墙或云厂商安全组，请务必开放：

80、443（HTTP/HTTPS）
22022（SSH 远程连接）

🧩 八、建议增强

自动申请和续签 HTTPS（宝塔提供）
定时备份网站文件 + GitHub 仓库
使用 fail2ban 防 SSH 爆破
页面压缩和缓存设置

🎉 九、总结

你已成功完成一个现代前端博客的完整部署流程，兼顾了：

自由控制（部署、日志、备份）
自动化发布（CI/CD）
低延迟与可控网络（不依赖国外托管）

欢迎将此流程记录到你的博客中或备份仓库。如需进一步使用 Docker、PM2、Nginx Proxy Manager 部署多站，欢迎继续探索！

本文仅供学习参考，请勿用于非法用途。本文出自chatgpt，请勿用于商业用途。

UF4