GitHub Pages项目部署的详细流程介绍

GitHub Pages项目部署的详细流程介绍

引用

CSDN

1.

https://blog.csdn.net/weixin_46367832/article/details/139435922

GitHub是一个功能强大的代码托管平台，它不仅支持代码协作，还提供了持续集成/持续交付（CI/CD）、开发运维一体化（DevOps）和代码安全等高级功能。对于开发者来说，掌握GitHub的使用方法是必不可少的技能。本文将详细介绍如何使用GitHub Pages进行项目部署。

GitHub的具体作用

1. 协作编程（Collaborative Coding）
   开发者可以在GitHub上创建代码空间（Codespaces）和仓库（Repositories），并将本地代码上传到仓库进行开源。此外，还可以发起拉取请求（Pull Requests）提交代码变更到别人的仓库中，实现团队协作。

2. 持续集成（CI）/持续交付（CD），开发运维一体化（DevOps）和代码安全（code security）
   GitHub提供了强大的CI/CD工具，可以帮助开发者实现自动化测试和部署。同时，GitHub还提供了代码安全检查功能，帮助开发者发现潜在的安全漏洞。

3. 客户端APP
   针对不同的用户偏好，GitHub提供了两个不同的客户端App用于操作GitHub相关功能，如创建仓库，配置SSH key等。对于熟悉命令行的开发者来说，使用GitHub CLI（命令行工具）更加节省时间，简单快捷；对于不熟悉命令行的开发者来说，使用GitHub Desktop（桌面客户端）图形化界面更加友好。

如何使用

1. 进入官网，注册账号
   官网地址：Sign in to GitHub

2. 添加SSH key
   GitHub仓库地址有两种形式，即HTTPS和SSH。通过HTTPS地址克隆或提交代码等操作都需要进行身份认证，即输入用户名和密码校验通过之后才能完成相应操作。而通过SSH地址，在配置SSH key时，如果不配置密码，则无需校验，可以直接执行相关操作。

   （1）首先检查计算机上是否有SSH key，在git bash终端进行如下命令：

   ls -al ~/.ssh
   

   （2）如果没有就添加SSH key（马赛克的部分，就填上自己的GitHub邮箱）：

   ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
   

   （3）复制密钥，然后上GitHub进行配置：

   cat ~/.ssh/id_rsa.pub
   

   登录自己的GitHub，点击头像找到settings：

   

   然后找到这个：

   

   最后随便写个标题，沾上刚刚复制好的密钥，点击添加按钮，就完成了。

部署项目

部署项目到GitHub有两种方式：GitHub Pages 和 GitHub Actions

• GitHub Pages 是直接将打包好的静态资源上传到GitHub Pages对应分支，然后通过GitHub Pages提供的地址浏览网址。
• GitHub Actions 可以通过自定义工作流，配置作业实现从源码自动打包成静态资源，再将静态资源发布到GitHub Pages指定的分支上的全过程，实现自动化部署。

GitHub Pages部署

1. 创建一个GitHub仓库，用于存放静态资源：

   

2. 在表单中的Repository name 字段填入仓库名称

3. 创建仓库之后有一个仓库地址，记录下这个地址备用：git@github.com:floatyu/demo-site.git

4. 在项目中配置开发或者生产环境服务的公告基础路径。
   由于GitHub Pages访问时都会带上一级目录（仓库名称），因此这里需要在配置文件中添加公共基础路径配置。如果用vue CLI作为构建工具，则需要配置publishPath； 若用vite，则需要配置base为仓库名称demo-site，代码分别如下：

   //vue.config.js
   module.exports={
     publicPath:process.env.NODE_ENV === "production" ? "/demo-site/" : "/"
   }
   

   //vite.config.js
   export default defineConfig({
     base:process.env.NODE_ENV === "production" ? "/demo-site/" : "/"
   })
   

5. 运行打包命令，将项目静态资源打包备用，然后进入目标文件夹，将把打包好的静态资源文件提交到刚刚建立的GitHub仓库的gh-pages分支：

   # 打包
   npm run build
   

   然后去GitHub上查看就行。