1. 前言

作為一個前端程序員，使用github的倉庫(repositories)來托管代碼是一件再正常不過的事情了。很多的前端都會將自己的工程代碼push到github上。然而上傳之后發(fā)現(xiàn)自己的html文檔是這樣被顯示的：

在倉庫repositories點開html

發(fā)現(xiàn)點開之后只有html的源代碼，并沒有能預(yù)覽的界面。那么如何能正確的預(yù)覽項目中的html網(wǎng)頁呢？

好在github已經(jīng)推出了 GitHub Pages 功能，讓大家方便的預(yù)覽自己的 HTML。下面就給大家做一個簡易教程。

2. 預(yù)覽方法

1. 登錄github，點擊新建倉庫(repositories)，如下圖所示：

   
   
   點擊新建倉庫

2. 新建一個倉庫(repositories):

   
   
   新建一個倉庫

3. 在倉庫中進(jìn)入setting界面

   
   
   進(jìn)入setting界面

4. 在setting界面中往下翻，找到并開啟 GitHub Pages 功能，得到一個「預(yù)覽地址」，我的「預(yù)覽地址」是https://tinyfatboy.github.io/PageDemos/
   

   開啟GitHub Pages 功能

5. 得到「預(yù)覽地址」后就可以根據(jù)相對路徑來預(yù)覽自己的html文檔了，我們先在倉庫中新建一個test.html:

   
   
   新建test.html文件1
   
   
   新建test.html文件2

6. 編輯好后點擊下方的create new file即可創(chuàng)建文件，根據(jù)剛才創(chuàng)建的文件名稱的相對路徑就可以用「預(yù)覽地址」來預(yù)覽html文件了
   

   頁面地址
   
   在瀏覽器輸入: https://tinyfatboy.github.io/PageDemos/test.html 進(jìn)行預(yù)覽
   預(yù)覽頁面

3. 用git將本地倉庫上傳到github倉庫預(yù)覽（待續(xù)...）

4. 參考文件

1. 如何預(yù)覽 GitHub 上的頁面
2. GitHub Pages官方教程