Hugo是一个用Go语言编写的静态网站生成器,它使用起来非常简单,相对于Jekyll复杂的安装设置来说,Hugo仅需要一个二进制文件hugo(hugo.exe)即可轻松用于本地调试和生成静态页面。Hugo生成静态页面的效率很高,对于260多篇博客文章生成几乎是瞬间完成的,而之前用Jekyll需要等待10秒左右。Hugo自带watch的调试模式,可以在修改MarkDown文章之后切换到浏览器,页面会检测到更新并且自动刷新,呈现出最终效果,能极大的提高博客书写效率。再加上Hugo是使用Go语言编写,已经没有任何理由不使用Hugo作为个人博客站点生成器了。
GitHub托管
对于没有购买网站空间的用户,可以借助GitHub建立自己的个人主页。你只需要在GitHub上创建一个项目,然后将生成出来的静态页面文件push到这个项目的gh-pages分支,保证根目录有一个index.html文件即可。这样,一个免费、无限流量的博客系统就搭建完成了。同时,通过github你可以方便对博客文章进行管理和追踪。
Hugo简介
Hugo是什么?能做什么?下面给出简单的总结:
- Hugo只有一个二进制文件(比如Windows里只是一个hugo.exe)
- Hugo可以将你写好的MarkDown格式的文章自动转换为静态的网页。
- Hugo内置web服务器,可以方便的用于本地调试。
Hugo官方主页在这里,GitHub上有其代码托管,可以看这里。Hugo的安装方式有两种,一种是直接下载编译好的Hugo二进制文件。如果只是使用Hugo推荐用这种方式。另一种方式是获取Hugo的源码,自己编译。由于各种不可预料的网络问题,第二种方式不是那么轻易能成功。如果想下载Hugo二进制文件,可以看这里,可以得到hugo或者hugo.exe的程序。
Hugo生成主页
接下来,逐步生成自己的站点:
1.产生新站点
$ hugo new site mysite
会产生如下的目录结构:
▸ archetypes/ ▸ content/ ▸ layouts/ ▸ static/ config.toml
其中,config.toml是网站的配置文件,这是一个TOML文件,全称是Tom’s Obvious, Minimal Language,这是它的作者GitHub联合创始人Tom Preston-Werner 觉得YAML不够优雅,捣鼓出来的一个新格式。如果你不喜欢这种格式,你可以将config.toml替换为YAML格式的config.yaml,或者json格式的config.json。hugo都支持。content目录里放的是你写的markdown文章,layouts目录里放的是网站的模板文件,static目录里放的是一些图片、css、js等资源。
2.进入新创建的站点目录
$ cd mysite
3.创建一个页面
$ hugo new about.md
如果是博客日志,最好将md文件放在content的post目录里。
$ hugo new post/first.md
执行完后,会在content/post目录自动生成一个MarkDown格式的first.md文件:
+++ date = "2015-01-08T08:36:54-07:00" draft = true title = "first" +++
+++可以替换为Jekyll一样的—,里面的内容是这篇文章的一些信息。下面就可以开始写你的文章内容,比如:
+++ date = "2015-01-08T08:36:54-07:00" draft = true title = "first" +++ ### Hello Hugo 1. aaa 1. bbb 1. ccc
好了,刚才的about.md也有内容,该看看最后的效果了。然后你屁颠屁颠的使用hugo server启动,打开浏览器里一看,发现什么都没有!肿么了!这是Hugo对初学者非常不友好的地方,默认生成的网站是没有任何皮肤模板的。为了看看第一个写的示例,还得去Github上把一个网页模板下载下来。如果你网络够好,网速够快,你可以在刚才的目录将Hugo官方的所有模板都下载下来:
$ git clone --recursive https://github.com/spf13/hugoThemes themes
我尝试过,也失败过,且从未成功一次性将所有的模板下载下来。所以,我们还是老老实实只下载其中一个模板来看看效果吧:
$ cd themes $ git clone https://github.com/spf13/hyde.git
4.启动本地调试
$ hugo server --theme=hyde --buildDrafts --watch
浏览器里打开:http://127.0.0.1:1313,等待片刻就能看到页面了。在上面的命令中,–watch或者-w 选项打开的话,将会监控到文章的改动从而自动去刷新浏览器,不需要自己手工去刷新浏览器,非常方便。
如果你看了上面的说明已经有冲动去试一试Hugo了,我的目的也算达到了,接下来你需要的只是查看官方的说明文档就够了,所以具体的一些设置我就不重复了。
文档链接:官方文档,皮肤,Configuring Hugo,Front Matter,Menus,Template Variables,Hosting on GitHub Pages,中文文档。
关于部署
假设你需要部署在 GitHub Pages 上,首先在GitHub上创建一个Repository,命名为:coderzh.github.io (coderzh替换为你的github用户名)。在站点根目录执行 Hugo 命令生成最终页面:
$ hugo --theme=hyde --baseUrl="http://coderzh.github.io/"
如果一切顺利,所有静态页面都会生成到 public 目录,将pubilc目录里所有文件 push 到刚创建的Repository的 master 分支。
$ cd public $ git init $ git remote add origin https://github.com/coderzh/coderzh.github.io.git $ git add -A $ git commit -m "first commit" $ git push -u origin master
浏览器里访问:http://coderzh.github.io/