怎么预览 GitHub 项目里的网页或 Demo？

381970257

怎么预览？好多html文件不能直接在浏览器里看？一定要下载下来？

leixw319

在项目源代码页面链接前缀那加上
http://htmlpreview.github.com/?举个栗子:
需要打开的项目页面
https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html给加上前缀
http://htmlpreview.github.com/?
最终链接
http://htmlpreview.github.io/?https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html

fwei886

原文地址：
Github-README 中展示demo
因为图片没有被加载，建议大家去原文看

• 问题所在？
  
• 解决办法？
  
• 博主建议？
  

一：问题的所在
相信很多小胖友们在把自己的网页上传到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




第三步：预览githubPages




小胖友们看到这里一定会有疑问，预览到的是githubpages的效果，并不是你自己网页的效果，没关系，我下面为你们解答
第四步：查看你的分支




注意：我们生成githubPages的目的就是需要生成一个gh-pages分支(咱们正常情况下只有一个master分支)
第五步：将远程仓库克隆到本地
$ git clone git@github.com:sunningcarryhaha/flexSupplement.git
第六步：将分支切换到gh-Pages
  $ cd flexSupplement （进入到你克隆仓库的本地文件夹）  $ git checkout gh-pages（将master分支切换到gh-pages分支上）
第七步：并重新上传到github上
将本地克隆的文件删了，只留下.git,然后把你想要展示demo页面相关的文件粘进去
接着，执行以下语句
git add . （将本地所有文件加到仓库里）  git commit -m "message" （设置提交信息）  git remote add origin git@github.com:sunningcarryhaha/flexSupplement.git（本地仓库链接远程仓库）  git push -u origin gh-pages （push文件到仓库中）
第八步：修改地址
我的GithubPages地址是这个：http://carryguan.me/flex-add
我要预览flex-add中的fb1.html
我最后预览的地址应该是这个：flexbox
第九步：添加http://read.me
把地址放到http://read.me中
flex-add这是一个关于flexbox基础的骰子布局 [demo](http://carryguan.me/flex-add/fb1.html)
2: 增加路径前缀（不建议用，会自动更改css的样式）
在地址前加GitHub & BitBucket HTML Preview前缀（不建议用这个，会更改css样式）
例如，你想预览这个：
https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html

你在这个地址前加GitHub & BitBucket HTML Preview

最后预览demo地址是：
GitHub & BitBucket HTML Preview
三：博主感想

希望有更多小胖友提出宝贵意见,若有关于前端的问题，或者关于大学方面的感想可以私聊我(^~^)：
github
知乎
简书
微博

aixiaodewo

首先在原repo中创建一个gh-pages分支，然后把你master分支的东西都搬过来，将这个gh-pages作为你的HEAD主分支。如果想删掉master分支，需要在repo的settings中修改default branch为gh-pages再删除。
假设你在repo的根目录下有一个hello.html，那么现在可以使用链接
http://<username>.github.io/<projectname>/hello.html
来直接访问它。
参考：
Creating Project Pages manually

廖仁廉

在V2EX上看见一个非常非常好用的方法：
GitHub & BitBucket HTML Preview
把你github中html文档的链接直接复制进去，就ok了。
（原网址：
教你如何直接在github上预览html网页效果）

燕子779038

好像有点文不对题，我回答的是怎么对外展示自己的项目，题主问的是怎么方便看别人的项目
--------
对上面的回答进行补充。
1. 展示Demo你可以选择使用项目的哪个分支，所以并不需要新建分支。你完全可以直接用master分支；
2. 请把入口HTML文件命名为index.html，这样会自动展示该文件内容。
--------以下为详细步骤，win10亲测有效-------------
1. 进入项目的Settings

2. 找到GitHub Pages这一项，展开Source的下拉菜单，选择master branch（如果还有别的分支，你也可以选择别的），然后点击Save按钮，等待页面刷新。

设置好了之后，GitHub Pages那里会显示一个链接（见下图↓），点进去就是你的项目啦。

PS：如果点进去不是你的项目，而是显示的GitHub Pages的页面，检查下项目入口文件是不是命名为index.html并放在根目录下。