利用hugo生成靜態站點

動機

使用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下面的所有內容上傳到托管服務器，就可以訪問自己的博客站點啦。