利用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.htmlthemes\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下面的所有内容上传到托管服务器,就可以访问自己的博客站点啦。