告别手动部署？GitHub Actions 为你的博客自动部署保驾护航！

作为一名程序员，维护一个属于自己的博客，记录技术心得、分享生活感悟，是件很有意义的事情。但手动部署博客却是一件繁琐且容易出错的事情。每次更新文章，都要经历打包、上传、服务器配置等一系列操作，耗时耗力，让人只想摆烂。直到我遇到了 GitHub Actions，一切都变得简单了起来。

GitHub Actions 是一款由 GitHub 提供的持续集成/持续部署 (CI/CD) 服务。它可以让你自动化软件开发工作流程，例如构建、测试和部署。通过 GitHub Actions，你可以将博客的部署流程自动化，每次提交代码，GitHub Actions 都会自动完成部署，让你专注于内容创作，无需关心繁琐的部署细节。

为什么选择 GitHub Actions？

• 免费易用：对于公开仓库，GitHub Actions 提供免费的使用额度。即使是私有仓库，也有一定的免费额度，对于个人博客来说完全够用。而且，GitHub Actions 的配置非常简单，只需要编写一个 YAML 文件即可。
• 与 GitHub 无缝集成：GitHub Actions 与 GitHub 完美集成，可以直接访问仓库中的代码、secrets 等资源。无需额外配置，即可轻松实现自动化部署。
• 强大的社区支持：GitHub Actions 拥有庞大的社区支持，提供了大量的 Actions 供你使用。你可以直接使用别人编写好的 Actions，也可以根据自己的需求编写自定义 Actions。

我的博客自动化部署实践

下面，我将分享我的博客自动化部署实践，以帮助你快速上手 GitHub Actions。

1. 准备工作

• 一个 GitHub 仓库：用于存放博客的代码和配置文件。
• 一个服务器：用于部署博客。我使用的是一台 Linux 服务器，安装了 Nginx 和 Docker。
• 一个域名：用于访问博客。我使用的是阿里云的域名，并已将域名解析到服务器 IP 地址。
• 了解基本的 YAML 语法：GitHub Actions 的配置文件使用 YAML 格式，需要了解基本的 YAML 语法。

2. 编写 GitHub Actions 配置文件

在你的 GitHub 仓库根目录下创建一个名为 .github/workflows 的目录，并在该目录下创建一个名为 deploy.yml 的文件。这个文件就是 GitHub Actions 的配置文件。

下面是我的 deploy.yml 文件的内容：

name: Deploy Blog # 工作流的名称，会在 GitHub Actions 面板中显示
 
on:
  push:
    branches:
      - main # 监听 main 分支的 push 事件，当 main 分支有新的提交时，触发该工作流
 
jobs:
  deploy:
    runs-on: ubuntu-latest # 运行环境，我选择的是最新的 Ubuntu 系统
 
    steps:
      - name: Checkout code # 步骤的名称，会在 GitHub Actions 面板中显示
        uses: actions/checkout@v3 # 使用 actions/checkout@v3 这个 Action，用于检出代码
 
      - name: Setup Node.js # 安装 Node.js 环境，因为我的博客是使用 Node.js 搭建的
        uses: actions/setup-node@v3
        with:
          node-version: 16 # 指定 Node.js 版本
 
      - name: Install dependencies # 安装博客依赖
        run: npm install
 
      - name: Build blog # 构建博客
        run: npm run build
 
      - name: Deploy to server # 部署到服务器
        uses: appleboy/scp-action@master # 使用 appleboy/scp-action@master 这个 Action，用于将构建好的博客文件上传到服务器
        with:
          host: ${{ secrets.SERVER_IP }} # 服务器 IP 地址，从 GitHub secrets 中获取
          username: ${{ secrets.SERVER_USERNAME }} # 服务器用户名，从 GitHub secrets 中获取
          password: ${{ secrets.SERVER_PASSWORD }} # 服务器密码，从 GitHub secrets 中获取
          source: ./dist # 本地目录，包含构建好的博客文件
          target: /var/www/blog # 服务器目录，用于存放博客文件

这个配置文件定义了一个名为 Deploy Blog 的工作流，它会在 main 分支有新的提交时被触发。该工作流包含一个名为 deploy 的 job，该 job 会在 ubuntu-latest 运行环境中执行以下步骤：

1. Checkout code：检出代码。
2. Setup Node.js：安装 Node.js 环境。
3. Install dependencies：安装博客依赖。
4. Build blog：构建博客。
5. Deploy to server：部署到服务器。

3. 配置 GitHub Secrets

在上面的配置文件中，我使用了 GitHub Secrets 来存储服务器的 IP 地址、用户名和密码。这样做是为了保护服务器的安全，防止敏感信息泄露。

你可以在 GitHub 仓库的 Settings -> Secrets -> Actions 页面中配置 GitHub Secrets。

你需要添加以下 secrets：

• SERVER_IP：服务器 IP 地址。
• SERVER_USERNAME：服务器用户名。
• SERVER_PASSWORD：服务器密码。

4. 提交代码并触发工作流

将你的代码提交到 main 分支，GitHub Actions 就会自动触发工作流。

你可以在 GitHub 仓库的 Actions 页面中查看工作流的执行状态。

如果一切顺利，你的博客就会自动部署到服务器上。

