Github中如何给项目创建GitHub Pages官方网页

矫情吗；* 2022-12-23 01:00 177阅读 0赞

## 实现效果图： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70_pic_center]

**我的项目是：**  
[https://github.com/shunyue1320/uab-ui][https_github.com_shunyue1320_uab-ui]  
**我需要给项目创建一个官方文档的网页如：**  
[https://shunyue1320.github.io/uab-ui][https_shunyue1320.github.io_uab-ui]

看着[Github][https_github.com_shunyue1320_uab-ui]大项目都有一个高大上的官方文档，而这是怎么实现的呢? 其实很简单，接下来我们就来自己动手实现一下吧！

## 1. 项目根目录创建一个docs文件 ##

`docs`文件其实就是存放你的项目官方文档所描述的信息。

我们这里拿[VuePress][]为例，VuePress的目的其实就是给项目更简单的写一个官方文档。

通过学习`VuePress`的使用， 我成功为我的项目用VuePress写了一个[官方文档][Link 1]， 这就是用`VuePress`完成一个官方文档的[代码][Link 1]了，包括它上线后展示的[网页][https_shunyue1320.github.io_uab-ui]！感兴趣可以好好研究一下。

## 2. 打包文档项目上传到项目分支 ##

文档写好了那怎么上线呢？并且是以 [“https://用户名.github.io/文件名”][https_shunyue1320.github.io_uab-ui] 这种形式展现出来！

**下面硬核知识来了…**  
我们可以打开`VuePress`的[官方文档][Link 2]来看看项目文档是怎么部署在`Github`的吧！由官网信息了解，我们需要在项目的根目录下创建一个`deploy.sh`文件，并且在`Git Bash Here`命令行下通过输入命令`bash deploy.sh` 运行这个文件即可，详细内容如下

**deploy.sh文件如下**：

#!/usr/bin/env sh
    
    # 确保脚本抛出遇到的错误
    set -e
    
    # 生成静态文件
    npm run docs:build
    
    # 进入生成的文件夹
    cd docs/.vuepress/dist
    
    # 如果是发布到自定义域名
    # echo 'www.example.com' > 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> （意思就是将打包好的docs文档发布到你的github的某个项目的gh-pages分支上）
    git push -f git@github.com:shunyue1320/uab-ui.git master:gh-pages
    
    cd -

好了我们成功创建了`deploy.sh`文件并且运行了，这是问题出现了， 我们运行时**报错了:**  
`error: git ssh Permission denied (publickey)`  
这是说明情况说中国话：`当 shell 通过 ssh 方式向 github 仓库推送代码的时候，没有权限（publickey）`  
**原因是：**  
GitHub 是一个公共的代码管理平台，只要是公共的管理平台，就肯定会有安全问题，针对这些安全问题，平台开发者肯定会实施一些措施进行规避，  
比如浏览器实现了同源策略。需要公钥、私钥的配合我们才能将代码`push`到自己的项目中，避免被他人误操作的情况。

**原因了解到了，接下来我们来配置`github`的公钥与本地的私钥吧！**

1.  命令行运行`ssh-keygen`命令生成 ssh 密钥文件 文件地址：`C:\Users\你的用户名\.ssh`  
    生成 ssh 密钥时，会提示你输入文件的 `key`和`passphrase`，建议这里一直按回车即可
2.  将文件地址通过命令生成的 SSH 密钥文件`id_rsa.pub`里面的内容复制到`GitHub SSH key`，然后设置 title ，最后点击 `Add SSH key`保存`SSH` 密钥值即可。  
    GitHub SSH key: [https://github.com/settings/keys][https_github.com_settings_keys]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70_pic_center 1]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70_pic_center 2]  
    下面我们再次尝试在`Git Bash Here`命令行下通过输入命令`bash deploy.sh` 运行这个文件，`GitHub`项目内成功出现了一个名为`gh-pages`分支 **如下：**  
    [https://github.com/shunyue1320/uab-ui/tree/gh-pages][https_github.com_shunyue1320_uab-ui_tree_gh-pages]  
    接下来最后一步，通过`GitHub`部署项目文档到网址： [“https://用户名.github.io/文件名”][https_shunyue1320.github.io_uab-ui]

## 3.上线部署项目文档 ##

进入`GitHub` 进入该项目的`settings` 设置`github pages` 需要展示的文档Branch为gh-pages分支， 入口文件选中root， 最后save保存即可， 项目成功上线！！！  
![在这里插入图片描述][20201121173804474.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70_pic_center 3]  
我的这个[项目][https_shunyue1320.github.io_uab-ui]是教会您手写一个vue简化版的UI库， 让您学习到 [element][] ， [Ant Design][] 这些超级大厂`UI库`的实现原理是什么，如果需要借鉴参考，欢迎star, 点个喜欢，以免下次你能快速找到我的项目！非常感谢您能看到这里！！！  
[https://shunyue1320.github.io/uab-ui][https_shunyue1320.github.io_uab-ui]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70_pic_center 4]  
你们的喜欢是我创作的最大动力，感谢有你！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/cb853856d6b64e3680c8290143ee48a6.png
[https_github.com_shunyue1320_uab-ui]: https://github.com/shunyue1320/uab-ui
[https_shunyue1320.github.io_uab-ui]: https://shunyue1320.github.io/uab-ui/
[VuePress]: https://vuepress.vuejs.org/zh/guide/
[Link 1]: https://github.com/shunyue1320/uab-ui/tree/main/docs
[Link 2]: https://vuepress.vuejs.org/zh/guide/deploy.html#github-pages
[https_github.com_settings_keys]: https://github.com/settings/keys
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/081de06adaa14908a3f68551fffc6395.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/cbcc418644e24d78b34d62ee9f0fc131.png
[https_github.com_shunyue1320_uab-ui_tree_gh-pages]: https://github.com/shunyue1320/uab-ui/tree/gh-pages
[20201121173804474.png_pic_center]: /images/20221120/d00c30ca80f04d19953ddd40b3486e7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/a94a14a559ec49448be7c2b1e4742346.png
[element]: https://element.eleme.cn/#/zh-CN/component/installation
[Ant Design]: https://ant.design/docs/react/introduce-cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/040ac883ee254099a95e899711253252.png