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

一.GitHub的具体作用

1.协作编程(Collaborative Coding)

开发者可以在GitHub上创建代码空间（ Codespaces)和仓库(Repositories),并将本地代码上传到仓库进行开源，也可以发起拉取请求（Pull Requests)提交代码变更到别人的仓库中，与他人进行协作。

2.持续集成（CI）/持续交付（CD），开发运维一体化（DevOps)和代码安全（code security)

3.客户端APP

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

二.如何使用

1.进入官网，注册账号

官网地址：Sign in to GitHub · GitHub

2.添加SSH key

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

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

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

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

复制密钥指令

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

然后找到这个

然后再

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

三.部署项目

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

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

GitHub Pages部署

01创建一个Github仓库，用于存放静态资源

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

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

03在项目中配置开发或者生产环境服务的公告基础路径。

由于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/" : "/"

})

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

#打包

然后去Github上查看就行。