利用hugo生成静态站点

动机

使用Markdown撰写博客，并以静态页面形式发布。

选择hugo

现在jekyll似乎更加流行，但是jekyll是基于Ruby的，在windows下安装很繁琐。
而hugo是用go写的，windows版本只有一个exe，安装起来非常方便。
因此决定使用hugo作为站点生成器。

系统环境

• Windows 8.1 x64（主流Windows系统应该都没有问题）
• git（用来下载皮肤）

安装hugo

下载

通过Github的下载页面获得最新版本的hugo。

解压并配置PATH

1. 解压到任意文件夹，例如：D:softhugo。
2. 将该文件夹追加到系统环境变量的PATH变量下。

检验

在命令行下输入如下命令：

hugo version

如果配置成功，会显示当前hugo的版本号。

建立hugo工程

建立工作文件夹

例如：D:softhugolog

进入该文件夹：

D:>cd D:softhugolog
D:softhugolog>

建立站点

例如：blog.mute-g.com

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

确认目录结构已经建立

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

安装皮肤

选择皮肤

可以在官方皮肤市场选择皮肤，点进去后可以看到皮肤下载地址，一般都是一个git链接。
本次选择的皮肤是Cactus Plus。

进入themes文件夹

D:softhugologlog.mute-g.com>cd themes
D:softhugologlog.mute-g.com	hemes>

下载皮肤到此文件夹

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

修改页面模板

基于上诉理由，需要对页面模板进行一些修正。

• 首先将themeshugo-theme-cactus-pluslayoutspartials av.html和
  themeshugo-theme-cactus-pluslayouts axonomy ag.terms.html拷贝到
  blog.mute-g.comlayouts下的对应文件夹内，拷贝完成后的目录结构应该如下：

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:softhugologlog.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

编辑文章内容

打开posthugoget-start.md，可以看到如下内容：

+++
categories = ["博客搭建"]
date = "2017-07-14T15:52:54+09:00"
description = "从零开始搭建属于自己的静态网站"
tags = ["hugo"]
title = "利用hugo生成静态站点"
+++

在这一部分设置“分类”、“标题”、“标签”等等内容。
在下面的空白部分，就可以遵循Markdown语法撰写文章了。

发布站点

自动生成静态页面

在站点根目录下执行如下命令：

hugo

执行完毕后，会在hugo文件夹下自动生成一个public文件夹，里面就是自动生成好的站点了。

上传到托管服务器

将public下面的所有内容上传到托管服务器，就可以访问自己的博客站点啦。