点击登录
  • 无线网络技术课程教学平台已上线,提供课件、实验、视频各种资源,欢迎访问:http://www.thinkmesh.net/wireless

使用Hugo搭建个人博客站点

前端观察 norbert 264次浏览 已收录 0个评论 扫描二维码

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 HugoFront MatterMenusTemplate VariablesHosting 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/


网站内容采用BY-NC-SA协议分享 , 转载请注明: 使用Hugo搭建个人博客站点
喜欢 (0)
[norbert_jxl@163.com]
分享 (0)

您必须 登录 才能发表评论!