利用hugo生成靜態站點

高雲鵬發表於2017-07-21
Go

動機

使用Markdown撰寫部落格，並以靜態頁面形式釋出。

選擇hugo

現在jekyll似乎更加流行，但是jekyll是基於Ruby的，在windows下安裝很繁瑣。
而hugo是用go寫的，windows版本只有一個exe，安裝起來非常方便。
因此決定使用hugo作為站點生成器。

系統環境

  • Windows 8.1 x64（主流Windows系統應該都沒有問題）
  • git（用來下載皮膚）

安裝hugo

下載

通過Github的下載頁面獲得最新版本的hugo。

解壓並配置PATH

  1. 解壓到任意資料夾，例如：D:\soft\hugo。
  2. 將該資料夾追加到系統環境變數的PATH變數下。

檢驗

在命令列下輸入如下命令：

hugo version

如果配置成功，會顯示當前hugo的版本號。

建立hugo工程

建立工作資料夾

例如：D:\soft\hugo\blog

進入該資料夾：

D:\>cd D:\soft\hugo\blog
D:\soft\hugo\blog>

建立站點

例如：blog.mute-g.com

D:\soft\hugo\blog>hugo new site blog.mute-g.com

確認目錄結構已經建立

blog.mute-g.com
  ├─archetypes
  ├─content
  ├─data
  ├─layouts
  ├─static
  └─themes

安裝皮膚

選擇皮膚

可以在官方皮膚市場選擇皮膚，點進去後可以看到皮膚下載地址，一般都是一個git連結。
本次選擇的皮膚是Cactus Plus。

進入themes資料夾

D:\soft\hugo\blog\blog.mute-g.com>cd themes
D:\soft\hugo\blog\blog.mute-g.com\themes>

下載皮膚到此資料夾

git clone https://github.com/nodejh/hugo-theme-cactus-plus.git

定製皮膚

拷貝配置檔案

在此款皮膚下有一個exampleSite資料夾，將裡面的config.toml檔案拷貝到hugo目錄下。

修改配置項

開啟config.toml，更改裡面的配置項。

例如：“知名搜尋公司”的Analytics服務ID、Disqus的shortname等等。

有些服務國內無法使用，不過此款皮膚內建提供了國內可以使用的替代品。
注意： 如果不是想託管在S3下，則皮膚定製到此就可以結束了。

設定頁面生成形式

預設狀態下，靜態頁面會以主題資料夾下帶一個index.html的形式生成，但是由於我希望將靜態網站託管在Amazon的S3服務下，需要頁面以主題.html的形式生成，因此需要在配置檔案內加入配置項：

uglyurls = true

修改頁面模板

基於上訴理由，需要對頁面模板進行一些修正。

  • 首先將themes\hugo-theme-cactus-plus\layouts\partials\nav.html和
    themes\hugo-theme-cactus-plus\layouts\taxonomy\tag.terms.html拷貝到
    blog.mute-g.com\layouts下的對應資料夾內，拷貝完成後的目錄結構應該如下：
blog.mute-g.com
  └─layouts
      ├─partials
      |   └─nav.html
      └─taxonomy
          └─tag.terms.html
  • 將nav.html中三個連結的末尾加上.html，如下：
<a href='{{ .Site.BaseURL }}post.html'>
<a href='{{ .Site.BaseURL }}tags.html'>
<a href='{{ .Site.BaseURL }}about.html'>
  • 將tags的連結的末尾加上.html，如下：
<a href="/tags/{{ $name | urlize }}.html" rel="{{ len $taxonomy }}">

初始化

  • 回到站點根目錄
D:\soft\hugo\blog\blog.mute-g.com>
  • 生成“關於”頁
hugo new about/_index.md
  • 生成“標籤”頁
hugo new tags/_index.md
  • 啟動伺服器確認成果
hugo server

通過http://localhost:1313/訪問

寫一篇文章

新建一篇文章

hugo new post/hugo/get-start.md

編輯文章內容

開啟post\hugo\get-start.md，可以看到如下內容：

+++
categories = ["部落格搭建"]
date = "2017-07-14T15:52:54+09:00"
description = "從零開始搭建屬於自己的靜態網站"
tags = ["hugo"]
title = "利用hugo生成靜態站點"
+++

在這一部分設定“分類”、“標題”、“標籤”等等內容。
在下面的空白部分，就可以遵循Markdown語法撰寫文章了。

釋出站點

自動生成靜態頁面

在站點根目錄下執行如下命令：

hugo

執行完畢後，會在hugo資料夾下自動生成一個public資料夾，裡面就是自動生成好的站點了。

上傳到託管伺服器

將public下面的所有內容上傳到託管伺服器，就可以訪問自己的部落格站點啦。

相關文章