github在README中展示demo
2017年更新,现在github再master分支直接就可以操作,所以我改了这篇文章
- 问题所在?
- 解决办法?
- 博主建议?
一:问题的所在
相信很多小胖友们在把自己的网页上传到github仓库中,都会有一个疑问?是什么呢?
那就是上传完网页后,自己的仓库中是这个样子的
,点进去相应的html文件是出来的是代码
可是自己想在网上看到自己仓库中的demo(也就是网页的效果)
下面博猪为您解答 (^~^)
二:解决问题的方法
1: 使用 Githubpages
比如我要上传
按照如下四个步骤上传到名为:flexSupplement的仓库中
git init (初始化本地仓库)
git add . (将本地所有文件加到仓库里)
git commit -m "message" (设置提交信息)
git remote add origin git@github.com:sunningcarryhaha/flexSupplement.git(本地仓库链接远程仓库)
git push -u origin master (push文件到仓库中)
重头戏来了哟!
我们现在点击这个html文件,出现的效果全是代码
,没有咱们想要的demo效果
此时呢,应该植入咱们github爸爸的一个好东西,那就是-githubPages
第一步:找到Settings,点击
第二步:找到githubPages点击none,切换到master branch,save保存
save保存
第三步:保存后出现了连接,点击
小胖友们看到这里一定会有疑问,预览到的是githubpages的效果,并不是你自己网页的效果,没关系,我下面为你们解答
第四步:修改地址
我的GithubPages地址是这个:http://carryguan.me/flex-add
我要预览flex-add中的fb1.html
我最后预览的地址应该是这个:http://carryguan.me/flex-add/fb1.html
第九步:添加read.me
把类似下面代码到read.me中
flex-add
这是一个关于flexbox基础的骰子布局
[demo](http://carryguan.me/flex-add/fb1.html)
2: 增加路径前缀(不建议用,会自动更改css的样式)
在地址前加http://htmlpreview.github.io/?前缀(不建议用这个,会更改css样式)
例如,你想预览这个:
https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html
你在这个地址前加http://htmlpreview.github.io/?
最后预览demo地址是:
http://htmlpreview.github.io/?https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html
作者:sunningcarry
链接:http://www.jianshu.com/p/75e30889e70a
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
github在README中展示demo的更多相关文章
- 视频转成在github的readme中展示项目的gif动图
本文中涉及的FastStone Capture和FFmpeg两个软件的百度网盘链接: 链接:https://pan.baidu.com/s/1D5LO9Qmjl-vwJZfnbAloyQ 提取码:56 ...
- Github中展示demo
原文链接http://www.jianshu.com/p/75e30889e70a 第一步:找到Settings,点击 第二步:找到githubPages点击none,切换到master branch ...
- 如何通过github上传项目并在readme.md中展示图片二维码
将本地项目上传至github 第一步:git init (创建仓库) 第二步:git add README.md (添加项目)git add * 第三步:git commit -m &qu ...
- 如何在github的README.md中添加图片
如何在github的README.md中添加图片 总结: 链接引用:![Image text](图片的链接地址) 简介: 1.在github上的仓库建立一个存放图片的文件夹,文件夹名字随意.如:img ...
- 【GitHub】 README.ME 格式
README =========================== 该文件用来测试和展示书写README的各种markdown语法.GitHub的markdown语法在标准的markdown语法 ...
- 【译】10 款国外实用、有趣的 GitHub 简介 README
本文翻译自 dev.to 文章<10 Standout GitHub Profile READMEs> 原文链接见:https://dev.to/github/10-standout-gi ...
- 如何用Github的gh-pages分支展示自己的项目
很多新同学觉得github不就是一个代码托管所吗,如何能展示项目呢?其实完全可以借助Github的gh-pages打造出自己的一个作品集,无论是对自己的提升整合还是日后的面试都大有裨益. 前置准备 G ...
- OC基础之推荐一个旋转木马(跑马灯)效果的图片展示Demo
这个旋转木马(跑马灯)效果的图片展示Demo,包括设定旋转方向,图片倒影,背景设置,旋转速度,开始结束,点击显示选中的图片,彩色的块展示等等功能 效果图:(源码下载:https://github.co ...
- 从后台读取项目文件在前端iframe中展示
项目中有个需求是: 对于外部提供的前端项目,包含css.js.html.图片等的项目,将这个项目存进数据库,然后iframe中展示html,然后html中引用的js.css等文件 也能从数据库中读取并 ...
随机推荐
- Java Itext 生成PDF文件
利用Java Itext生成PDF文件并导出,实现效果如下: PDFUtil.java package com.jeeplus.modules.order.util; import java.io.O ...
- phonegap在eclipse上的安装
1.首先安装好eclipse 2.下载安装好sdk 3.下载安装好adt 4.在这个地方下载好phonegap的包,https://codeload.github.com/phonegap/phone ...
- python--修改默认递归层级
import sys sys.setrecursionlimit(最大递归次数)
- ACM_小Z的A+B
小Z的A+B Time Limit: 2000/1000ms (Java/Others) Problem Description: 小Z最喜欢A+B了,没事就研究研究,比如什么大整数A+B(就是100 ...
- 8.Layers Editor
图层编辑 Ventuz5中有两种类型的场景,分别是2D图层和3D图层.3D图层包含Content和Hierarchy,而2D图层只包含Content.默认情况下,图层编辑器显示在Ventuz中的左上角 ...
- Android开发问题-真机调试连接
出现“no debuggable processes”可以: 1)尝试Tools->android->Enable ADB Intergration使之选中: 2)换一根数据线试试. 初次 ...
- [ Java ] [ UT ] [ Mock ] [ JUnit ] 單元測試的撰寫
最近新的專案用到很多的單元測試,對於單元測試有多了一歇的了解. 先寫下大綱,後面分篇寫出總結心得. 1. 單元測試要隔離對外部的關聯 2. Mock, spy 的用法時機差異 3. JUnit 4, ...
- [转]Learn SQLite in 1 hour
转载说明: 1.原文地址:http://www.askyb.com/sqlite/learn-sqlite-in-1-hour/ 2.译文地址:http://www.oschina.net/quest ...
- 【译】x86程序员手册15-5.2页转换
5.2 Page Translation 页转换 In the second phase of address transformation, the 80386 transforms a linea ...
- CSS固定布局:960GS
960栅格系统 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...