背景
以前是看到别人的GitHub上的项目源码中，后面会跟着一个网址，是该项目的demo，可是就单纯的没有再去思考，我是不是也可以把自己的项目这样放到GitHub上去，让它启动起来，不再是冰冷的code。现在要去打破这种对未知事物的恐惧，要多尝试。
Github项目主页
GitHub Pages是一个静态站点托管服务，旨在直接从GitHub存储库托管您的个人，组织或项目页面。
GitHub Pages是一个静态站点托管服务，不支持服务器端代码，例如PHP，Ruby或Python。
GitHub上新建项目
- 打开自己的GitHub主页，点击右上角的+按钮
install1.png
- 点击【New repository】，进入到Create a new repository页面。
install2.png
上面的步骤是在GitHub上创建了一个空白项目，下面还要clone到本地来创建实质code。
复制远程地址，然后在本地项目目录下，使用git clone命令来克隆远程仓库的项目。
install3.png
git clone [https://github.com/springHyc/FlexBoxDemoStation2.git](https://github.com/springHyc/FlexBoxDemoStation2.git)
- 然后生成自己的项目，比如我使用react来写的自己的FlexBoxDemoStation项目。
项目生成主页
- 将写好的项目推送到远程仓库的主分支
git add .
git commit -m "xxx"
git push origin master</pre>
- 执行项目构建命令，并将构建后的静态页面推送至gh-pages分支
1. 切换到gh-pages分支 git checkout -b gh-pages(创建gh-pages并切换到该分支)/ git checkout gh-pages (切换到gh-pages分支)
2. 执行 npm run build 命令，gitbook项目使用`gitbook build`，构建代码
3. 将build/dist目录下的所有文件夹推送至远程仓库的gh-pages分支，执行以下命令：
# 强制添加build(react项目)/dist/_book(gitbook项目)文件夹，因为.gitignore文件中定义了忽略该文件
git add -f build
# 提交到本地暂存区
git commit -m 'Initial the page of project'
# 部署dist目录下的代码
git subtree push --prefix build origin gh-pages
总结
上述步骤就能完成个人项目的在线演示demo，下次需要更新时，只需要重复2中的1.2.3步骤即可。这时候，只是切换到gh-pages即可。
我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1d19xpyplbd05
