1.問題所在:
之前把項目提交到github都可以在路徑前面加上http://htmlpreview.github.io/?來預覽demo,最近發現這種方式預覽的時候加載不出來css,js(原因不詳)所以找了另外一種辦法來預覽加載
當我們在本地寫好一個小項目的時候用webStrom上傳到github(上傳方法參考http://www.cnblogs.com/hfxm/p/5633910.html)之后倉庫是這樣的:
點擊html頁面出來的是代碼,無法看到顯示的網頁效果
可是自己想看到自己的網頁效果怎么辦~~~
2.解決問題的方法:利用githubPage
第一步找到settings
第二步:點擊后找到 GitHub Pages 點擊Launch automatic page generator
接着點擊右下角 Continue tolayouts
接着點擊puhlish page
第三步: 回到我們的倉庫whuchool,點擊master出現了gh-pages
小胖友們看到這里一定會有疑問,預覽到的是githubpages的效果,並不是你自己網頁的效果,沒關系
注意:我們生成githubPages的目的就是需要生成一個gh-pages分支(咱們正常情況下只有一個master分支)
第四步:將遠程倉庫重新克隆到本地
這里我用的git工具克隆,打開我們本地頁面右鍵選擇git Bath here
在git里面輸入命令:
此時本地文件里面又多了一個同樣名字的倉庫文件
第五步:將分支切換到gh-Pages
$ cd whuschool(進入到你克隆倉庫的本地文件夾)
$ git checkout gh-pages(將master分支切換到gh-pages分支上)
第六步:並重新上傳到github上
將本地克隆的文件刪了(e/yue/whuschool/whuschool里面的文件刪了),然后把你想要展示demo頁面相關的文件粘進去
接着,執行以下語句
$ git add . (將本地所有文件加到倉庫里) $ git commit -m "message" (設置提交信息) $ git remote add origin git@github.com:lanyanjing-2016/whuschool.git(本地倉庫鏈接遠程倉庫) $ git push -u origin gh-pages (push文件到倉庫中)
再打開我們的倉庫選着gh-pages看到的就是我們自己的代碼了
接下來點擊setting,找到我們的gh-pages地址就可以預覽了
我們想預覽里面的index.html 就可以在地址欄輸入https://lanyanjing-2016.github.io/whuschool/index.html
效果就出來了。。。。。