序言

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

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

hugo

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

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

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

下載hugo_0.73.0_Windows-64bit.zip

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

解壓后

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

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

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

此電腦->屬性界面

高級系統(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查看是否有如下圖所示的類似結(jié)果。如果有則安裝成功。沒有則安裝失敗，可能需要回顧之前的步驟是否有遺漏。

運(yùn)行hugo version

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

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

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

這里說明幾個最常用的目錄和文件：

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

exampleSite目錄

本地運(yùn)行測試    使用命令行cd命令進(jìn)入新建的博客的目錄下。比如我的就是D:\xuehu\blog\codexue。 運(yùn)行hugo server -D 會出現(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é)果后，我們可以訪問http://localhost:1313/，即可看到我們的博客運(yùn)行的結(jié)果。

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

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

創(chuàng)建倉庫

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

public目錄

//push到遠(yuǎn)程倉庫的命令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稍后我們就可訪問：http://codexue.github.io即可隨時隨地看到我們創(chuàng)建的博客啦！附錄Hugo中文文檔：https://xintu.gohugo.org/