利用hugo搭建个人博客入门教程

起因

之前看过腾讯工程师写的《Web全站工程师的自我修养》^1一书，萌生了搭建一个博客的想法，用来记录学习记录和生活感受。先用免费的github，挂载静态页面试试吧。原来计划使用道听途说的Jekyll，然后一不小心看到了这篇文章http://blog.coderzh.com/2015/08/29/hugo/，各种好:
1.只有一个二进制文件。
2.可以将宇宙标准MarkDown格式的文章自动转换为静态网页。
3.内置Web服务器，可以立即在本地查看修改结果。
那么就用hugo^2吧。有空再试试hexo^3。

安装hugo

我是在mac上通过tar压缩文件安装的。
其他方法可以参考官方文档。
1.下载
 下载地址：https://github.com/spf13/hugo/releases
 我要的mac版，文件名长这样：hugo_X.YY_darwin_amd64.zip
2.解压
 解压后是这样：

$ ls -l   
total 31696
-rw-r--r--@ 1 username  staff     10480  2 28 21:38 LICENSE.md
-rw-r--r--@ 1 username  staff      7694  2 28 21:38 README.md
-rwxr-xr-x@ 1 username  staff  16201084  2 28 21:38 hugo_0.15_darwin_amd64

 试一试：

$ ./hugo_0.15_darwin_amd64 version   
Hugo Static Site Generator v0.15 BuildDate: 2016-02-28T21:38:32+08:00   

3.创建链接文件
 这么长的命令，用起来多不方便啊，我们简化一下。

$ ln -s /fullpath/fullpath/hugo_0.15_darwin_amd64 hugo
$ ls -l
total 31696
-rw-r--r--@ 1 username  staff     10480  2 28 21:38 LICENSE.md
-rw-r--r--@ 1 username  staff      7694  2 28 21:38 README.md
lrwxr-xr-x  1 username  staff        54  2 28 22:05 hugo -> /fullpath/fullpath/hugo_0.15_darwin_amd64
-rwxr-xr-x@ 1 username  staff  16201084  2 28 21:38 hugo_0.15_darwin_amd64

 亲测有效：

$ ./hugo version   
Hugo Static Site Generator v0.15 BuildDate: 2016-02-28T21:38:32+08:00   

4.加入PATH
 这还不够，我们要加到PATH里去。

$ which hugo
/fullpath/fullpath/hugo
$ vi ~/.bash_profile

 加入这一行：

export PATH=$PATH:/fullpath/fullpath

 这样你应该可以在任意位置运行hugo命令了：

$ hugo version   
Hugo Static Site Generator v0.15 BuildDate: 2016-02-28T21:38:32+08:00   

生成本地站点

安装好hugo之后，就可以很轻松地生成本地站点啦：

$ hugo new site mysite

hugo会在当前的目录下，生成mysite这个目录，cd进去，目录结构如下

archetypes/
content/
layouts/
static/
config.toml

其中content是MarkDown文章目录，layouts存放的是网站的模版文件，static存放的是图片、css、js资源等。config.toml是网站的配置文件，你也可以换成yaml、json等。

(2016/04/23 发现一个小问题，配置文件里categories不能填写大写字母。
可能hugo创建categories时不区分大小写。
然而在页面上点击一个categories后，在页面上却又全部转化成了大写字母。)

创建文章

在mysite目录下，创建一个[关于]页面：

$ cd mysite
$ hugo new about.md

内容自己填呗。
再创建一个文章页面：

$ hugo new post/2016-03-06-first.md

内容自己填。
想看看效果么？等等，还需要导入个主题。

导入主题

还是在在mysite目录下，创建一个文件夹，我们随便clone一个主题下来。
我在https://themes.gohugo.io上没有找到喜欢的主题，就直接拉了上面原文作者的主题。

$ mkdir themes
$ cd themes
$ git clone https://github.com/coderzh/hugo-rapid-theme.git
$ cd ..

（主题里面包含了作者的信息，如果需要使用，记得修改。）

调试

现在终于可以调试了。

$ hugo server --theme=hugo-rapid-theme --buildDrafts --watch

浏览器里打开：http://localhost:1313
选项watch会让服务器自动检测文章的改动，自动刷新浏览器，非常方便。

发布

在本地自己偷着看有什么意思，发布到github上去吧。
1.生成静态页面

$ hugo --theme=hugo-rapid-theme --buildDrafts --baseUrl="http://youngspring1.github.io"

 这里的url要替换成你自己的。
 所有的静态页面都会生成到public目录。

2.创建Repository
 在github上创建一个Repository，名为”youngspring1.github.io”。
 同样，不认识的名字要替换成你自己的。

3.提交
 把public目录下的内容，全部提交到刚刚创建的Repository中。

$ cd public
$ git init
$ git remote add origin https://github.com/youngspring1/youngspring1.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master

 在浏览器中访问http://youngspring1.github.io

参考

原文作者coderzh搭建的中文的hugo站点：http://www.gohugo.org/