如何在github上创建个人项目的在线演示demo

背景

以前是看到别人的GitHub上的项目源码中，后面会跟着一个网址，是该项目的demo，可是就单纯的没有再去思考，我是不是也可以把自己的项目这样放到GitHub上去，让它启动起来，不再是冰冷的code。现在要去打破这种对未知事物的恐惧，要多尝试。

Github项目主页

GitHub Pages是一个静态站点托管服务，旨在直接从GitHub存储库托管您的个人，组织或项目页面。

GitHub Pages是一个静态站点托管服务，不支持服务器端代码，例如PHP，Ruby或Python。

GitHub上新建项目

1. 打开自己的GitHub主页，点击右上角的+按钮

install1.png

2. 点击【New repository】，进入到Create a new repository页面。

install2.png

3. 上面的步骤是在GitHub上创建了一个空白项目，下面还要clone到本地来创建实质code。

4. 复制远程地址，然后在本地项目目录下，使用git clone命令来克隆远程仓库的项目。

install3.png

git clone [https://github.com/springHyc/FlexBoxDemoStation2.git](https://github.com/springHyc/FlexBoxDemoStation2.git)

5. 然后生成自己的项目，比如我使用react来写的自己的FlexBoxDemoStation项目。

项目生成主页

1. 将写好的项目推送到远程仓库的主分支

  git add .
  git commit -m "xxx"
  git push origin master

2. 执行项目构建命令，并将构建后的静态页面推送至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