前言

很多新手把自己的網(wǎng)頁(yè)上傳到github倉(cāng)庫(kù)中卻發(fā)現(xiàn)點(diǎn)進(jìn)去相應(yīng)的html文件顯示出來的是下面代碼，而不是自己想在網(wǎng)上看到自己倉(cāng)庫(kù)中的demo(也就是網(wǎng)頁(yè)的效果)

img

那么我們有沒有辦法預(yù)覽項(xiàng)目中的html網(wǎng)頁(yè)呢？好在github已經(jīng)推出了 GitHub Pages 功能，讓大家方便的預(yù)覽自己的 HTML。下面就給大家做一個(gè)簡(jiǎn)易教程。

步驟

1. 登入 GitHub，新建一個(gè) repo，設(shè)置如下：

img1

img2

2. 進(jìn)入「settings」頁(yè)面：

img3

3. 往下滾，按照?qǐng)D片中1-2-3的順序，開啟 GitHub Pages 功能，得到一個(gè)「預(yù)覽地址」，我的「預(yù)覽地址」是 https://phoebe-choi.github.io/demo/.

img5

4. 以后你就用這個(gè)「預(yù)覽地址」來預(yù)覽你的 html，比如你的 html 路徑是 test/index.html，那么預(yù)覽鏈接就是 https://phoebe-choi.github.io/demo/test/index.html 步驟如下:

img6

• 新建 test/index.html

img7

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

• 在瀏覽器輸入: https://phoebe-choi.github.io/demo/test/index.html進(jìn)行預(yù)覽

這樣，你就能自己隨時(shí)預(yù)覽 GitHub 里的頁(yè)面了！

以后，你只需要用 git 上傳代碼到這個(gè)倉(cāng)庫(kù)，就可以拿到作業(yè)的預(yù)覽鏈接了！