利用hugo生成静态站点

动机

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

选择hugo

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

系统环境

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

安装hugo

下载

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

解压并配置PATH

解压到任意文件夹，例如：D:\soft\hugo。
将该文件夹追加到系统环境变量的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下面的所有内容上传到托管服务器，就可以访问自己的博客站点啦。

posted @ 2017-07-21 13:34 高云鹏阅读(7203) 评论(0) 编辑收藏举报

刷新页面返回顶部