Jest项目实战(7):部署文档网站到 GitHub Pages

关于部署网站,理论上来讲,只要你有一个服务器,你要采用什么样的方式来部署都是可以的。但是前提是你需要有一个服务器(物理机、云服务器)。

这一小节我们部署文档网站选择使用 github 来进行部署,因为 GitHub 为我们提供了一个免费的服务器,一个账号只有一个,只要你在 GitHub 上面有账号,你就能够轻松的创建一个免费的网站,这个免费的网站就特别适合拿来做个人博客、个人简历、文档网站。

要使用 github 来创建免费网站,有两个概念大家需要稍做了解:

  • github pages
  • github action

github pages

这是其实就是 github 所提供的一个免费的静态网站托管服务,它允许你将你的 html、css 和 js 托管到 github 仓库里面,之后会将这个仓库作为一个网站提供给访问者,这个 github pages 托管服务,一个账号只能对应一个网站,这个网站就特别适合拿来做个人博客、项目文档、简历等静态网站。

官网地址如下:https://pages.github.com/

GitHub Pages 的特点:

  • 免费:对于公开仓库,GitHub Pages 提供免费的静态网站托管服务。
  • 支持自定义域名:可以将您自己的域名与 GitHub Pages 网站关联。
  • HTTPS 支持:GitHub Pages 支持 HTTPS,确保您的网站内容在传输过程中受到保护。
  • 简单的部署:只需将静态文件推送到 GitHub 仓库,GitHub Pages 就会自动部署并更新您的网站。

github action

这是是一个自动化工具,允许你在 github 仓库里面定义你的工作流并且执行。有了这个工具之后,可以让我们在代码推送、拉取请求、issue 创建等工作全部实现自动化,自动执行构建、测试、部署等任务

官网地址如下:https://github.com/features/actions

GitHub Actions 的特点:

  • 集成在 GitHub 中:无需使用第三方 CI/CD 工具,直接在 GitHub 仓库中管理和执行自动化任务。
  • 可定制:您可以创建自己的工作流,定义一系列的步骤和任务,根据项目需求进行调整。
  • 支持多种语言和平台:GitHub Actions 支持各种编程语言和操作系统,包括 Windows、macOSLinux
  • 可扩展性:可以使用 GitHub 社区提供的大量预构建 Actions,也可以创建自己的 Actions

部署实战

首先第一步,我们需要将上节课的文档项目变为一个代码仓库

git init

接下来在项目根目录下面创建一个名为 .gitignore 的文件,该文件会记录不需要上传到远端仓库的目录或者文件

# 记录不需要上传到远端仓库的目录或者文件
node_modules

接下来我们就需要来定义我们的工作流,在项目根目录下面创建一个 .github/workflows目录,在该目录中创建一个名为 deploy.yml 部署文件,该文件内部就会记录我们的工作流

name: Deploy
on:workflow_dispatch: {}push:branches:- main
jobs:deploy:runs-on: ubuntu-latestpermissions:pages: writeid-token: writeenvironment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}steps:- uses: actions/checkout@v3with:fetch-depth: 0- uses: actions/setup-node@v3with:node-version: 16cache: npm- run: npm ci- name: Buildrun: npm run docs:build- uses: actions/configure-pages@v2- uses: actions/upload-pages-artifact@v1with:path: docs/.vitepress/dist- name: Deployid: deploymentuses: actions/deploy-pages@v1
  • name:该工作流的名称,这里我们的名称叫做 Deploy
  • on:定义触发工作流的事件,在上面的例子中,工作流会在以下情况触发:
    • 当你手动触发时
    • 当你推送代码到 main 分支的时候
  • jobs:定义要运行的一组任务
    • deploy:表示要运行一个名为 deploy 的任务
      • runs-on:定义你的任务是在哪种类型的机器上面运行
      • permissions:工作流需要的权限
      • environment:运行工作流的环境
      • steps:定义任务中要执行的一系列任务
        • 第一步:使用 actions/checkout@v3 操作检出您的仓库。
        • 第二步:使用 actions/setup-node@v3 操作设置指定版本的 Node.js 环境。这里是使用 Node.js 16 和 npm 缓存。
        • 第三步:运行 npm ci 命令以安装项目依赖项。
        • 第四步:运行名为 “Build” 的步骤,执行 npm run docs:build 命令以构建文档。
        • 第五步:使用 actions/configure-pages@v2 操作配置 GitHub Pages。
        • 第六步:使用 actions/upload-pages-artifact@v1 操作将构建产物(位于 docs/.vitepress/dist 目录下)上传为工作流制品。
        • 第七步:运行名为 “Deploy” 的步骤,使用 actions/deploy-pages@v1 操作部署文档到 GitHub Pages。并使用 id 参数将此步骤的 ID 设置为 “deployment”,以便在后续步骤中引用。