遇到的坑及解决方案

在使用 GitHub Actions 自动化部署博客的过程中，我也遇到了一些坑，下面我将分享这些坑以及我的解决方案。

1. SSH 密钥认证

在上面的例子中，我使用了用户名和密码进行服务器认证。但是，使用用户名和密码进行服务器认证存在安全风险，建议使用 SSH 密钥认证。

要使用 SSH 密钥认证，你需要先在本地生成 SSH 密钥对，然后将公钥添加到服务器的 ~/.ssh/authorized_keys 文件中。接下来，你需要将私钥添加到 GitHub Secrets 中，并在 deploy.yml 文件中使用 SSH 密钥进行服务器认证。

下面是使用 SSH 密钥认证的 deploy.yml 文件的示例：

name: Deploy Blog
 
on:
  push:
    branches:
      - main
 
jobs:
  deploy:
    runs-on: ubuntu-latest
 
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
 
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16
 
      - name: Install dependencies
        run: npm install
 
      - name: Build blog
        run: npm run build
 
      - name: Deploy to server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USERNAME }}
          key: ${{ secrets.SERVER_SSH_KEY }} # 使用 SSH 密钥进行服务器认证
          source: ./dist
          target: /var/www/blog

你需要添加一个名为 SERVER_SSH_KEY 的 secret，并将你的 SSH 私钥的内容添加到该 secret 中。

2. 文件权限问题

在将博客文件上传到服务器后，可能会遇到文件权限问题。例如，Nginx 无法访问博客文件，导致博客无法正常显示。

要解决文件权限问题，你需要在 deploy.yml 文件中添加一个步骤，用于修改文件权限。

下面是修改文件权限的 deploy.yml 文件的示例：

name: Deploy Blog
 
on:
  push:
    branches:
      - main
 
jobs:
  deploy:
    runs-on: ubuntu-latest
 
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
 
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16
 
      - name: Install dependencies
        run: npm install
 
      - name: Build blog
        run: npm run build
 
      - name: Deploy to server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USERNAME }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          source: ./dist
          target: /var/www/blog
 
      - name: Change file permissions # 修改文件权限
        uses: appleboy/ssh-action@master # 使用 appleboy/ssh-action@master 这个 Action，用于在服务器上执行 SSH 命令
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USERNAME }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          script: | # 在服务器上执行的 SSH 命令
            chmod -R 755 /var/www/blog # 修改博客目录的权限
            chown -R www-data:www-data /var/www/blog # 修改博客目录的所有者和所属组

这个例子使用了 appleboy/ssh-action@master 这个 Action，用于在服务器上执行 SSH 命令。该步骤会执行以下命令：

• chmod -R 755 /var/www/blog：修改博客目录的权限为 755，即所有者具有读、写、执行权限，所属组和其他用户具有读、执行权限。
• chown -R www-data:www-data /var/www/blog：修改博客目录的所有者和所属组为 www-data，这是 Nginx 的默认用户和组。

3. 构建缓存问题

每次提交代码，GitHub Actions 都会重新安装博客依赖并构建博客。这会浪费大量的时间。为了解决这个问题，可以使用 GitHub Actions 的缓存功能。

GitHub Actions 的缓存功能可以将构建依赖和构建结果缓存起来，下次构建时可以直接使用缓存，无需重新安装依赖和构建博客。

下面是使用 GitHub Actions 缓存功能的 deploy.yml 文件的示例：

name: Deploy Blog
 
on:
  push:
    branches:
      - main
 
jobs:
  deploy:
    runs-on: ubuntu-latest
 
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
 
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16
 
      - name: Cache dependencies # 缓存依赖
        uses: actions/cache@v3 # 使用 actions/cache@v3 这个 Action，用于缓存依赖
        with:
          path: ~/.npm # 缓存路径，这里缓存的是 npm 的缓存目录
          key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }} # 缓存 key，用于唯一标识缓存
          restore-keys: |
            ${{ runner.os }}-npm-
 
      - name: Install dependencies
        run: npm install
 
      - name: Build blog
        run: npm run build
 
      - name: Deploy to server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USERNAME }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          source: ./dist
          target: /var/www/blog
 
      - name: Change file permissions
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USERNAME }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          script: |
            chmod -R 755 /var/www/blog
            chown -R www-data:www-data /var/www/blog
 

这个例子使用了 actions/cache@v3 这个 Action，用于缓存依赖。该步骤会缓存 ~/.npm 目录，这是 npm 的缓存目录。缓存 key 使用了 runner.os 和 hashFiles('package-lock.json')，前者表示操作系统，后者表示 package-lock.json 文件的哈希值。当 package-lock.json 文件发生变化时，缓存 key 也会发生变化，GitHub Actions 就会重新安装依赖。

总结

通过 GitHub Actions，你可以将博客的部署流程自动化，让你专注于内容创作，无需关心繁琐的部署细节。希望本文能够帮助你快速上手 GitHub Actions，并将其应用到你的博客部署中。

GitHub Actions 还可以用于自动化其他任务，例如代码测试、代码检查、代码发布等。只要你能想到，就可以使用 GitHub Actions 来自动化它。

快来尝试使用 GitHub Actions 吧，相信你会爱上它的！