Astro 博客 + 阿里云 + GitHub Actions 自动化部署完全指南#

一、核心逻辑架构#

写作端（本地）：使用 Markdown 写作，通过 Git 推送源码。
构建端（GitHub Actions）：免费的云端服务器自动安装依赖、打包生成静态 HTML 文件。
生产端（阿里云）：Nginx（宝塔）负责极速响应国内用户的访问。

二、环境准备（一次性配置）#

1. 服务器端（阿里云 + 宝塔）#

安装必要软件：在宝塔终端执行：

# CentOS 系统
yum install rsync -y
# Ubuntu/Debian 系统
apt-get install rsync -y

bash

放行安全组端口：
- 登录阿里云控制台，在安全组中开放 80 (HTTP) 和你的 SSH 端口（如 3144）。
创建站点：在宝塔【网站】->【HTML项目】中添加站点，记住根目录路径（如 /www/wwwroot/new.ayuan.ink）。

2. 本地项目配置#

修改 astro.config.ts：
- 设置 output: ‘static’。
- 删除或注释掉 adapter: vercel() 相关内容。
确保打包成功：本地运行 pnpm build 确认 dist 目录下有 index.html。

三、自动化部署关键步骤#

1. SSH 密钥对（建立信任）#

生成密钥（本地执行）：

ssh-keygen -t rsa -b 4096 -f id_rsa_blog

bash

部署公钥：将 id_rsa_blog.pub 内容复制到阿里云的 /root/.ssh/authorized_keys。

权限设置（服务器执行）：

chmod 700 /root/.ssh
chmod 600 /root/.ssh/authorized_keys

bash

2. GitHub 仓库设置 (Secrets)#

在 GitHub 仓库的 Settings -> Secrets and variables -> Actions 中添加：

SSH_PRIVATE_KEY：本地 id_rsa_blog 文件的完整内容。
REMOTE_HOST：你的阿里云公网 IP。
REMOTE_USER：root。
REMOTE_PORT：3144（你的 SSH 端口）。

3. 编写 Workflow 脚本#

在项目根目录创建 .github/workflows/deploy.yml，核心配置如下：

name: Deploy Blog
on:
  push:
    branches: [ main ] # 监听 main 分支的推送
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      - name: Build
        run: |
          pnpm install
          pnpm build --skip-check
      - name: Deploy
        uses: easingthemes/ssh-deploy@main
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          ARGS: "-rlgoDzvc -i --delete"
          SOURCE: "dist/"
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_USER: ${{ secrets.REMOTE_USER }}
          REMOTE_PORT: ${{ secrets.REMOTE_PORT }}
          TARGET: "/www/wwwroot/你的站点目录"
          EXCLUDE: "/.user.ini" # 排除宝塔锁定文件

yaml

四、日常运维手册（命令集）#

以后写博客或修改网站，只需重复以下操作：

1. 写作与本地预览#

# 进入写作模式，本地实时预览 (localhost:4321)
pnpm dev

bash

在 src/content/blog/ 下创建或修改 .md 文件。

2. 提交并同步到线上（核心三部曲）#

当你写完文章，执行以下命令，剩下的交给 GitHub：

# 1. 暂存所有修改
git add .

# 2. 提交并说明修改了什么
git commit -m "feat: 发布新文章-2025总结"

# 3. 推送到 GitHub（触发全自动部署）
git push

bash

3. 监控部署状态#

如果网站没更新，去 GitHub 仓库点击 Actions 选项卡。
绿色勾勾：部署成功。
红色叉叉：点击进去看具体的报错日志（通常是端口、路径或 rsync 没装）。

五、避坑小贴士 (Final Tips)#

安全禁忌：绝对不要把 id_rsa_blog（私钥）提交到 Git 仓库。如果不小心传上去了，请在本地删除并重新生成一对密钥，然后更新 GitHub Secrets。
图片处理：Astro 会自动优化 src/content 里的图片。如果图片很大，GitHub Actions 打包会稍慢一些（约 1-2 分钟），这是正常的。
备案提醒：如果使用国内服务器，域名必须在对应的云服务商完成 ICP 备案。否则，通过域名访问会被拦截（表现为连接重置），此时只能通过 IP 访问。
本地 dist：本地的 dist 目录已经不再需要，可以在 .gitignore 中加入 dist/ 彻底忽略它。

现在，你的博客已经变成了一个自动化程度极高的现代站点！尽情享受写作吧！

git add .

2. 提交并说明修改了什么#

git commit -m “feat: 发布新文章-2025总结”

3. 推送到 GitHub（触发全自动部署）#

git push

HTTPS 化：Waline 与七牛云全家桶方案#

0. 核心思路#

主站域名： https://ayuan.ink（拥有 ↗ SSL 证书）
底层服务：

Waline： http://127.0.0.1:8369 ↗ (内部运行)
七牛云： http://picture-ayuan-ink-xxx.qiniudns.com ↗ (外部源站)

解决方案：利用 Nginx 的子路径（Subpath）转发功能，将所有请求统一在 ayuan.ink 的 443 端口下。

https://ayuan.ink/api/ ↗ → 转发至 Waline
https://ayuan.ink/photos/ ↗ → 转发至七牛云 (并开启 20GB 硬盘缓存)

