本文首發(fā)于我的個(gè)人博客：Suixin's Blog
Hugo是一個(gè)用Go編寫的靜態(tài)站點(diǎn)生成器，由于具有豐富的主題資源和驚人的生成速度而備受青睞。本博客即是基于Hugo搭建，下面講述一下我的建站歷程以及踩的幾個(gè)大坑（此處手動(dòng)Doge…）。
安裝Hugo以及生成第一篇文章
安裝Hugo
如果你是macOS用戶，請(qǐng)使用Homebrew快速安裝
brew install hugo
如果你是Windows用戶，請(qǐng)使用Chocolatey或者Scoop快速安裝，取決于你使用什么包管理
choco install hugo -confirm
scoop install hugo
如果你是Debian或Ubuntu用戶，請(qǐng)使用apt快速安裝
sudo apt-get install hugo
基本上使用單行命令都可以成功安裝Hugo，具體請(qǐng)移步這里。
生成文章
使用如下命令新建一個(gè)名為“mysite”的網(wǎng)站：
hugo new site mysite
接下來，在這里找到一個(gè)漂亮的網(wǎng)站主題。相信我，Hugo的主題海洋會(huì)讓你糾結(jié)到死……經(jīng)過一番激烈的掙扎，我最終還是投靠給了Casper，沒有什么能比一張大圖占據(jù)整個(gè)屏幕帶來的沖擊感更強(qiáng)了……（說不定過段時(shí)間我又折騰著換別的主題了……）。
言歸正傳，以Casper為例，將主題clone到本地的themes文件夾內(nèi)，執(zhí)行以下兩句即可：
cd themes
git clone https://github.com/vjeantet/hugo-theme-casper.git casper
mysite/content是用來存放文檔的地方，我們?cè)谄湎陆⒁粋€(gè)新的Markdown文件：
hugo new post/first.md
在first.md中寫入一些內(nèi)容，使用如下命令進(jìn)行本地預(yù)覽：
hugo server -t casper -D
幾乎瞬間編譯成功，打開網(wǎng)址 http://localhost:1313/ 即可查看本地生成的靜態(tài)網(wǎng)站。
適配主題
Hugo的每個(gè)主題都會(huì)有不同的參數(shù)配置，而這些配置被存放在根目錄下的config.toml文件中，對(duì)于Casper主題，官方的GitHub中已經(jīng)對(duì)此作了說明，以下是我的配置：
BaseUrl= "https://shanetian.github.io/"
LanguageCode= "zh-cn"
Title= "I am thinking ..."
theme = "casper"
paginate = 5
DisqusShortname = "suixin-1" # name in comments
Copyright = "All rights reserved - 2018"
canonifyurls = true
[params]
description = "路在腳下，心向遠(yuǎn)方"
metadescription = "Used as 'description' meta tag for both home and index pages. If not set, 'description' will be used instead"
cover = "images/boy_bicycle.jpg"
author = "SuiXin"
authorlocation = "Chengdu, China"
authorwebsite = "suixinblog.cn"
authorbio= "Every man dies, not every man really lives."
logo = "images/bird.png"
# googleAnalyticsUserID = "UA-79101-12"
# Optional RSS-Link, if not provided it defaults to the standard index.xml
# RSSLink = "http://feeds.feedburner.com/..."
githubName = "ShaneTian"
email = ""
twitterName = "ShaneTian6"
# facebookName = ""
# codepenName = ""
# linkedinName = ""
# stackoverflowId = ""
# keybaseName = ""
# flickrName = ""
# instagramName = ""
# pinterestName = ""
# googlePlusName = ""
# set true if you are not proud of using Hugo (true will hide the footer note "Proudly published with HUGO.....")
hideHUGOSupport = false
# Setting a value will load highlight.js and enable syntax highlighting using the style selected.
# See https://github.com/isagalaev/highlight.js/tree/master/src/styles for available styles
# A preview of above styles can be viewed at https://highlightjs.org/static/demo/
hjsStyle = "atom-one-light"
[params.social]
twitter = "ShaneTian6"
[[menu.main]]
name = "Home"
weight = -1
identifier = "blog"
url = "/"
[[menu.main]]
name = "Machine Learning"
weight = -2
identifier = "ml"
url = "/tags/machine-learning"
[[menu.main]]
name = "Others"
weight = -3
identifier = "other"
url = "/tags/others"
[[menu.main]]
name = "About"
weight = -4
identifier = "about"
url = "/about"
[permalinks]
post = "/:year/:month/:day/:title/"
文章內(nèi)的配置
使用命令hugo new post/***.md新建Markdown文件之后，文章開頭會(huì)有默認(rèn)的被+++包住的內(nèi)容，這些內(nèi)容即是該文章的配置。在/mysite/archetypes/default.md中可修改默認(rèn)的配置。以下為我的默認(rèn)配置：
+++
title = "{{ replace .Name "-" " " | title }}" # 文章標(biāo)題
date = {{ .Date }} # 自動(dòng)添加日期信息
draft = true # 設(shè)為false可被編譯為HTML，true供本地修改
tags = [""] # 文章標(biāo)簽，可設(shè)置多個(gè)，用逗號(hào)隔開。Hugo會(huì)自動(dòng)生成標(biāo)簽的子URL
comments = true # 是否開啟Disqus評(píng)論功能
share = true # 是否開啟分享
+++
代碼著色
Casper主題在config.toml文件中的hjsStyle選項(xiàng)提供了highlight.js的代碼著色。所有的代碼主題和支持的語言可在這里看到。
但在實(shí)際的配置中更改配置選項(xiàng)發(fā)現(xiàn)并沒有更改代碼的顏色……我……
經(jīng)歷了一番數(shù)不清的Google之后發(fā)現(xiàn)，Casper主題的內(nèi)置HTML文件設(shè)置的highlight.js版本為9.8.0，而現(xiàn)在的highlight.js已經(jīng)更新到9.12.0，故只需修改/mysite/themes/casper/layouts/partials/header.html中幾行代碼為9.12.0即可：
{{ if .Site.Params.hjsStyle }}
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/{{ .Site.Params.hjsStyle }}.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
{{ if or .Site.Params.hjsExtraLanguages .Params.hjsExtraLanguages }}
{{ range $index, $language := (union .Site.Params.hjsExtraLanguages .Params.hjsExtraLanguages) }}
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/{{ $language }}.min.js"></script>
{{ end }}
{{ end }}
<script>hljs.initHighlightingOnLoad();</script>
{{end}}
關(guān)于圖片
Casper主題需要設(shè)置一個(gè)封面圖和一個(gè)作者頭像，選好圖片放置在/static/images并在/config.toml設(shè)置即可。
關(guān)于瀏覽器的小圖標(biāo)favicon
可將喜歡的照片在該網(wǎng)站生成各種分辨率的
.ico文件，將其命名為favicon.ico同樣放置在/static/images即可。apple-touch-icon同理。
發(fā)布網(wǎng)站到GitHub Pages
在使用hugo server -D預(yù)覽網(wǎng)站無誤后可正式發(fā)布網(wǎng)站到域名供大家瀏覽。將要發(fā)布的文章內(nèi)draft改為false后執(zhí)行命令
hugo
可看到根目錄下多出/public文件夾出來，該文件夾的內(nèi)容即Hugo生成的整個(gè)靜態(tài)網(wǎng)站。最終我們需要把這些靜態(tài)網(wǎng)站的文件部署到一個(gè)地方，免費(fèi)且穩(wěn)定的GitHub Pages是一個(gè)很好的選擇。具體操作如下：
- 在GitHub新建一個(gè)Repository命名為
ShaneTian.github.io，其中ShaneTian改成自己的GitHub賬戶名； - 在
/mysite外建立一個(gè)平行的文件夾，此處假設(shè)也命名為/ShaneTian.github.io； - 進(jìn)入
/public文件夾將內(nèi)容復(fù)制到/ShaneTian.github.io； - 將
/ShaneTian.github.io的內(nèi)容push到遠(yuǎn)程倉庫。
以上命令可在命令行通過以下語句實(shí)現(xiàn)：
mkdir ShaneTian.github.io
cd mysite/public
cp -r . ../../ShaneTian.github.io
cd ../../ShaneTian.github.io
git init
git add .
git commit -m "commit message"
git remote add origin https://github.com/ShaneTian/ShaneTian.github.io.git
git push -u origin master
完成以上命令后，等待一分鐘左右即可在 https://shanetian.github.io/ 訪問你的網(wǎng)站。
以后每次更新文章后只用將生成的/public文件夾的靜態(tài)網(wǎng)站內(nèi)容復(fù)制到/ShaneTian.github.io，然后再push到遠(yuǎn)程倉庫即可。也可將步驟寫為Shell腳本，此處不再贅述。
使用自己的域名
當(dāng)然，GitHub的域名怎么能滿足裝*的心理，這時(shí)可以將網(wǎng)站設(shè)置為自己的域名。購買域名的地方很多，如國外知名網(wǎng)站GoDaddy，簡(jiǎn)體中文頁面、支持支付寶付款、不用備案等都帶來了很多方便。我的域名suixinblog.cn即是在此購買。購買域名后完成下面兩步即可訪問自己的域名：
- 在上面存放靜態(tài)網(wǎng)站的Repository設(shè)置里面Custom domain填上自己的域名點(diǎn)擊save；
- 執(zhí)行以下語句獲得自己的GitHub Pages的IP：
ping shanetian.github.io
-
在域名提供商的網(wǎng)站配置DNS即可，以Godaddy為例配置兩條記錄如下：
image - 可以在GitHub Pages設(shè)置強(qiáng)制https協(xié)議，這樣你的網(wǎng)站就有安全鎖啦～
image
image
大功告成！快去訪問你的域名吧！
Tips：
另外一款好看的Hugo主題：hugo-nuo
