Hugo+Gitee 搭建我的博客

前言

這是一篇用來記錄我第一次搭建我的博客的文章。

目前能夠用來建站的腳手架有不少，所用的開發語言也各不相同。例如： 使用PHP開發出來的WordPress，使用JS開發的Hexo，使用Go開發的Hugo。客觀來看，使用哪一種框架都沒太大差異。大部分人，包括我，僅僅是在這個框架上寫markdown罷了(笑)。

下面記錄的，是我在使用Hugo搭建我的博客時總結出的步驟。僅以此文，但願能讓其餘小白，包括之後想從新搭建的我，少踩一些坑。

基礎概念

什麼是Hugo?

Hugo是一個用來生成靜態網站的工具，使用Go語言編寫的。從網上不少人的評論看，Hugo的顯著優勢就是部署快！

什麼是Gitee?

Gitee(碼雲) 是開源中國推出的基於 Git 的代碼託管服務，相似於Github。最基礎的用法，就是使用它保管開發者的代碼，進行版本控制。

在搭建時，使用Hugo打包構建靜態網站，輸出一個純靜態的資源包。將這個靜態資源包上傳到Gitee，就能實現站點部署。

搭建步驟

1.安裝Hugo

1.1 進入GitHub上Hugo/release頁面，下載對應操做系統的安裝包。例如我是Win10,下載的是當前最新版本 hugo_0.74.3_Windows-64bit.zip。

1.2 下載完畢後，將程序解壓到某個文件夾下。

1.3 配置環境變量。

1.4 當在命令行運行如下命令，能輸出截圖所示內容時，證實安裝成功。

hugo version

2. 生成站點基礎框架
Hugo提供 new 命令，用於生成新的網站，運行如下命令，便可生成新的網站框架。

hugo new site my_website_name

框架結構以下圖所示。

3. 安裝主題
3.1 進入Hugo主題頁面，找到須要的主題。例如我使用的主題是LoveIt。
3.2 將主題克隆到 themes 目錄。例如我，是運行如下命令，使用git下載到本地的。

git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt

4. 配置主題
不一樣的主題，咱們須要按照主題提供的文檔進行配置。如我使用的主題LoveIt，在GitHub上有相關連接，能夠跳轉到該主題的配置文檔頁面。

在配置完成後，若想在本地訪問搭建的站點，只須要運行：hugo server 命令，接着在瀏覽器訪問 http://localhost:1313 便可。後續在自定義樣式，或者編寫博客時，能夠經過訪問該地址，進行實時預覽。

5. 編寫博客
在網站框架根目錄內，使用 hugo new posts/blog_name.md 命令建立博客。使用MarkDown語法編輯博客內容。

6. 打包構建
在網站框架根目錄下，使用 hugo 命令打包構建。運行該命令後，會生成一個 public 目錄, 目錄內包含了網站的全部靜態內容和資源。

7. 在Gitee上創建倉庫，上傳資源包
7.1 申請Gitee帳號。
7.2 在Gitee上創建倉庫。
根據在Gitee裏的Gitee Pages 靜態頁面託管說明,倉庫名最好與我的空間地址一致，例如我我的空間地址爲JihahaCabin，我創建的倉庫名也爲JihahaCabin。

若是你想你的 pages 首頁訪問地址不帶二級目錄，如 http://ipvb.gitee.io，你須要創建一個與本身個性地址同名的倉庫，如 https://gitee.com/ipvb 這個用戶，想要建立一個本身的站點，但不想以子目錄的方式訪問，想以ipvb.gitee.io直接訪問，那麼他就能夠建立一個名字爲ipvb的倉庫 https://gitee.com/ipvb/ipvb 部署完成後，就能夠以 https://ipvb.gitee.io 進行訪問了。

7.3 在public目錄下，運行如下命令，將public目錄下全部文件，上傳到Gitee倉庫。${git_address} 表示在上一步創建的倉庫地址。

git init 
git add . 
git commit -m "init" 
git remote add origin ${git_address}  
git push -f origin master

8. 配置Gitee Pages
8.1 登陸Gitee，找到上傳的倉庫，點擊"服務"下拉框，點擊"Gitee Pages"選項。

8.2 選擇部署分支，點擊"啓動"按鈕。

實際效果

訪問 Gitee我的空間地址名.gitee.io，便可看到部署的靜態網站內容，如我搭建的博客地址爲JihahaCabin.gitee.io。