VuePress部署到GitHub Pages

一、git push自动部署

1、创建用于工作流的文件

在项目根目录下创建一个用于 GitHub Actions 的工作流 .yml 文件

name: docs

on:
  # 每当 push 到 main 分支时触发部署
  push:
    branches: [main]
  # 手动触发部署
  workflow_dispatch:

jobs:
  docs:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
        with:
          # "最近更新时间" 等 git 日志相关信息,需要拉取全部提交记录
          fetch-depth: 0

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          # 选择要使用的 pnpm 版本
          version: 8
          # 使用 pnpm 安装依赖
          run_install: true

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          # 选择要使用的 node 版本
          node-version: 18
          # 缓存 pnpm 依赖
          cache: pnpm

      # 运行构建脚本
      - name: Build VuePress site
        run: pnpm docs:build

      # 查看 workflow 的文档来获取更多信息
      # @see https://github.com/crazy-max/ghaction-github-pages
      - name: Deploy to GitHub Pages
        uses: crazy-max/ghaction-github-pages@v4
        with:
          # 部署到 gh-pages 分支
          target_branch: gh-pages
          # 部署目录为 VuePress 的默认输出目录
          build_dir: docs/.vuepress/dist
        env:
          # @see https://docs.github.com/cn/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
2、开放当前仓库的读写权限

因为每个 GitHub 仓库都默认只让 GitHub Actions 读取仓库内容,不允许读写,因此需为 GitHub Actions 开放当前仓库的读写权限,否则无法正常构建 GitHub Pages

点击仓库选项卡 Settings→Actions→General,在 Workflow permissions中选择读写权限 Read and write permissions后,点击保存即可

执行 git push 就会自动触发工作流

3、设置部署分支

将vuepress构建后的 src/.vuepress/dist/ 目录 push 到 GitHub 仓库中的 gh-pages 分支(本地仓库没有该分支)

点击仓库选项卡 Settings-Pages 后,进行如下操作:

二、执行脚本部署

1、项目根目录下新建deploy.sh脚本
#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
 echo 'doc.frontdoc.cn' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:305810827/myDocs.git master:gh-pages

cd -
sh 复制代码
#打开gitbash执行部署脚本
./deploy.sh

这样每次执行deploy脚本后,github的Actions会自动执行部署工作流,页面就会自动更新.

三、自定义域名

自定义域名需要在自己的域名上添加解析


部署的vuePress项目代码: https://github.com/305810827/myDocs

访问地址: http://doc.frontdoc.cn/

求点个star支持下,谢谢

相关推荐
sdaxue.com5 小时前
帝国CMS:如何去掉帝国CMS登录界面的认证码登录
数据库·github·网站·帝国cms·认证码
m0_748247555 小时前
github webhooks 实现网站自动更新
github
张国荣家的弟弟6 小时前
【Yonghong 企业日常问题04】永洪BI可视化工具Linux部署全攻略(部署详解版)
linux·运维·github
油泼辣子多加8 小时前
2024年12月23日Github流行趋势
github
lsalp9 小时前
OpenAI于2024年12月21日在GitHub上正式发布了实时嵌入式SDK。支持ESP32-S3
物联网·github·esp32-s3
诸神缄默不语12 小时前
如何在服务器上克隆、pull、push GitHub私有项目
运维·github
dami_king13 小时前
项目开源能够带来什么?从中得到了什么?
开源·gitlab·github
沉默王二14 小时前
虾皮开的很高,还有签字费。
后端·面试·github
苏三有春15 小时前
五分钟学会如何在GitHub上自动化部署个人博客(hugo框架 + stack主题)
git·go·github
油泼辣子多加1 天前
2024年12月18日Github流行趋势
github