Vercel+GitHub 双端自动部署

一. 准备工作

在开始之前，确保你已经完成以下准备工作：

一个 GitHub 仓库，用于存放博客源码。
一个 Vercel 账户，用于部署博客。
一个 GitHub Pages 仓库（可选），用于部署博客。

二. 创建 GitHub 仓库

首先，在 GitHub 上创建一个新的仓库，用于存放你的博客源码。你可以选择使用静态站点生成器（如 Hugo、Jekyll、Hexo 等）来生成博客。

bash

# 克隆仓库到本地
git clone https://github.com/your-username/your-repo.git
cd your-repo

三. 配置 GitHub Pages 部署

GitHub Pages 是 GitHub 提供的静态站点托管服务。你可以通过以下步骤将你的博客部署到 GitHub Pages：

在 GitHub 仓库的设置中，找到 "Pages" 选项。
选择 gh-pages 分支作为 GitHub Pages 的源。

四. 配置 GitHub Actions 自动构建

GitHub Actions 是 GitHub 提供的 CI/CD 工具，可以帮助你自动化构建和部署流程。以下是一个简单的 GitHub Actions 配置文件示例，用于自动构建博客并部署到 Vercel 和 GitHub Pages。

在 .github/workflows/deploy.yml 文件中添加以下内容：

yaml

# 当有改动推送到master分支时，启动Action

name: 自动部署

on:

  push:

    branches:

      - main 

  release:

    types:

      - published

jobs:

  deploy:

    runs-on: ubuntu-latest

    steps:

    - name: 检查分支

      uses: actions/checkout@v2

      with:

        ref: main 

    - name: 安装 Node

      uses: actions/setup-node@v1

      with:

        node-version: "16.x"

    - name: 安装 Hexo

      run: |

        export TZ='Asia/Shanghai'

        npm install hexo-cli -g


    - name: 安装依赖

      if: steps.cache.outputs.cache-hit != 'true'

      run: |

        npm install --save

    - name: 生成静态文件

      run: |

        hexo clean

        hexo generate
        

    - name: 部署到Github
    
      uses: JamesIves/github-pages-deploy-action@v4
      
      with:
      
        token: ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx #更改为gihub仓库的token
        
        repository-name: /ghlsp/ghlsp.github.io
        
        branch: gh-pages
        
        folder: public
        
        commit-message: "${{ github.event.head_commit.message }} Updated By Github Actions"

五. 配置 Vercel 部署

Vercel 是一个非常流行的静态站点托管平台，支持自动部署。你可以通过以下步骤将你的博客部署到 Vercel：

登录 Vercel 并导入你的 GitHub 仓库。
在 Vercel 上配置自动部署，选择你的 GitHub 仓库并设置构建命令和输出目录。
添加自定义域名。

六. 提交代码并触发部署

完成以上配置后，提交你的代码到 main 分支，GitHub Actions 将会自动触发构建和部署流程。

bash

git add .
git commit -m "Initial commit with GitHub Actions configuration"
git push origin main

七. 验证部署

等待 GitHub Actions 完成构建和部署后，你可以访问 Vercel 和 GitHub Pages 提供的 URL 来验证你的博客是否成功部署。

八. 总结

通过以上步骤，你已经成功配置了 GitHub Actions 自动构建博客，并实现了双端部署到 Vercel 和 GitHub Pages。这种自动化部署流程可以大大提高开发效率，确保你的博客始终保持最新状态。

Vercel+GitHub 双端自动部署

评论区