如果你希望把你的前端项目、demo 快速展示给别人，你又没有搭建一个属于自己的个人网站，github pages 能够快速的帮到你。只需要以下简单的步骤，就可以让其他人访问到你的前端页面。
1
在 github 上创建一个项目
在 github 首页点击按钮 「New」，即可进入到如下页面，填写相关的信息，然后点击最后的「Create repository」 按钮，即可创建一个项目。
2
设置站点首页
创建好之后，项目如下
点击 「Settings」 ，进入到设置页面。
找到设置页面中，左侧导航栏中的「Pages」。
点击该链接，进入到 pages 的设置页面。
该页面有两个设置项。一个是 Source，表示代码源。另一个是 Theme Chooser，表示选择主题。
设置了 Source 之后，属于该项目的站点就会激活，可以通过该设置来指定项目的首页。
第一个按钮可以选择指定的分支，此时我们选择 main 主分支。
由于某些种族歧视问题，现在 github 上所有的项目，主分支已经从 master 改成了 main
第二个按钮可以选择指定的文件，此处提供了两个选项，root 根目录与 docs 目录。
对于简单的项目，我们可以将项目首页 index.html 放在根目录中，如果根目录中没有 index.html，此处会将 README.md 解析为首页。
对于 React/vue 项目来说，我们可以将 index.html 以及其他代码打包到 docs 目录中。
此处我们选择 man -> /(root)，项目中只有一个 README.md，那么此文件会被解析为首页，保存一下，试试看
保存之后，改项目的链接地址会根据项目自动生成，并在 pages 设置页显示出来。该地址不会马上就可以生效，要稍微等一会儿。
成功访问，搞定！
此时我们发现页面非常简单，因此为了页面看上去稍微丰富一点，我们可以选择一个主题。
点击「Choose a theme」 按钮，进入到主题选择页面。每一个主题都有预览效果，选择一个你喜欢的主题，点击「Select theme」按钮。
想要让主题生效，就会改变我们的项目代码。
因此当我们选择一个主题时，代码会发现改变，此时我们应该往项目中提交主题对应的代码，所以当点击了「Select theme」按钮之后，会进入到一个代码的提交页面
填写本次提交的备注，然后点击按钮「Commit changes」即可。
提交之后，README.md 文件被修改，并且多了一个主题相关的配置文件
点击刚才的博客地址，观察一下生效之后的页面效果。
3
编写网页代码
通常情况下，我们并不需要选择默认的主题，而是自己编写代码。例如，我们再项目中添加一个简单的 html 文件作为演示。
你可以通过在线的方式添加文件
也可以将代码通过 git clone 指令将代码拉取下来，在本地编辑好之后，再通过其他的 git 指令提交代码，这需要对 git 有一定程度的熟悉。
我的步骤如下：
a. 拉取代码到本地文件
git clone git@github.com:yangbo5207/bo.git
// 进入到项目目录
cd bo
b. 使用 vs code 等代码编辑器添加 index.html，随便添加一点内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>github pages 演示代码</title>
</head>
<body>
<h1>Github pages</h1>
<div>hello world!</div>
</body>
</html>
然后删掉刚才我们添加的主题相关的文件与内容。
c. 执行如下指令将代码提交到远程仓库
// 添加到暂存区
git add .
// 提交到本地仓库
git commit -m '自己添加文件'
// 同步远程提交
git pull
// 推送到远程仓库
git push origin main
随后项目文件变成了这样，如图
此时可能会因为构建方式的修改导致页面长时间访问不到，所以稍微等待一下即可。重新刷新访问刚才的页面，发现我的代码已经生效。
该 demo 项目访问地址为：https://yangbo5207.github.io/bo/
