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

背景

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

Github项目主页

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

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

GitHub上新建项目

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

install1.png

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

install2.png

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

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

install3.png

git clone [https://github.com/springHyc/FlexBoxDemoStation2.git](https://github.com/springHyc/FlexBoxDemoStation2.git)
  1. 然后生成自己的项目,比如我使用react来写的自己的**FlexBoxDemoStation**项目。

项目生成主页

  1. 将写好的项目推送到远程仓库的主分支
  git add .
  git commit -m "xxx"
  git push origin master</pre>
  1. 执行项目构建命令,并将构建后的静态页面推送至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即可。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页