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

时间:2021-2-20 作者:admin

实现效果图:

我的项目是:
github.com/shunyue1320…
我需要给项目创建一个官方文档的网页如:
shunyue1320.github.io/uab-ui

看着Github大项目都有一个高大上的官方文档,而这是怎么实现的呢? 其实很简单,接下来我们就来自己动手实现一下吧!

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

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

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

通过学习VuePress的使用, 我成功为我的项目用VuePress写了一个官方文档, 这就是用VuePress完成一个官方文档的代码了,包括它上线后展示的网页!感兴趣可以好好研究一下。

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

文档写好了那怎么上线呢?并且是以 “https://用户名.github.io/文件名” 这种形式展现出来!

下面硬核知识来了….
我们可以打开VuePress官方文档来看看项目文档是怎么部署在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: github.com/settings/ke…

3.上线部署项目文档

进入GitHub 进入该项目的settings 设置github pages 需要展示的文档Branch为gh-pages分支, 入口文件选中root, 最后save保存即可, 项目成功上线!!!

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。