由于最近再次安装hugo,就想纪录一下这个过程,有什么不对的地方请指出来。

一. 安装hugo

hugo有两种安装方式,homebrew包管理工具安装以及github源码下载安装

  • homebrew安装

    homebrew简称brew, 是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件

    通过下面命令就可以安装brew

    1
    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 

    然后安装hugo

    1
    brew install hugo
  • github源码编译安装,首先安装好依赖的工具:

    • Git
    • Mercurial
    • Go 1.3+ (Go 1.4+ on Windows)

    设置好 GOPATH 环境变量,获取源码并编译:

    1
    2
    $ export GOPATH=$HOME/go
    $ go get -v github.com/spf13/hugo

    源码会下载到

GOPATH/src

目录,二进制在

$GOPATH/bin/

二. 创建Site,生成静态页面

  • 创建站点

    1
    hugo new site MyBlog

    然后hugo会自动在MyBlog目录下生成这样一个目录结构:

    1
    2
    3
    4
    5
    6
    7
    |-archetypes   //包括内容类型,在创建新内容时自动生成内容的配置
    |-config.toml // 网站的配置文件,这是一个TOML文件
    |-content // content目录里放你写的markdown文章
    |-data //
    |-layouts // 网站的模板文件
    |-static // 放一些图片、css、js等资源
    |-themes // 网站的主题,这里spf13上面有很多theme

    关于config.toml配置文件,下面会详细说明1

  • 创建md文档 ( 需先进到MyBlog目录下 )

    1
    hugo new about.md

    执行完后,会在content目录自动生成一个MarkDown格式的about.md文件,内容如下:

    1
    2
    3
    4
    5
    +++
    date = "2016-04-27T20:37:17+08:00"
    draft = true
    title = "about"
    +++

    如果是博客日志,最好将md文件放在content的post目录里。

    1
    hugo new post/first.md

    执行完后,会在content/post目录创建一个MarkDown格式的first.md文件

  • 添加主题模版

    默认生成的网站是没有任何皮肤模板的,还得去Github上下载一个网页模板下来。如果你网络够好,网速够快,你可以在刚才的目录将Hugo官方的所有模板都下载下来:

    1
    git clone --recursive https://github.com/spf13/hugoThemes themes

    下载的主题存放在 themes/ 文件夹中,也可以只选择下载自己喜欢的模版: 进到themes目录

    1
    cd themes

    下载hyde主题模版

    1
    git clone https://github.com/spf13/hyde.git
  • 本地调试

    1
    hugo server --theme=hyde --buildDrafts --watch

    参数说明:

    1
    2
    3
    --theme 选择主题,如果安装了多个主题,这里指定就好,随意切换
    --watch 监控到文章的改动从而自动去刷新浏览器,不需要自己手工去刷新浏览器,非常方便, 现在默认是这样的,可以不用带 (hugo server --theme=hyde --buildDrafts也是同样效果)
    --buildDrafts 与content目录下的md文件结合来,如果md文档中 draft = true,就必须要加上--buildDrafts参数

    效果图如下:img

三. 托管到github pages

其实这一步更像是git操作,即将生成的静态页面push到git服务端。

要部署在 GitHub Pages 上,首先你需要在GitHub上创建一个Repository,命名为:tracydeng.github.io (tracydeng替换为你的github用户名)

接着回到站点根目录,也就是MyBlog目录下,执行命令:

1
hugo --theme=hyde --baseUrl="http://mile3033.github.io/"

命令执行完在站点根目录下会生成一个public目录,该目录下包含了所有通过hugo生成的静态页面,接下来要做的就是将这些静态页面push到刚刚创建仓库的master分支。

首先进到public目录

1
2
3
4
5
6
$ cd public
$ git init
$ git remote add origin https://github.com/tracydeng/traydeng.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master

如果没出错的话,到这里也就已经执行完了,到浏览器输入tracydeng.github.io就可以访问你刚才写的内容了。

四. 添加评论模块

下载的模版里基本上都带了评论模块,找到自己使用的theme,到layouts/partials目录下,可以看到comments.html(有些不是这个名字,像hyde模版是disqus.html),没有的话,就是模版没带这个模块,需要自己添加,打开我使用的hugo-uno模版下面的comments.html,可以看到以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<section class="post-comments">
<a class="muut" href="https://muut.com/i//comments:">Comments</a>
<script src="//cdn.muut.com/1/moot.min.js"></script>
</section>


<div id="discourse-comments"></div>
<script type="text/javascript">
var discourseUrl = ,
discourseEmbedUrl = ;
(function() {
var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
d.src = discourseUrl + 'javascripts/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
})();
</script>


<div id="disqus_thread"></div>
<script type="text/javascript">
var disqusUsername = ;
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//' + disqusUsername + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>


上面代码可以看到是支持到了muut,discourse,disqus的评论,除了这些比较出名的第三方评论服务还有多说,这里以disqus为例来说下添加评论模块:

获取disqusShortname

到disqus注册一个账号,登录,选择add a newsite to disqus,Site就填写自己的博客地址:tracydeng.github.io,并且设置好你的disqusShortname,默认时你站点拼接tracydenggithubio,当然自己可以修改,我改短一点改成tracydeng,这个name就是之后配置时要用到的,其它操作就是下一步,下一步了

配置disqusShortname

这里要结合/theme/layouts/partials下.html文件来配置 ,在MyBlog/config.toml中配置disqusShortname/disqus, 如上comments.html文件中:

1
var disqusUsername = ;

disqusUsername便是取的站点下配置文件中的参数disqus,于是在config.toml文件中params下面添加disqus就好。

1
2
[params]
disqus = "3mile"

五. 我做的一些改动

  • 修改config.toml
1
2
3
title : 修改为Coder Steven

description : "3mile"
  • 修改.md 文档

添加menu菜单

1
2
3
4
5
6
+++
date = "2016-04-27T20:37:17+08:00"
draft = true
title = "about"
menu = "main"
+++

当然这里还可以添加category等,看自己需求了

再次启动,可以看到刚刚修改后的效果图:

参考链接

  1. 包括 baseurl :主站地址, title:标题 , theme:主题,copyright 等等网站参数。