本篇記錄了如何通過(guò)GitHub Page發(fā)布個(gè)人網(wǎng)頁(yè)，所以適合以下設(shè)計(jì)師閱讀：
-
有一定前端知識(shí)；
-
想在網(wǎng)頁(yè)上顯示點(diǎn)什么又不想麻煩去折騰域名和服務(wù)器；
-
有Mac電腦，我還沒(méi)研究Windows。
相關(guān)文章有很多，官網(wǎng)也寫得很詳細(xì)，我寫得有點(diǎn)啰嗦了，因?yàn)槭堑谝黄P(guān)于GitHub的文章所以盡量介紹詳細(xì)點(diǎn)，避免日后查。之后還會(huì)寫一篇用GitHub搭建靜態(tài)博客，也就是CMS(內(nèi)容管理系統(tǒng))的文章。
以下正文：
1.起源最早學(xué)習(xí)前端的時(shí)候就寫過(guò)一些頁(yè)面，也想自己部署到服務(wù)器上，但是又不想折騰域名和服務(wù)器（域名要購(gòu)買還要備案，服務(wù)器也需要購(gòu)買）。所以一直沒(méi)有做這件事，準(zhǔn)備簡(jiǎn)歷的時(shí)候放的也是本地的代碼。
直到前兩天，因?yàn)楣竟倬W(wǎng)下線無(wú)法訪問(wèn)（公司官網(wǎng)是我寫的一個(gè)靜態(tài)頁(yè)面），所以才想是否還有別的方式可以展示，于是找到這么個(gè)神器GitHub Page。GitHub都不陌生，畢竟全球最大男性交友網(wǎng)站世界上最大的代碼存放網(wǎng)站和開(kāi)源社區(qū)1。它旗下GitHub Page更是可以免費(fèi)托管你的靜態(tài)頁(yè)面，雖說(shuō)空間不限，但據(jù)說(shuō)體積要控制在1G以下2。
折騰了半天總算是成功發(fā)布了頁(yè)面，官方文檔介紹得也非常詳細(xì)，以下是我操作過(guò)后的具體步驟。
2.注冊(cè)GitHub賬號(hào)注冊(cè)地址：https://github.com/join?source=login
自行注冊(cè)。
3.創(chuàng)建Git倉(cāng)庫(kù)（Repository）點(diǎn)擊右上角的加號(hào)創(chuàng)建倉(cāng)庫(kù)
填寫倉(cāng)庫(kù)名稱就可以點(diǎn)擊下面的綠色按鈕創(chuàng)建了。
其中：
-
Description——倉(cāng)庫(kù)描述，選填；
-
Public，Private——GitHub限制免費(fèi)用戶只能創(chuàng)建公開(kāi)倉(cāng)庫(kù)；
-
Initialize this repository with a README——初始化倉(cāng)庫(kù)時(shí)添加README，readme是一個(gè)說(shuō)明文件，用markdown語(yǔ)法編寫，打上勾的話就默認(rèn)添加了這個(gè)文件，如果不打勾后期也可以自己添加；
創(chuàng)建好倉(cāng)庫(kù)后顯示下圖頁(yè)面，點(diǎn)擊紅框標(biāo)記按鈕復(fù)制倉(cāng)庫(kù)地址。
這時(shí)候需要用到Git命令了 ，Git是一個(gè)分布式版本控制軟件3，我們就通過(guò)Git命令來(lái)同步和管理代碼。
Git的安裝參考這篇文章：安裝Git
安裝好之后初次運(yùn)行Git需要做一些配置：
-
打開(kāi)系統(tǒng)自帶的Terminal；
-
設(shè)置username和email，github每次commit（提交代碼）都會(huì)記錄他們，在Terminal中分別輸入以下代碼；
git config --global user.name "你的用戶名"git config --global user.email "你的郵箱"
-
一般來(lái)說(shuō)這樣就可以了，如果考慮到傳輸安全的問(wèn)題，可以考慮加上SSH協(xié)議，具體操作可以搜索“SSH keys Git”關(guān)鍵詞。
配置完Git之后，選擇一個(gè)本地文件夾來(lái)存放你的云端倉(cāng)庫(kù)，回頭要把云端的倉(cāng)庫(kù)克隆到這里。比如下圖我選擇了Front這個(gè)文件夾。
輸入以下命令，其中cd（Change directory）意為切換目錄到...：
cd 文件夾地址
其中文件夾地址不一定要手輸，直接把文件夾拖到Terminal里面也行，按下回車。
再輸入以下代碼把云端倉(cāng)庫(kù)克隆下來(lái)，倉(cāng)庫(kù)地址為之前第3步復(fù)制下來(lái)的地址。
git clone 倉(cāng)庫(kù)地址
此時(shí)你的倉(cāng)庫(kù)根目錄下應(yīng)該已經(jīng)有克隆下來(lái)的倉(cāng)庫(kù)了，倉(cāng)庫(kù)里什么也沒(méi)有。
到這步，我們需要在本地庫(kù)中添加些東西，官方文檔中是直接用命令把文件寫進(jìn)去：
-
首先切換本地目錄到克隆下來(lái)的庫(kù)；
cd 庫(kù)標(biāo)題
-
新建一個(gè)index.html文件，并在里面寫入Hello World。
echo "Hello World" > index.html
當(dāng)然我們也可以直接把文件拷到到本地庫(kù)文件夾下，或者在里面創(chuàng)建。注意這個(gè)文件夾下一定要有一個(gè)index.html文件，這里默認(rèn)讀者會(huì)點(diǎn)html，不解釋了。
接下來(lái)就可以把文件上傳到云端倉(cāng)庫(kù)了，在Terminal中輸入以下命令：
-
把該文件夾下所有文件納入版本管理；
git add .
-
commit代碼，把代碼的一個(gè)版本提交到本地；
git commit -m "版本日志"
-
push代碼，把代碼推（上傳）到云端倉(cāng)庫(kù)，稍等一會(huì)兒就好了。
git push -u origin master
這時(shí)我們已經(jīng)成功將index.html文件推到云端倉(cāng)庫(kù)了，再一步就能大功告成，點(diǎn)擊下圖紅框標(biāo)記進(jìn)入Setting頁(yè)面：
拉到下面的GitHub Pages部分，按下圖所示選擇master branch（主分支），點(diǎn)擊save。
刷新頁(yè)面之后再回到GitHub Pages部分，可以看到頁(yè)面已經(jīng)發(fā)布，點(diǎn)擊鏈接進(jìn)入就大功告成啦！
后續(xù)的修改只需要重復(fù)第5步就可以了，代碼如下：
cd 本地庫(kù)目錄 git add . git commit -m "版本日志"git push -u origin master
GitHub還有很多好功能有待開(kāi)發(fā)，善于利用搜索引擎，have fun~
