序言

個(gè)人博客相比大家都很熟悉，特別是做技術(shù)，搞研究的等等，各行各業(yè)的人都有各行各業(yè)不同風(fēng)格不同用途的博客網(wǎng)站，在網(wǎng)站上面分享自己想分享的內(nèi)容供其它人隨時(shí)查看，但是現(xiàn)在各大云服務(wù)平臺(tái)的建站需求都是收費(fèi)的！而且費(fèi)用還不便宜，還有時(shí)間限制，還有流量限制！這就讓我們這群愛(ài)折騰的人不能忍了。所以經(jīng)過(guò)我個(gè)人的嘗試，找到了幾條可行的路線(xiàn)，今天的教程采用基于hugo和github的方案。那么話(huà)不多說(shuō)我們即可開(kāi)始吧！這里是我使用hugo搭建好的個(gè)人主頁(yè)的名稱(chēng)，ps:國(guó)內(nèi)訪(fǎng)問(wèn)可能比較緩慢。http://xuehuxs.github.com

開(kāi)始前的準(zhǔn)備準(zhǔn)備所需軟件

hugo

采用hugo和GitHub方案，需要準(zhǔn)備好hugo的本地環(huán)境，在我們的電腦上安裝并配置。對(duì)于hugo相關(guān)的文檔和相關(guān)使用的連接我會(huì)放在本文的最后。

首先進(jìn)入網(wǎng)站下載最新版本的hugo壓縮包。鏈接：https://github.com/gohugoio/hugo/releases 劃至每一個(gè)Release的后端，有不同系統(tǒng)對(duì)應(yīng)的下載鏈接。此處我選擇hugo_0.73.0_Windows-64bit.zip。

提示：由于國(guó)內(nèi)的GitHub下載較慢，我會(huì)將我下載好的壓縮包鏈接分享到評(píng)論區(qū)，供大家下載。

下載hugo_0.73.0_Windows-64bit.zip

進(jìn)行環(huán)境搭建將壓縮包解壓到本地，如下圖所示：

解壓后

壓縮包內(nèi)的文件

添加hugo.exe到本機(jī)的path環(huán)境變量?jī)?nèi)，步驟如下圖所示：

環(huán)境變量配置的基本步驟

此電腦->屬性界面

高級(jí)系統(tǒng)屬性界面

找到Path變量

添加hugo的環(huán)境變量

最后一路確定即可！

驗(yàn)證環(huán)境是否構(gòu)建完成。按下Win鍵+R鍵，彈出運(yùn)行窗口，在窗口內(nèi)輸入cmd，點(diǎn)擊確定彈出命令行工具。

運(yùn)行窗口

在命令行內(nèi)運(yùn)行：hugo version查看是否有如下圖所示的類(lèi)似結(jié)果。如果有則安裝成功。沒(méi)有則安裝失敗，可能需要回顧之前的步驟是否有遺漏。

運(yùn)行hugo version

命令行搭建本地博客hugo new site codexue//本命令的意思是在當(dāng)前路徑下使用hugo新建一個(gè)名為codexue的站點(diǎn)簡(jiǎn)單配置

在創(chuàng)建好我們的網(wǎng)站后我們的目錄下會(huì)出現(xiàn)以下目錄和文件。

codexue目錄下的文件結(jié)構(gòu)

這里說(shuō)明幾個(gè)最常用的目錄和文件：

content：保存我們所需要的發(fā)布的博客文件，hugo支持的是Markdown格式的博客文件，具體的Markdown文檔可以怎么寫(xiě)，請(qǐng)大家移步Markdown教程，非常的簡(jiǎn)單，幾分鐘就能學(xué)會(huì)！static：如果我們需要在我們的博客內(nèi)添加圖片，我們可以在此目錄下創(chuàng)建一個(gè)images目錄，在引用圖片的時(shí)候使用/images/name.jpg即可連接到此文件夾內(nèi)的圖片文件。themes：此目錄下存儲(chǔ)我們沖GitHub上clone的主題倉(cāng)庫(kù)。下面我們會(huì)講解主題的簡(jiǎn)單使用。此處需要我們完成基本主題的設(shè)置。--大家可以去https://themes.gohugo.io查看心儀的主題，并通過(guò)Git clone到本地的themes目錄下。此處我使用的cupper-hugo-theme這個(gè)主題，通過(guò)git clone [url of theme on github]命令克隆到themes目錄下。--然后打開(kāi)\themes\cupper-hugo-theme\exampleSite目錄，目錄下有一個(gè)config.yaml或者config.toml文件，復(fù)制到\codexue目錄下。刪除原本的config.toml/config.yaml文件。

exampleSite目錄

本地運(yùn)行測(cè)試    使用命令行cd命令進(jìn)入新建的博客的目錄下。比如我的就是D:\xuehu\blog\codexue。 運(yùn)行hugo server -D 會(huì)出現(xiàn)如下結(jié)果： Building sites … | EN-------------------+----- Pages | 6 Paginator pages | 0 Non-page files | 0 Static files | 32 Processed images | 0 Aliases | 0 Sitemaps | 1 Cleaned | 0Built in 90 msWatching for changes in D:\xuehu\blog\codexue\{archetypes,content,data,layouts,static,themes}Watching for config changes in D:\xuehu\blog\codexue\config.tomlEnvironment: "development"Serving pages from memoryRunning in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRenderWeb Server is available at http://localhost:1313/ (bind address 127.0.0.1)Press Ctrl+C to stop出現(xiàn)上面的結(jié)果后，我們可以訪(fǎng)問(wèn)http://localhost:1313/，即可看到我們的博客運(yùn)行的結(jié)果。

http://localhost:1313/結(jié)果

關(guān)聯(lián)GitHub倉(cāng)庫(kù)登錄到github并創(chuàng)建一個(gè)repository[倉(cāng)庫(kù)]，倉(cāng)庫(kù)的名稱(chēng)為：用戶(hù)名.github.io，設(shè)置可見(jiàn)性為public。因?yàn)槲业膫}(cāng)庫(kù)是已經(jīng)存在的，所以有提示。初次創(chuàng)建是沒(méi)有提示的~

創(chuàng)建倉(cāng)庫(kù)

然后本地命令行執(zhí)行hugo命令，會(huì)生成一個(gè)/codexue/public目錄，我們需要做的就是將此目錄的所有文件push到剛剛建立好的倉(cāng)庫(kù)里。

public目錄

//push到遠(yuǎn)程倉(cāng)庫(kù)的命令cd publicgit initgit remote add origin https://github.com/codexue/codexue.github.io.gitgit add -Agit commit -m "new site first commit"git push -u origin master稍后我們就可訪(fǎng)問(wèn)：http://codexue.github.io即可隨時(shí)隨地看到我們創(chuàng)建的博客啦！附錄Hugo中文文檔：https://xintu.gohugo.org/