由于最近再次安装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 等等网站参数。 ↩