前言：最近在寫vue+element ui 的一些demo，就在github上建了個倉庫來管理，但是希望能直接在github上就能預覽效果，所以才有了這篇文章。轉載請註明出處：https://www.cnblogs.com/yuxiaole/p/9346160.html

github 上預覽html有兩種方式，我自己采取的方式一。我的項目地址：https://github.com/yuleGH/vue-element-test

第一種：GitHub pages 的方式

GitHub Pages也有多種方式，可以參考官網 ：https://pages.github.com/ ，我這裏講解GitHub Pages的其中一種方式。

1、在github倉庫中點擊Settings

2、進入Settings頁面後，向下滾動，找到 GitHub Pages，如下圖。然後點擊 Choose a theme 按鈕。

3、選擇一個主題，點擊 Select theme 按鈕，我這裏選擇的是 MINIMAL 主題。

4、回到倉庫的 Settings 裏面，就會看到 GitHub Pages 裏面會有下圖紅框的東西。

5、點擊上圖的紅框中的地址，會進入下圖的這個頁面。

　　這個頁面中，是展示項目的topic和README文件內容。

　　如果我們要訪問某個html文件(如果 有多個的話)，比如我這裏要訪問某個頁面，只需要在https://yulegh.github.io/vue-element-test/鏈接後加入對應的html相對路徑即可。

6、訪問某個html示例 ： https://yulegh.github.io/vue-element-test/dialog/notification/notification.html，這個文件在項目中的位置如下圖所示。

7、如果想要在這個項目中加上主頁，而不需要使用主題（即第5步的頁面）當主頁，那就在項目下建一個 index.html 頁面即可，我這裏訪問 https://yulegh.github.io/vue-element-test/ ，就會顯示index.html的內容。

第二種：使用 https://htmlpreview.github.io/?

1、找到想要預覽的html地址，如下圖

2、然後在這個地址前加上 https://htmlpreview.github.io/?，即訪問地址為：https://htmlpreview.github.io/?https://github.com/yuleGH/vue-element-test/blob/master/dialog/notification/notification.html，效果如下圖。

　　這種方式感覺不太穩定，console裏面也會報錯，所以建議采用 GitHub Pages 方式。

轉載請註明出處：https://www.cnblogs.com/yuxiaole/p/9346160.html

github 上如何直接預覽倉庫中的html