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