RUNOOB 图标

什麽是Hugo

Hugo是一個靜態站點生成工具.使用golang語言實現，因此有良好的跨平台性. 使用Hugo生成站點之後，hugo會自動偵測站點目錄内包括配置文件，靜態貼文， js，css，圖片等要素的變更.站點内容發生變化之後，不必重載站點. 官方檔案庫

安裝

因爲是golang實現，可以從官方Release下載對應 作業系統編譯好的檔案，解壓縮之後即可使用(亦可使用順手的軟體包管理套件諸如apt/pacman/yum 等進行安裝或者直接下載原始碼自行編譯皆可)。下面以linux爲例：

#下載原始檔
wget https://github.com/gohugoio/hugo/releases/download/v0.74.3/hugo_0.74.3_Linux-64bit.tar.gz
#解壓縮
wget tar -zxvf hugo_0.74.3_Linux-64bit.tar.gz

構建部落格

#創建新站點(更多hugo的指令,請移步官方文檔
./hugo  new site blog

以上創建了一個空的名叫blog的站點,在站點的主目錄blog中,會生成一個類似以下結構的初始目錄

📦blog
 ┣ 📂archetypes
 ┃ ┗ 📜default.md
 ┣ 📂content
 ┣ 📂data
 ┣ 📂layouts
 ┣ 📂resources
 ┃ ┗ 📂_gen
 ┃ ┃ ┣ 📂assets
 ┃ ┃ ┗ 📂images
 ┣ 📂static
 ┣ 📂themes
 ┗ 📜config.toml

此時的網站還僅僅是一個空的站點外殼,沒有任何内容.你可以參考 官方檔案庫來自行配置出一個站點.但是這個需要花比較多時間去學習文檔. 因此也可以從主題庫中選擇一套開放程式碼的主題快速套用到自己 的站點.

為部落格快速套用一個主題外觀

  • 從主題庫中選擇一套自己喜愛的主題,題主這裏選擇了 hugo-tranquilpeak-theme這款 主題. demo 當然了,題主的部落格也是使用的這個主題.
  • 套用主題
#進入到站點的目錄
cd ./blog/themes
#克隆主題程式碼到主題目錄
git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git
#此時會發現hugo-tranquilpeak-theme目錄下有一個exampleSite目錄
#結構大致如下
 ┣ 📂exampleSite
 ┃ ┣ 📂content
 ┃ ┃ ┗ 📂post
 ┃ ┣ 📂static
 ┃ ┃ ┗ 📂img

#根據我的觀察,很多的主題源碼裏面都有提供一個demo或者一個exampleSite的目錄
#將exampleSite下的整個内容copy到站點的主目錄下

#此時進入到到站點的主目錄中複製exampleSite的内容
cp ./themes/hugo-tranquilpeak-theme/exampleSite/* ./

修改站點配置

自此,主題已經應用到站點,但是我們還需要對配置文檔進行客制化,你可以使用一款自己 喜愛的文檔編輯工具諸如vim/emacs/nano等修改主站點(本文為blog)下的config.toml 以下我只挑選比較重要的几項配置做説明,更多内容請移步Hugo Documentation (如果在閲讀以下配置注解時不曉得disqus是什麽,請參閲:部落格第三方服務介紹)

#這一項極爲重要,決定你在請求站點資源的時候,所有的内容都是從這個域下請求的
#例如設置成http://localhost/,此時本機能訪問,但是如果你通過外部IP或者域名訪問
#則站點無法正常運行
baseURL = "http://localhost/"
#默認的語言,支持的語言請參考主題源碼中的i18n目錄
languageCode = "zh-tw"
...
#博客的標題
title = "Tornado's blog"
#主題的名字,這個不可以輕易改動!!!
theme = "hugo-tranquilpeak-theme"
#這個是套用的disqus回復系統
disqusShortname = "tornado-blog"
#這一項是blog目錄中的内容發生變更時,在瀏覽器中的頁面會跟隨刷新,
#為true則禁用
disableLiveReload = true
...

運行部落格

假定當前本機的IP位址為192.168.1.2

../ hugo serve -b http://192.168.1.2 --bind 0.0.0.0

此時,hugo會開啓一個站點服務,并且偵聽192.168.1.2的1313埠,此時打開瀏覽器,鍵入http://192.168.1.2:1313 即可訪問默認的站點

文章編輯

hugo是通過偵聽其站點目錄下的content目錄中的檔案的變更,來實時更新博文,以markdown語言爲例:


---
title: "my first post"
date: 2020-08-11
categories:
  - vscode
  - plugin
tags:
  - vscode
  - vscode plugin
thumbnailImagePosition: left
thumbnailImage: //blog.icephenix.com/img/vscode.png
---
welcome
  • title:會被識別為標題.
  • categories:可以為文章設定分類,hugo會自動根據這個信息來辨識
  • tags:給文章打賞標簽,方便檢索
  • thumbnailImagePosition:是文章的標題的預覽時的圖片顯示的位置
  • thumbnailImage:則是文章標題顯示的圖片