在這個(gè)信息極度發(fā)達(dá)的網(wǎng)絡(luò)時(shí)代，很多人都希望擁有一個(gè)屬于自己的網(wǎng)站，對(duì)自己的學(xué)習(xí)和生活進(jìn)行個(gè)性化展示，因此產(chǎn)生了龐大的建站需求。而傳統(tǒng)方式進(jìn)行建站對(duì)于小白用戶來(lái)說(shuō)，意味著不小的學(xué)習(xí)成本和經(jīng)濟(jì)開支。首先你得先有一個(gè)云服務(wù)器或云虛擬主機(jī)，阿里云上一個(gè)最低配的云服務(wù)器一年租金都在1000元以上。其次還得擁有一個(gè)屬于你自己的域名，一年也得幾十塊錢。除此之外還得付出足夠的學(xué)習(xí)成本去學(xué)習(xí)服務(wù)器維護(hù)和域名管理相關(guān)知識(shí)。如果你只是做一些簡(jiǎn)單的靜態(tài)項(xiàng)目做展示，付出這么大的時(shí)間和經(jīng)濟(jì)成本顯然是不合適的。接下來(lái)就給大家介紹一下如何使用現(xiàn)有的平臺(tái)去免費(fèi)發(fā)布自己的靜態(tài)項(xiàng)目。
其實(shí)今天給大家介紹的平臺(tái)對(duì)于從事程序開發(fā)的同學(xué)來(lái)說(shuō)一點(diǎn)都不陌生，那就是世界上最大的“同性交友社區(qū)”：github。
github提供了github-page讓用戶可以免費(fèi)部署自己的靜態(tài)站點(diǎn)。下面就給大家介紹下如何利用這個(gè)平臺(tái)去部署自己的靜態(tài)站點(diǎn)：
github-page提供了兩種需求的靜態(tài)站點(diǎn)部署，針對(duì)用戶和組織的站點(diǎn)：“User or organization site”和針對(duì)項(xiàng)目的站點(diǎn)：“Project site”
用戶和組織的站點(diǎn)部署方式：
如果是用戶或組織需要建立一個(gè)屬于自己的站點(diǎn)，需按照以下方式進(jìn)行部署：
第一步：建立新倉(cāng)庫(kù)：
第二步：clone倉(cāng)庫(kù)到本地：
我們這里用terminal的方式clone：
首先復(fù)制遠(yuǎn)程倉(cāng)庫(kù)地址：
然后在終端中將倉(cāng)庫(kù)clone到本地：
第三步：將做好的項(xiàng)目代碼放到clone下來(lái)的xiaoxiekeke.github.io文件夾中：
第四步：將更新的代碼提交到代碼庫(kù)：
命令行：
(1)git add -A
(2)git commit -am "init project"
(3)git push -u origin master
接下來(lái)通過(guò)https://xiaoxiekeke.github.io 就可以訪問(wèn)我們剛剛新建的web站點(diǎn)了，是不是非常簡(jiǎn)單呢！
項(xiàng)目站點(diǎn)部署方式：
眾所周知，github是一個(gè)非常開放自由的平臺(tái)，很多出色的開發(fā)者將自己優(yōu)秀的項(xiàng)目push在github平臺(tái)上供全球其他開發(fā)者學(xué)習(xí)和使用。對(duì)于一些較為復(fù)雜的項(xiàng)目，為了降低其他開發(fā)者的使用門檻，項(xiàng)目的所有者會(huì)選擇將自己的項(xiàng)目介紹和使用方式寫在readme文檔里以供大家閱讀。除了readme文檔，開發(fā)者們還可以建立一個(gè)站點(diǎn)來(lái)更加全面周詳?shù)慕榻B自己的項(xiàng)目，方便別人學(xué)習(xí)和使用。下面將給大家介紹如何建立和部署這樣的站點(diǎn)。
給項(xiàng)目建站點(diǎn)github提供了兩種方法：使用默認(rèn)主題法“Choose a theme”和從頭開始法“Start from scratch”
默認(rèn)主題法部署項(xiàng)目站點(diǎn)：
這種方法的本質(zhì)是新建一個(gè)項(xiàng)目，在readme中寫好詳細(xì)內(nèi)容，選擇github-page默認(rèn)的主題生成靜態(tài)頁(yè)面。這種方式局限性比較大，只能基于寫好的md文件生成單頁(yè)面。大家感興趣可以自己研究其用法。
從頭開始部署項(xiàng)目站點(diǎn)：
如果是一個(gè)比較復(fù)雜的介紹文檔的話，由readme生成的單頁(yè)面的文檔肯定是不能滿足要求的。這個(gè)時(shí)候需要我們能夠自定義部署項(xiàng)目站點(diǎn)。下面介紹具體方法（以我的一個(gè)開源項(xiàng)目https://github.com/xiaoxiekeke/SNvue.git 為例）：
第一步：我們先將項(xiàng)目clone到本地:git clone https://github.com/xiaoxiekeke/SNvue.git
第二步：新建并切換到gh-pages分支：git checkout -b gh-pages；
此時(shí)項(xiàng)目中有兩個(gè)分支：
第三步：安裝依賴并打包成靜態(tài)文件，這個(gè)過(guò)程在SNvue項(xiàng)目readme.md文件里有講到。
如圖所示，項(xiàng)目文件夾中多了一個(gè)“static”文件夾，儲(chǔ)存了該項(xiàng)目的靜態(tài)資源，這一步是為了生成將要被部署的靜態(tài)網(wǎng)站，我們?cè)诰€上訪問(wèn)的就是生成的index.html和static目錄里面的文件。由于SNvue這個(gè)項(xiàng)目是由vue+webpack編寫和構(gòu)建的，所以需要這一步。如果大家有現(xiàn)成的靜態(tài)網(wǎng)站的話，直接將里面的代碼全部替掉就行了,不需要執(zhí)行此操作。
第四步：將項(xiàng)目gh-pages分支提交到遠(yuǎn)程：
git add -A
git commit -m "init the gh-pages branch"
git push -u origin gh-pages
此時(shí)遠(yuǎn)程便多了一個(gè)分支：
第五步：遠(yuǎn)程倉(cāng)庫(kù)設(shè)置
點(diǎn)擊“setting”選項(xiàng)卡
滾動(dòng)到githubpage模塊，并在source列表中選擇gh-pages branch，點(diǎn)擊“save”按鈕：
經(jīng)過(guò)以上步驟，基于項(xiàng)目的站點(diǎn)便已經(jīng)部署完畢。通過(guò)https://xiaoxiekeke.github.io/SNvue/ 便可以訪問(wèn)。
好了，關(guān)于如何使用github部署靜態(tài)站點(diǎn)已經(jīng)介紹完畢，謝謝大家的閱讀，希望能給大家?guī)?lái)幫助，如果喜歡的話，歡迎打賞并關(guān)注我哦！
著作權(quán)歸作者所有。
商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
作者：xiaoxiekeke
