美文网首页
用GitHub来展示前端页面

用GitHub来展示前端页面

作者: 落雨飞尘 | 来源:发表于2017-06-30 09:49 被阅读0次

写在前面的话

  • 首先对大家说的是博主没有更新啊,对不起大家了!
    在前一年也就是2016年,博主还是小鲜肉一枚,所以遇到点困难就老是犯迷糊,也许是少年不识愁滋味吧。我写了前一篇文章就写过我的2016,我的2016是各种不顺利,各种鸡贼了,上一篇博文就是对我的2016告别吧,哎,真是我的记忆年,我想这辈子,这一年是永远也不会忘记吧。算了,牢骚就发到这里吧,说半天也不知云云,呵呵,这就是我的2016状态吧,毕竟人还要生活,所有忧愁所有烦恼到此结束了,不管有没有结束,我都要开启我的2017,我的2017加油,加油,再加油!

正文:

我要说的是用github发布你的静态页面,由于好久没有上传项目了(嘻嘻,不怪我,怪2016),发现github改版好大,我发现连发布项目的具体有点点变化,所以打算写出来。废话不多说,废话永远太多。

步骤

其实利用github来展示前端静态页面的例子很多,比如各种插件、框架的demo演示地址都会这样做,那么下面我们就来实际操作一下,体验一把展示自己前端项目成果的乐趣。

1.安装git

如果你是mac用户,那么恭喜你mac自带git命令功能,你无须安装git。如果你是windows用户,你可以前往windows地址下载并安装。
2.上传代码

第一步:建立git仓库
cd到你的本地项目根目录下,执行git命令
git init

第二步:将项目的所有文件添加到仓库中
git add . 如果想添加某个特定的文件,只需把.换成特定的文件名即可

第三步:将add的文件commit到仓库
git commit -m "注释语句"

第四步:去github上创建自己的Repository,创建页面如下图所示:

点击下面的Create repository,就会进入到类似下面的一个页面,拿到创建的仓库的https地址,红箭头标示的就是


第五步:重点来了,将本地的仓库关联到github上
git remote add origin https://github.com/lizhijian520/test.git
后面的https链接地址换成你自己的仓库url地址,也就是上面红框中标出来的地址

第六步,也就是最后一步,上传代码到github远程仓库
git push -u origin master
执行完后,如果没有异常,等待执行完就上传成功了,中间可能会让你输入Username和Password,你只要输入github的账号和密码就行了。
然后最后打开github网站你的项目是不是上传成功


3.发布静态网页

代码上传成功之后就可以发布静态网页了,细心的童鞋应该已经看到我上传的代码在根目录就有一个html文件(默认要识别html)。

第一步:点击setting,如图所示,默认就好



把这些改动都保存后,然后查看你的页面展示地址,就可以看到你发布的项目啦,赶紧动手试一试吧!

相关文章

  • 用GitHub来展示前端页面

    写在前面的话 首先对大家说的是博主没有更新啊,对不起大家了!在前一年也就是2016年,博主还是小鲜肉一枚,所以遇到...

  • 用github来展示你的前端页面吧

    前言 经常会有人问我如何才能将自己做的静态页面放到网上供他人欣赏,是不是需要自己有一个服务器,是不是还要搞个域名才...

  • [转]用github来展示你的前端页面吧

    前言 经常会有人问我如何才能将自己做的静态页面放到网上供他人欣赏,是不是需要自己有一个服务器,是不是还要搞个域名才...

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

    从开始学习前端的时候就在想如何可以把自己做的前端效果直接通过分享链接的方式展现给别人看就好了,之前一直以为必须要买...

  • js实现layui搜索树数据构造

    项目前端使用layui来渲染页面,其中树形数据展示用layui.tree.render()实现,生成类似以下图: ...

  • hexo + github 搭建个人博客

    在我之前写的一片文章 用 github 展示 html 中,介绍了如何使用 github 展示你的静态页面。eg:...

  • github建站展示(前端必备 静态页面)

    (动态网站展示外网请参考另外一篇文章,这个仅限于静态网站)google一下了解到Github有一个Github p...

  • 分页

    分页的实现 前端页面中的展示

  • router 路由与 a 标签的区别

    1、 什么是路由? 路由是根据不同的URL来展示不同的内容或页面;前端路由就是把不同路由对应的不同页面或内容的展示...

  • 面试成功锦囊之页面布局

    说起前端开发,首先会想到页面布局,作为资深前端来说,用页面布局来谈前端可能会认为太浅显,但作为前端开发中最基础的技...

网友评论

      本文标题:用GitHub来展示前端页面

      本文链接:https://www.haomeiwen.com/subject/zjsbcxtx.html