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

这篇具有很好参考价值的文章主要介绍了vitepress项目使用github的action自动部署到github-pages中,理论上可以通用所有。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用github的action自动部署到github-pages中

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

.github\workflows\deploy.yml
github deploy,VuePress,其他,Git,github
完整的代码:使用的是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 中也提交)等。

仓库说明

github deploy,VuePress,其他,Git,github

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

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

github deploy,VuePress,其他,Git,github

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

  1. 先点击个人头像,进入设置页面
    github deploy,VuePress,其他,Git,github

  2. 进入 Developer Settings 设置
    github deploy,VuePress,其他,Git,github

  3. 生成个人token Personal access tokens (classic)
    github deploy,VuePress,其他,Git,github

  4. 设置token
    github deploy,VuePress,其他,Git,github

  5. 保存生成的token
    github deploy,VuePress,其他,Git,github

  6. 进入仓库添加该仓库的token
    github deploy,VuePress,其他,Git,github
    github deploy,VuePress,其他,Git,github
    github deploy,VuePress,其他,Git,github

4. 创建githubpages

github deploy,VuePress,其他,Git,github
github deploy,VuePress,其他,Git,github文章来源地址https://www.toymoban.com/news/detail-795830.html

到了这里,关于vitepress项目使用github的action自动部署到github-pages中,理论上可以通用所有的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 10分钟 使用VitePress和GitHub Actions快速搭建发布个人博客

    VitePress官网Getting Started | VitePress VitePress 是一个静态站点生成器 (SSG),旨在构建快速、以内容为中心的网站。 Node.js (nodejs.org)Node版本18或更高版本 **使用 node -v **查看node版本 创建文件夹并进入到项目的目录 初始化项目 这里会带有设置向导 安装项目所需的 vitepress 依赖 在

    2024年02月03日
    浏览(69)
  • github-action+docker实现项目可持续自动化部署

    这篇文章以部署vue3项目和nuxt2项目为例结合 github-action , docker , nginx 等介绍不同的项目自动部署流程 部署vue3项目 步骤: 1、腾讯云开启镜像仓库 2、github配置secrets 3、项目根目录创建dockerfile文件(在action工作流中创建镜像) 4、github配置action工作流(yml文件) 上面步骤执行结

    2024年04月26日
    浏览(41)
  • 使用 Github Actions 工作流自动部署 Github Pages

    actions顾名思义就是一堆动作,是一个持续集成服务,持续集成包含了拉代码、运行测试、编译代码、登录远程服务器,发布到第三方服务等等的操作,GitHub将这些操作称为actions。 概念:Workflows, Events, Jobs, Actions, Runners Workflows 工作流 一个 Workflow 由多个 Jobs 组成 Events 定义哪

    2024年02月07日
    浏览(70)
  • 使用GitHub Actions 来进行项目远程服务器部署

    由于项目源码是托管在github的,而部署是放在远程服务器上,并且使用nginx部署。 现在的部署流程时,需要更新时,在本地切换到master分支,执行构建操作,拿到构建出的dist目录,将其上传到远程服务的某个nginx目录,重启nginx服务。 基于以上,使用GitHub Actions做CI/CD流程。

    2024年02月14日
    浏览(49)
  • 使用VitePress创建个人网站并部署到GitHub

    网站在线预览 参考文档: VitePress 克隆远程仓库到本地 进入 front-end-notes/ 目录,添加 README.md 并建立分支跟踪 推荐使用 pnpm : 安装 vitepress : 使用脚手架初始化文档项目 启动项目,查看网站 初始化 package.json 文件,填写相关信息 完整 package.json 文件如下: 首页配置参考文档

    2024年02月08日
    浏览(59)
  • GitHub Actions自动化部署+定时百度链接推送

    # 前言 最近用VuePress搭建了一个静态网站,由于是纯静态的东西,每次修改完文章都要重新打包上传很是麻烦。虽然vuepress-theme-vdoing主题作者提供了GitHub Actions自动化部署的教程文章,但是过于简陋且是19年发布的。。 # 1. 创建一个GitHub仓库(私有仓库也可以) # 2. 设置服务器地

    2024年02月12日
    浏览(53)
  • Github Actions实现Spring Boot自动化部署(第二弹)

    ​ 今天就来讲述一下如何使用GitHub结合Actions实现Spring Boot程序从提交代码到打包、容器化、部署全过程自动化。首先咱们得现有一个能够在本地运行的Spring Boot程序,并且在Github上拥有一个仓库。 1.1 提交代码到Github 1.2 设置服务器密钥、GitHub私钥、DockerHub账号 secret value rem

    2024年02月08日
    浏览(47)
  • 【日常记录】自动化部署与持续交付:GitHub Actions CICD

    当我们做项目的时候,如果做完了,要发布,就需要打包,扔到服务器上,如果改了一点东西,还得打包,扔到服务器上,重复的执行 打包= 扔到服务器上 详细记录如何使用github actions自动化部署项目 自动化部署与持续交付:GitHub Actions CICD 自动化部署一般以下方式 Jenkins

    2024年02月02日
    浏览(62)
  • GitHub Action 通过SSH 自动部署到云服务器上

    准备 正式开始之前,你需要掌握 GitHub Action 的基础语法: workflow (工作流程):持续集成一次运行的过程,就是一个 workflow。 name: 工作流的名称。 on: 指定次工作流的触发器。push 表示只要有人将更改推送到仓库就会触发工作流运行。(点击这里了解如何指定特定分支,路径

    2024年01月19日
    浏览(46)
  • github action初体验实现maven项目自动ci test

    这里是 weihubeats ,觉得文章不错可以关注公众号 小奏技术 ,文章首发。拒绝营销号,拒绝标题党 GitHub Actions是GitHub提供的一种持续集成/持续交付(CI/CD)工具,它可以帮助开发者自动化软件开发流程中的各种任务,如构建、测试、部署等。通过在代码仓库中配置和定义工作流

    2024年01月23日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包