vitepress项目使用github的action自动部署到github-pages中,理论上可以通用所有

9 篇文章 0 订阅
2 篇文章 0 订阅

使用githubaction自动部署到github-pages

创建部署的deploy.yml文件,在项目的根目录下面

.github\workflows\deploy.yml
请添加图片描述
完整的代码:使用的是pnpm进行依赖安装。

name: 部署VitePress

on:
  push:
    branches:
      - docs # 这段是在推送到 docs 分支时触发该命令

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

    steps:
      - name: Checkout code
        uses: actions/checkout@v2
        with:
          ref: docs # 这一步检查 docs 代码

      - name: Setup Node.js and pnpm
        uses: actions/setup-node@v3
        with:
          node-version: '20.10.0' # 设置 nodejs 的版本
          
      - name: Install pnpm
        run: npm install -g pnpm # 全局安装 pnpm

      - name: Install dependencies
        run: pnpm install # 使用 pnpm 安装依赖

      - name: Build VitePress
        run: pnpm run docs:build # 这里是打包 vitepress 命令

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.PAT_TOKEN }} # 这一步很重要,单独看下面的大步骤,主要是用来给该脚本一些仓库权限
          publish_dir: .vitepress/dist # 指定该文件夹中的 dist 
          publish_branch: gh-pages # 推送到关联仓库的 gh-pages 分支
          dotfiles: true  # 包括在提交中,即使被 .gitignore 文件忽略

这段 YAML 文件定义了一个 GitHub Actions 工作流,用于在推送到 docs 分支时构建和部署 VitePress 项目。

  • on: 定义触发工作流的事件,这里是在推送到 docs 分支时触发。

  • jobs: 定义工作流中的任务。

    • build-and-deploy: 任务的名称,表示构建和部署。

      • runs-on: 指定任务运行的操作系统,这里是 ubuntu-latest

      • steps: 定义任务的一系列步骤。

        • name: 步骤的名称。

        • uses: 使用的 GitHub Action。

        • with: 配置项,用于传递参数给 Action。

        • run: 执行的脚本命令。

其中,具体步骤解释如下:

  1. 检出代码:使用 actions/checkout Action 将代码检出到工作目录。

  2. 设置 Node.js 和 pnpm:使用 actions/setup-node Action 设置 Node.js 和安装 pnpm。

  3. 安装 pnpm:全局安装 pnpm。

  4. 安装依赖:使用 pnpm 安装项目依赖。

  5. 构建 VitePress:运行 pnpm 命令构建 VitePress 项目。

  6. 部署到 GitHub Pages:使用 peaceiris/actions-gh-pages Action 部署生成的静态文件到 GitHub Pages。配置中包括 GitHub Token、发布目录、发布分支以及是否包括 dotfiles(即使在 .gitignore 中也提交)等。

仓库说明

请添加图片描述

以下创建私人token和pages详细的步骤截图

如果看不清楚,可以右键打开到新窗口预览

请添加图片描述

github_token: ${{ secrets.PAT_TOKEN }}创建

  1. 先点击个人头像,进入设置页面
    请添加图片描述

  2. 进入 Developer Settings 设置
    请添加图片描述

  3. 生成个人token Personal access tokens (classic)
    请添加图片描述

  4. 设置token
    请添加图片描述

  5. 保存生成的token
    请添加图片描述

  6. 进入仓库添加该仓库的token
    请添加图片描述
    请添加图片描述
    请添加图片描述

4. 创建githubpages

请添加图片描述
请添加图片描述

  • 9
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以的,Github Actions可以用来自动化前端项目部署到云服务器。以下是一个简单的例子: 1. 首先,在你的Github仓库创建一个`.github/workflows`文件夹,并在该文件夹下创建一个`deploy.yml`文件。 2. 在`deploy.yml`文件设置触发部署的事件,例如push到master分支。然后设置一个`job`,该`job`会在触发事件后运行。 3. 在该`job`使用`actions/checkout` action拉取代码,并使用`actions/setup-node` action安装依赖。 4. 接下来,使用你喜欢的打包工具打包你的前端代码,例如webpack或者parcel。打包后的文件会被存储在一个`dist`文件。 5. 然后,使用`appleboy/ssh-action` action打包后的文件上传到云服务器。该action使用SSH登录到你的服务器,并将文件复制到服务器上的指定目录。 下面是一个示例的`deploy.yml`文件: ```yml name: Deploy to Cloud Server on: push: branches: - master jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v2 - name: Setup Node uses: actions/setup-node@v1 with: node-version: '12.x' - name: Install dependencies run: npm install - name: Build run: npm run build - name: Deploy to Cloud Server uses: appleboy/ssh-action@master with: host: ${{ secrets.HOST }} username: ${{ secrets.USERNAME }} password: ${{ secrets.PASSWORD }} port: ${{ secrets.PORT }} script: | cd /path/to/your/project rm -rf * scp -r /path/to/your/project/dist/* ./ ``` 这个例子是使用密码登录到云服务器的。如果你使用的是SSH Key,你需要相应地修改`deploy.yml`文件。此外,你需要在Github仓库的`Settings`添加`secrets`,以保存你的服务器信息和登录凭证。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值