1. Nginx 全局缓存定义 (宝塔操作)#

为了让服务器能存下 20GB 的图片，需先定义缓存池。

进入宝塔面板 -> 软件商店 -> Nginx -> 设置 -> 配置修改。
在 http { 标签下方插入：

# 定义图片缓存区
# 路径: /www/server/nginx/proxy_cache_blog
# 内存占用: 100m (存放索引)
# 最大硬盘空间: 20g
# 有效期: 90d (90天未被访问则清理)
proxy_cache_path /www/server/nginx/proxy_cache_blog levels=1:2 keys_zone=qiniu_cache:100m max_size=20g inactive=90d use_temp_path=off;

nginx

2. 站点 Nginx 配置 (ayuan.ink)#

进入宝塔面板 -> 网站 -> ayuan.ink -> 设置 -> 配置文件，在 server 块内加入：

A. Waline 转发#

location /api/ {
    proxy_pass http://127.0.0.1:8369/; # 末尾斜杠表示抹除 /api/ 路径
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    add_header Access-Control-Allow-Origin *;
}

nginx

B. 七牛云图片代理 + 强力缓存#

location ^~ /photos/ {
    # 填入七牛云给你的测试域名/CNAME，末尾带斜杠
    proxy_pass http://picture-ayuan-ink-idvqx0a.qiniudns.com/; 
    
    # 核心：伪装成自定义域名，绕过七牛云测试域名的 Token 限制
    proxy_set_header Host picture.ayuan.ink; 
    
    # 开启服务器缓存逻辑
    proxy_cache qiniu_cache;
    proxy_cache_valid 200 302 90d;   # 成功请求缓存90天
    proxy_cache_valid 404 1m;        # 错误请求缓存1分钟
    proxy_cache_key $host$uri$is_args$args;
    
    # 传递必要头部
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    add_header X-Cache-Status $upstream_cache_status; # HIT代表命中缓存
    
    expires 90d; # 浏览器端缓存
}

nginx

配置完成后，务必【重载 Nginx 配置】。

3. 应用端配置修改#

A. Astro 项目配置 (src/site.config.ts)#

waline: {
  enable: true,
  // 统一使用主站 HTTPS 子路径，且键名必须为 serverURL
  serverURL: 'https://ayuan.ink/api', 
},
// 如果有头像地址，也要修改
avatar: 'https://ayuan.ink/photos/picture/avatar.jpg'

typescript

B. PicGo 设置 (源头自动化)#

七牛图床设置：
- 设定访问网址：https://ayuan.ink/photos ↗ (末尾不加斜杠)
- 设定存储路径：picture/ (末尾加斜杠)
Obsidian：以后上传图片返回的链接即为 https://ayuan.ink/photos/picture/xxx.png。 ↗

C. 历史文章处理 (VS Code 全局替换)#

快捷键：Ctrl + Shift + H
搜索：http://picture.ayuan.ink ↗
替换：https://ayuan.ink/photos ↗
清理：若出现 photos//picture，全局搜索 // 替换为 /。

4. 方案优势总结#

Mixed Content 彻底消失：全站资源 100% 走 HTTPS 协议，浏览器地址栏显示绿色小锁。
七牛云省钱：
- 避开了昂贵的七牛云 HTTPS 流量计费。
- 通过 20GB 缓存，90% 的图片请求由阿里云硬盘直接响应，减少了七牛云的 HTTP 流量和请求数支出。
统计数据找回：通过统一 path (去除斜杠) 和 serverURL，解决了阅读量卡死问题。
维护简单：全站只需维护 ayuan.ink 一个 SSL 证书。

💡 运维提醒：每次 git push 前，请确保 dist 目录已在 .gitignore 中，本地仅保留源码。部署后如图片不更新，可尝试在图片链接后加 ?v=1 或清理浏览器缓存。

Astro博客部署与HTTPS化

Astro 博客 + 阿里云 + GitHub Actions 自动化部署完全指南#

一、 核心逻辑架构#

二、 环境准备（一次性配置）#

1. 服务器端（阿里云 + 宝塔）#

2. 本地项目配置#

三、 自动化部署关键步骤#

1. SSH 密钥对（建立信任）#

2. GitHub 仓库设置 (Secrets)#

3. 编写 Workflow 脚本#

四、 日常运维手册（命令集）#

1. 写作与本地预览#

2. 提交并同步到线上（核心三部曲）#

3. 监控部署状态#

五、 避坑小贴士 (Final Tips)#

2. 提交并说明修改了什么#

3. 推送到 GitHub（触发全自动部署）#

HTTPS 化：Waline 与七牛云全家桶方案#

0. 核心思路#

1. Nginx 全局缓存定义 (宝塔操作)#

2. 站点 Nginx 配置 (ayuan.ink)#

A. Waline 转发#

B. 七牛云图片代理 + 强力缓存#

3. 应用端配置修改#

A. Astro 项目配置 (src/site.config.ts​)#

B. PicGo 设置 (源头自动化)#

C. 历史文章处理 (VS Code 全局替换)#

4. 方案优势总结#

一、核心逻辑架构#

二、环境准备（一次性配置）#

三、自动化部署关键步骤#

四、日常运维手册（命令集）#

五、避坑小贴士 (Final Tips)#

A. Astro 项目配置 (src/site.config.ts)#