前言

很多新手把自己的網頁上傳到github倉庫中卻發現點進去相應的html檔案顯示出來的是下面程式碼，而不是自己想在網上看到自己倉庫中的demo(也就是網頁的效果)

  img

那麼我們有沒有辦法預覽專案中的html網頁呢？好在github已經推出了 GitHub Pages 功能，讓大家方便的預覽自己的 HTML。下面就給大家做一個簡易教程。

步驟

1. 登入 GitHub，新建一個 repo，設定如下：

  img1   img2

2. 進入「settings」頁面：

  img3

3. 往下滾，按照圖片中1-2-3的順序，開啟 GitHub Pages 功能，得到一個「預覽地址」，我的「預覽地址」是 https://phoebe-choi.github.io/demo/.

  img5

4. 以後你就用這個「預覽地址」來預覽你的 html，比如你的 html 路徑是 test/index.html，那麼預覽連結就是 https://phoebe-choi.github.io/demo/test/index.html 步驟如下:

  img6

• 新建 test/index.html

  img7

• 編輯好後點擊下方的create new file即可建立檔案，根據剛才建立的檔名稱的相對路徑就可以用「預覽地址」來預覽html檔案了

• 在瀏覽器輸入: https://phoebe-choi.github.io/demo/test/index.html進行預覽

這樣，你就能自己隨時預覽 GitHub 裡的頁面了！

以後，你只需要用 git 上傳程式碼到這個倉庫，就可以拿到作業的預覽連結了！