专栏首页贺贺的前端工程师之路如何在github上创建个人项目的在线演示demo

如何在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即可。

我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1d19xpyplbd05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • GIT 安装

    上面是国内某牛人的git介绍。想详细了解git的同学可以访问一下的网址,花几分钟的时间学习一下世界上最先进的分布式版本控制系统!

    贺贺V5
  • React Advanced Topics

    大家都在试用React,之前呢,也给大家分享过一次主题为“浅谈Hooks&&生命周期”的内容,今天呢,作为延伸,来继续给大家介绍一些React的Advanced...

    贺贺V5
  • moment小知识点

    moment中常用的一些数据:昨天,今天、本周、上周、前一周、本月、上月、前一月、前一个月、今年,去年,前一年等等;

    贺贺V5
  • JavaScript 设计模式系列 - 策略模式与动态表单验证

    策略模式 (Strategy Pattern)又称政策模式,其定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换。封装的策略算法一般是独立的,策略模...

    前端下午茶
  • 使用git将本地项目推送到码云私有仓库

    十里桃花舞丶
  • 硬件设计中教你如何正确约束时钟—Vivado优化到关键路径

    大侠好,欢迎来到FPGA技术江湖,江湖偌大,相见即是缘分。大侠可以关注FPGA技术江湖,在“闯荡江湖”、"行侠仗义"栏里获取其他感兴趣的资源,或者一起煮酒言欢。

    FPGA技术江湖
  • 如何正确的约束时钟—Vivado优化到关键路径

    今天给大侠带来硬件设计中教你如何正确的约束时钟—Vivado优化到关键路径,话不多说,上货。

    FPGA技术江湖
  • Hexo博客详细教程(一)| 建立本地站点

    Nodejs可以从官网( https://nodejs.org/en )下载LTS版本:

    Mculover666
  • 内网域自动化渗透

    今天来给大家分享一个开源的项目,感觉挺有意思的,先来看一下这个项目的 demo 演示!

    信安之路
  • git基础之github使用入门

    参加实习以后,开始接触多人协作开发工具,前期主要是svn,现在工作中已经全面使用git。公司的项目目前放在gitlab上,所以平时涉及的操作比较简单,加之之前s...

    love丁酥酥

扫码关注云+社区

领取腾讯云代金券