一文教你使用GitHub Pages部署靜態網頁

在上一篇文章部署明星關係圖譜那些事兒（GitHub Pages） 的最後，古柳講到了GitHub Pages不只能夠用來搭我的博客，並且能單獨部署靜態網頁（HTML/CSS/JS，而不涉及後端），鑑於自身在部署明星關係圖譜時，查閱的幾篇中文博客內容（可能沒搜對關鍵詞的緣故）都不太能解答我關於實操過程的困惑，最後還得感謝這篇簡潔明瞭的英文文章：Use Github Static Pages to Host Your Front End Projects，助我成功部署，因此古柳也簡單講下實踐步驟，但願能幫到有須要的人，對GitHub和Git熟悉的朋友直接拉到Git命令處便可，或者看原文也行。

古柳一開始的困惑是，我已經用GitHub Pages搭建過我的博客，其對應的GitHub倉庫是：DesertsX/desertsx.github.io，裏面已經有master主分支；

而網上說部署網頁項目時最好將代碼文件提交到gh-pages分支，因而搞不清楚究竟是在desertsx.github.io我的博客項目裏新建gh-pages分支（我還真這麼幹過，逃），仍是另外開個GitHub倉庫，而後在裏面的gh-pages分支裏提交，對後者的困惑是這麼作就同時存在兩個蠻相關的項目倉庫，怕出問題（後面發現其實也沒有）。

等看了Use Github Static Pages to Host Your Front End Projects一文，發現代碼清晰明瞭，因而就照着作了，採起的就是第二種方式。

下面就是實操步驟，默認你們對GitHub與Git有所瞭解，首先GitHub的帳號是必須的，註冊登陸便可；接着建立一個新項目，點右上角+號處的New repository或者直接打開 github.com/new ；在Repository name處填寫倉庫名稱，由於和後續網頁展現的URL掛鉤，建議取個可讀性好點的名稱，好比本次明星關係圖譜的項目名叫yulequan-relations-graph，對應展現的網址就是 desertsx.github.io/yulequan-re…；最後點綠色按鈕Create repository，一個空的倉庫就建立成功（不帶readme.md和.gitignore），後續只需將本地倉庫的代碼推送到此處便可。

接着切換到你們本地保存有前端項目代碼的文件夾下，或是你本身寫的，或是從GitHub某處上git clone下來的，又或者就是用的古柳的明星關係圖譜來練手（其實不太推薦，由於項目裏涉及小1.3k張圖片約140Mb，下載和上傳均可能耗些時間，考慮到這點，我可能會將項目打包壓縮放到百度網盤裏，雖然也不見得能快多少），而後進入Git命令行的模式，window用戶安裝Git後在文件夾裏右鍵Git Bash Here便可。

本文不對Git作過多介紹，默認你們已經完成安裝配置，沒有的能夠看看：Git 安裝配置和Git 遠程倉庫(Github)；小白能夠看這篇指南快速瞭解下：Git- 簡明指南 - 助你入門 Git的簡明指南，木有高深內容；想系統學習的能夠看：Git 教程- 廖雪峯的官方網站；想快速查找命令的能夠看：經常使用 Git 命令清單。

接下來先看看本項目的webapp/文件夾的目錄結構，必須放在根目錄下index.html，打開：https://desertsx.github.io/yulequan-relations-graph/渲染出來的頁面就是index.html；static文件夾下分別是包含全部明星圖片的images/star/文件夾，包含CSS和JS外部文件的lib/文件夾，以及符合本項目格式要求的ylq_star_relation_graph_v2.json數據。因爲本次用到開源項目grapheco/InteractiveGraph，因此只須要關注想展現什麼樣的數據，如何爬取數據，並將通常的csv數據轉換成json數據便可。

webapp
├─ index.html
├─ show.png
├─ static
│    ├─ images
│    │    └─ star
│    ├─ lib
│    │    ├─ font-awesome-4.7.0
│    │    ├─ interactive-graph-0.1.0
│    │    └─ jquery-3.2.1
│    └─ ylq_star_relation_graph_v2.json複製代碼

最後就是本文的重點，若是你對GitHub和Git很熟悉，上面瑣碎的講解徹底能夠忽略，直接看這部分就行。注意下述命令均在項目所在的webapp文件夾下運行。快速查找命令可看：經常使用 Git 命令清單。

# 將該文件夾變成用git管理的本地倉庫
git init
# 查看全部文件，多出 .git 文件
ls -al

# 新建後對項目進行介紹
touch README.md
# 新建後能夠寫入後續不想提交到GitHub上的文件
touch .gitignore
# 列出全部本地分支和遠程分支，倉庫默認在 master 分支

git branch -a
# 新建並切換到 gh-pages 分支
git checkout -b gh-pages
# 顯示有變動的文件
git status
# 刪除 master 分支
git branch -d master

# 添加當前目錄的全部文件到暫存區
git add .
# 提交暫存區到倉庫區，並添加代碼提交信息
git commit -m 'first commit'

# 添加遠程倉庫
git remote add origin git@github.com:DesertsX/yulequan-relations-graph.git
# 把本地的 gh-pages 分支推送到 origin 服務器上
git push origin gh-pages複製代碼

刷新GitHub倉庫：DesertsX/desertsx.github.io，本地倉庫的文件提交成功後，GitHub倉庫裏就不是空的了，而後查看部署後的網頁效果：desertsx.github.io/yulequan-re…，沒問題後就大功告成了。

若是後續本地倉庫裏修改了什麼文件，再git add commit push三連便可。

git status
git add .
git commit -m '添加展現圖片和README說明'
git push origin gh-pages複製代碼

最後本地倉庫的目錄結構大體如此。

webapp
├─ .git
├─ .gitignore
├─ README.md
├─ index.html
├─ show.png
├─ static
│    ├─ images
│    │    └─ star
│    ├─ lib
│    │    ├─ font-awesome-4.7.0
│    │    ├─ interactive-graph-0.1.0
│    │    └─ jquery-3.2.1
│    └─ ylq_star_relation_graph_v2.json複製代碼

以上就是所有內容，但願本文對想部署靜態網頁項目的人有用。

最後歡迎關注「牛衣古柳」哈！