如何用github来展示你的前端页面?

从开始学习前端的时候就在想如何可以把自己做的前端效果直接通过分享链接的方式展现给别人看就好了,之前一直以为必须要买域名,空间,还要会后台数据库什么什么的,还没开始就被吓到了,这段时间终于静下心来好好学习了,这才发现github还有这操作,真是相见恨晚呀,好啦废话就到这里,下面我们一起来看看如何用github来展示你的前端页面吧~

准备

1.注册github账号

2.安装git

3.常用 Git 命令

开始

1.建立仓库

在你的github主页,我们可以点击右上角的加号按钮下的“New repository”来新建一个项目仓库,如图所示:



2.上传代码

(1)打开你的目录


(2)初始化版本库,用于生成.git文件

git init


(3)将所有文件添加到缓存区

git add .


(4)提交当前工作空间的修改内容

git commit -m "first commit"


(5)将仓库连接到远程服务器

git remote add origin https://github.com/chentong95/shopping_cart.git


(6)将改动推送到所添加的服务器上

git push -u origin master


3.创建gh-pages分支

之前的工作只是将我们的代码发布到了github上demo仓库的master分支上,当然你也可以不发布,而我们的展示页面代码必须发布到名为“gh-pages”的分支上。方法很简单,我们只需要在github的demo项目页面手动创建gh-pages分支即可。如图:

输入gh-pages后创建即可,这样的方式会直接拷贝master分支的所有文件到gh-pages分支,而你也可以用命令行的形式创建并重新上传一份新的代码:

(1)新建并切换到gh-pages分支

git checkout --orphan gh-pages


(2)之后的操作和之前一样,只是push的时候是gh-pages

git add .

git commit -m "update"

git push -u origin gh-pages


如此,我们的demo项目就多了一个gh-pages分支,里面的代码文件就可以用来展示页面了。


4.访问页面

http://username.github.io/repo_name

此处我的url是

https://chentong95.github.io/demo/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,636评论 7 249
  • 今天上午学习了字符数组,二维数组。 二维数组同数组一样,只有在定义的时候可以连续赋值,之后一次只可以赋一次值。...
    黄晓雪i阅读 143评论 0 0
  • 不怕大家见笑,我第一次听到“传销”二字,还是在上大学前,我的父亲,在一次看电视新闻时,突然跟我说了句,上大学后不要...
    Cherish5240阅读 567评论 5 10
  • 上一章 在吴瑞恩乘坐的飞机落地到斯德哥尔摩开始,力达就一直监视着吴瑞恩的行踪。在提婆达多给力达下达了暗杀吴瑞恩等三...
    marvinmwb阅读 144评论 0 0
  • 我们有多达千种不同诊断和疾病。疾病只是身体系统的连接松脱了,并且全都是同一原因——压力——所造成的结果。只要施加足...
    承思而行阅读 287评论 0 0