任务流文件准备好了之后,我们就可以开始准备推送了。在推送之前还有两个工作需要做:

  • 确保文档项目没有问题
  • 确保代码仓库工作区是干净的

接下来我们需要来到 github 官网,创建一个名为 username.github.io 的仓库,注意将 username 替换为你 github 账号的 username

image-20230609113447037

仓库创建好之后,通过如下的命令将我们本地的仓库推送到远端仓库:

git remote add origin git@github.com:xj89959853/xj89959853.github.io.git
git branch -M main
git push -u origin main

推送到远端仓库之后,github actions 就会根据我们的工作流配置文件自动的执行任务流,你可以在 actions 面板看到对应的执行进度

image-20230609114314960

点击 【pages build and deployment】,里面就可以看到部署的网站链接

image-20230609114407385
目前我们的 github 账号是一个普通的用户站点,而非项目站点。如果是用户或者组织站点,需要将内容部署在默认的 master 或者 main 分支的根目录下面。

因此我们需要确保最终我们打包好了的内容部署到站点的根目录下面。

所以这里我对工作流文件做了一些更新:

name: Deploy
on:workflow_dispatch: {}push:branches:- main
jobs:deploy:runs-on: ubuntu-latestpermissions:pages: writeid-token: writeenvironment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}steps:- uses: actions/checkout@v3with:fetch-depth: 0- uses: actions/setup-node@v3with:node-version: 16cache: npm- run: npm ci- name: Buildrun: npm run docs:build- name: Move built files to root directory and clean uprun: |rm -rf guide referencemv docs/.vitepress/dist/* ./rm -rf docs/.vitepress/dist- uses: actions/configure-pages@v2- uses: actions/upload-pages-artifact@v1with:path: ./- name: Deployid: deploymentuses: actions/deploy-pages@v1

工作流文件修改完毕后,还是一样的步骤,首先提交工作区,让工作区变得干净,然后通过:

git push -u origin main

提交到远端仓库。

注意有些时候你可能会面临这么一种情况,已经提交了新的任务流文件,在 Actions 面板,看到所有的任务也已经运行完毕了,但是仍然是 404

  • 清除一下浏览器的缓存
  • 重新触发工作流

image-20230609143500096

注意事项

目前我们的 github 账号是一个普通的用户站点,而非项目站点。如果是用户或者组织站点,需要将内容部署在默认的 master 或者 main 分支的根目录下面。

因此我们需要确保最终我们打包好了的内容部署到站点的根目录下面。

所以这里我对工作流文件做了一些更新:

name: Deploy
on:workflow_dispatch: {}push:branches:- main
jobs:deploy:runs-on: ubuntu-latestpermissions:pages: writeid-token: writeenvironment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}steps:- uses: actions/checkout@v3with:fetch-depth: 0- uses: actions/setup-node@v3with:node-version: 16cache: npm- run: npm ci- name: Buildrun: npm run docs:build- name: Move built files to root directory and clean uprun: |rm -rf guide referencemv docs/.vitepress/dist/* ./rm -rf docs/.vitepress/dist- uses: actions/configure-pages@v2- uses: actions/upload-pages-artifact@v1with:path: ./- name: Deployid: deploymentuses: actions/deploy-pages@v1

工作流文件修改完毕后,还是一样的步骤,首先提交工作区,让工作区变得干净,然后通过:

git push -u origin main

提交到远端仓库。

注意有些时候你可能会面临这么一种情况,已经提交了新的任务流文件,在 Actions 面板,看到所有的任务也已经运行完毕了,但是仍然是 404

  • 清除一下浏览器的缓存
  • 重新触发工作流

image-20230609143500096

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/468690.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第十九周:机器学习

目录 摘要 Abstract 一、吴恩达机器学习Exp1——线性回归 1、单变量线性回归 1.1数据集的读取及可视化 1.2分割训练集和验证集 1.3扩展维度 1.4线性回归模型 1.5训练过程可视化 2、多变量线性回归 2.1加载数据集并可视化 2.2划分训练集和验证集 2.3线性回归模型 …

Mac保护电池健康,延长电池使用寿命的好方法

使用Mac的过程中,如何延长电池的使用寿命是大家非常关心的问题,而养成一个良好的充电习惯能够有效的延长电池的使用寿命 避免过度充电和过度放电能够有效的保护电池,因此长时间的充电与长时间放点都不可取,但是在日常的使用过程中…

Python 爬虫数据清洗与存储:基础教程

Python 爬虫数据清洗与存储:基础教程 在爬虫数据获取完成后,数据往往是“原始”的,不适合直接使用。清洗和存储是将爬取到的原始数据转化为有用信息的关键步骤。本文将系统地介绍 Python 中进行数据清洗与存储的基本方法,帮助新手…

【博主推荐】VUE开发常用技术点收集

文章目录 1.系统主题的全局颜色变量申明和使用2.样式里面导入样式3.页面返回顶部功能4.页面实时更新时间功能5.页面条件判断的几种方式6.页面v-for使用7.页面路由跳转的几种方式8.vue3 js引用的几种方式9.Vue中引用和使用一个组件10.页面传参的几种方式VUE系列前端模板源码其他…

day08(单片机)时钟系统+定时器+PWM

目录 时钟系统定时器PWM 时钟系统 时钟基本概念 时钟源 晶体振荡器(Crystal Oscillator) RC振荡器(Resistor-Capacitor Oscillator) ​​​​​​​STM32U5时钟源 HSI(High Speed Internal) HSE(High Speed External) LSI(Low Spe…

linux盘扩容缩容

这里写目录标题 文件格式介绍问题:当根盘满了过后怎么办?解决方式: Xfs文件格式缩容扩容1. 备份2. 卸载home3. 缩容home(home盘为xfs文件格式)4. 扩容 /5. 恢复home备份 Ext4文件格式缩容扩容1. 备份(可选&…

通过DNS服务器架构解释DNS请求过程

在前面的章节,这里,基于PCAP数据包和RFC文档详细介绍了DNS请求和响应的每个字段的含义。但是在现实的网络世界中,DNS请求和响应的数据包是怎么流动的,会经过哪些设备。本文将着重说明一下目前网络空间中DNS请求和响应的流动过程。 当前网络空间中比较常见DNS请求的流程如下…

【GeoJSON在线编辑平台】(2)吸附+删除+挖孔+扩展

前言 在上一篇的基础上继续开发,补充上吸附功能、删除矢量、挖孔功能。 实现 1. 吸附 参考官方案例:Snap Interaction 2. 删除 通过 removeFeature 直接移除选中的要素。 3. 挖孔 首先是引入 Turf.js ,然后通过 mask 方法来实现挖孔的…

分组校验在Spring中的应用详解

目录 前言1. 什么是分组校验2. 分组校验的基本原理3. 分组校验的实现步骤3.1 定义分组接口3.2 在校验项中指定分组3.3 校验时指定要校验的分组3.4 默认分组和分组的继承 4. 分组校验的优势和适用场景4.1 优势4.2 适用场景 5. 常见问题与解决方案5.1 校验未生效5.2 无法识别默认…

Qt_day3_信号槽

目录 信号槽 1. 概念 2. 函数原型 3. 连接方式 3.1 自带信号 → 自带槽 3.2 自带信号 → 自定义槽 3.3 自定义信号 4. 信号槽传参 5. 对应关系 5.1 一对多 5.2 多对一 信号槽 1. 概念 之前的程序界面只能看,不能交互,信号槽可以让界面进行人机…

Unity引擎智能座舱解决方案

作为全球领先的 3D 引擎之一,Unity引擎为车载3D HMI提供全栈支持。即为从概念设计到量产部署的整个 HMI 工作流程提供创意咨询、性能调优、项目开发等解决方案,从而为车载信息娱乐系统和智能驾驶座舱打造令人惊叹的交互式体验。 专为中国车企打造的HMI引…

<项目代码>YOLOv8 草莓成熟识别<目标检测>

YOLOv8是一种单阶段(one-stage)检测算法,它将目标检测问题转化为一个回归问题,能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法(如Faster R-CNN),YOLOv8具有更高的…

stm32 踩坑笔记

串口问题: 问题:会改变接收缓冲的下一个字节 串口的初始化如下,位长度选择了9位。因为要奇偶校验,要选择9位。但是接收有用数据只用到1个字节。 问题原因: 所以串口接收时会把下一个数据更改

14、NAT和桥接区别

一、NAT模式 NAT相当于是局域网中的局域网,把192.168.21.1当作外网ip,重新划分了一个网关(192.168.33.x) 二、桥接模式 网桥只是把网络桥接起来,还是原来的网关(192.168.21.x),虚拟机…

养老实训室中,智能化养老服务平台的建设价值与措施

一、引言 随着人口老龄化的加速,对养老服务的需求日益攀升,传统的养老模式已无法满足现代社会的需求。智能化养老服务平台作为一种新兴的养老模式,以其高效、便捷和个性化的服务特点,开始受到社会的广泛关注。本文将深入探讨智能…

Linux:基本开发工具

一:编辑器vim 1.1vim的基本概念 vim其实有多重模式,这里我们主要了解vim的三种模式,分别是命令模式(command mode),插入模式(Insert mode)和底行模式(lst line mode) 正常/普通/命令模式(Normal mode) …

【数据分析】如何构建指标体系?

有哪些指标体系搭建模型?五个步骤教你从0开始搭建指标体系 一、企业指标体系搭建存在什么问题 许多企业在搭建数据指标体系时遇到了诸多难题,如问题定位不准确、数据采集不完整、目标不一致、报表无序、指标覆盖不全面以及报表价值未充分利用等。 1、…

ANDROIDWORLD: A Dynamic Benchmarking Environment for Autonomous Agents论文学习

这个任务是基于androidenv的。这个环境之前学过,是一个用来进行强化学习的线上环境。而这篇文章的工作就是要给一些任务加上中间的奖励信号。这种训练环境的优点就是动态,与静态的数据集(比如说我自己的工作)不同,因此…

【Android】轮播图——Banner

引言 Banner轮播图是一种在网页和移动应用界面设计中常见的元素,主要用于在一个固定的区域内自动或手动切换一系列图片,以展示不同的内容或信息。这个控件在软件当中经常看到,商品促销、热门歌单、头像新闻等等。它不同于ViewPgaer在于无需手…

容器化技术入门:Docker详解

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 容器化技术入门:Docker详解 容器化技术入门:Docker详解 容器化技术入门:Docker详解 引言 Doc…