怎麼預覽 GitHub 項目里的網頁或 Demo？
怎麼預覽？好多html文件不能直接在瀏覽器里看？一定要下載下來？
原文地址：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$ 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
知乎簡書微博
在項目源代碼頁面鏈接前綴那加上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
首先在原repo中創建一個gh-pages分支，然後把你master分支的東西都搬過來，將這個gh-pages作為你的HEAD主分支。如果想刪掉master分支，需要在repo的settings中修改default branch為gh-pages再刪除。
假設你在repo的根目錄下有一個hello.html，那麼現在可以使用鏈接
/hello.htmlhttp://&
來直接訪問它。
參考：Creating Project Pages manually註：本答案是解決 如何預覽別人的githubPage的方法，不是預覽你自己的
RawGit
把你想看的github page地址粘貼到這裡，下面就會自動生成預覽鏈接
在V2EX上看見一個非常非常好用的方法：GitHub BitBucket HTML Preview把你github中html文檔的鏈接直接複製進去，就ok了。（原網址：教你如何直接在github上預覽html網頁效果）
搞了半天，先搜索百度，看了好一會，還是沒搞懂再搜GOOGLE，慢慢的就清楚了，難怪大家編程建議用GOOGLE
有三種方法，自己測試後完全可用：
以下usename是你的GITHUB用戶名1.如果是建用戶主頁，比如用於建個人求職簡歷，極為簡單，把庫命名為http://username.github.io就行了，然後庫裡面再簡歷並寫index.html，再建一個JS文件夾放JS，建一個photo文件夾放相片，OK，done！ http://username.github.io/ 直接訪問就行了，簡單粗暴！ 2. 剛才建的是用戶網頁，域名最短，但是只能建一個，如果是項目，就需要建多個，需要用項目網頁法 ，項目網頁最簡單的方法：點擊index.html進入，複製該頁地址,在地址前加http://htmlpreview.github.io/?就可以訪問了 ，但是域名較長3.這種方法域名更加直接，就是在桌面端創建一個庫，並在master基礎上生成gh-pages,然後更新，上傳至網上，然後用如下網址就可以訪問了O http://usename.github.io/repo_name 。http://htmlpreview.github.io/可以如同樓上所說在這裡看，但是會自動加上很多js額外代碼。
剛用github兩天，一直不懂人家怎麼在自己的githubpage上展示demo，看了教程心想著難道每次要展示一個新的demo都要再創建一個githubpage？,折騰半天。
純小白，把樓上的詳細說一下，就是在自己項目主頁上再創建個gh-pages分支，把原先分支里你想要展示的內容拷過去。比如HTML、css文件。 我用的本地github客戶端。
然後在項目主頁點擊setting，裡面找到Launch automatic page generator就行。 一直跟著提示走什麼風格啊 名字啊最後完成就行。就會生成你自己的站點。把名字拷下來，後面再加個你想展示的demo名字就行，
最後想展示gh-pages哪個文件就像樓上所說，在主頁地址後面加上這個文件名 xx.html 就行。好像有點文不對題，我回答的是怎麼對外展示自己的項目，題主問的是怎麼方便看別人的項目
--------
對上面的回答進行補充。
1. 展示Demo你可以選擇使用項目的哪個分支，所以並不需要新建分支。你完全可以直接用master分支；
2. 請把入口HTML文件命名為index.html，這樣會自動展示該文件內容。
--------以下為詳細步驟，win10親測有效-------------
1. 進入項目的Settings
2. 找到GitHub Pages這一項，展開Source的下拉菜單，選擇master branch（如果還有別的分支，你也可以選擇別的），然後點擊Save按鈕，等待頁面刷新。
設置好了之後，GitHub Pages那裡會顯示一個鏈接（見下圖↓），點進去就是你的項目啦。
PS：如果點進去不是你的項目，而是顯示的GitHub Pages的頁面，檢查下項目入口文件是不是命名為index.html並放在根目錄下。
其實...只需要在你打開的github靜態頁面的URL最前面加上
/ 替換成 #
http:##htmlpreview.github.io#? 就可以了...
舉個例子:https:##github.com#user#project#index.html
預覽地址: http:##htmlpreview.github.io#?https:##github.com#user#project#index.html
推薦閱讀：
※github誤操作求救？
※在Github被封號了怎麼辦?
※github與國內coding,oschina相比，有哪些優勢？
※Github traffic的原理是什麼？
※github的自動頁面生成問題？
TAG:GitHub |