使用hugo搭建github个人博客站点

Thu, May 18, 2017

做静态网站是很多年前的事了，随着技术的发展，制作静态网站也会有这么多的花样。从最初的做成自我展示的个人网站，到后来一些博客服务的提供，再到各种在线笔记的提供，对于个人知识管理与分享方面真是越来越多样化了。 　　最近了解一下通过Github发布个人博客的方式，有点意思。平时用git管理源程序，及一些MackDown文档。这些内容从利他的角度来说，除了给自己看，也应该分享出来。这儿也是我弄了这个博客的原因。

一、通过Hugo创建博客站点

　　Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。对于我来说选择它的原因只有一个，是采用Go语言开发的。

　　Hugo安装很简单。有两种安装方式：

1.1 二进制安装

　　到 Hugo Releases 下载对应的操作系统版本的Hugo二进制文件（hugo或者hugo.exe）

Mac下直接使用 Homebrew 安装：

brew install hugo

1.2 源码安装

　　在GO的开发环境下，通过获取源代码进行安装。

$ go get -v github.com/spf13/hugo

　　如果需要更新所有Hugo的依赖库，增加-u参数:

$ go get -u -v github.com/spf13/hugo

二、生成站点

2.1 创建站点

　　使用Hugo快速生成站点，比如希望生成到 /gowork/site 路径：

$ hugo new site /gowork/site

　　这样就在 /gowork/site 目录里生成了初始站点，进去目录：

$ cd /gowork/site

　　站点目录结构：

|- archetypes ：存放default.md，头文件格式
|- content ：content目录存放博客文章（.markdown/.md文件）
|- data ：存放自定义模版，导入的toml文件（或json，yaml）
|- layouts ：layouts目录存放的是网站的模板文件
|- static ：static目录存放js/css/img等静态资源
|- <config class="tom"></config>l ：config.toml是网站的配置文件

2.2 安装主题

　　Hugo官方主题：https://themes.gohugo.io/

　　Hugo官方主题GitHub：https://github.com/spf13/hugoThemes/

$ cd themes/
$ git clone https://github.com/spf13/hyde.git

　　在config.toml文件中指定hyde作为默认主题。只需添加一行：

theme = "hyde"

　　主题存放的路径为：themes\hyde，包含以下文件：

|- archetypes ：存放default.md，头文件格式
|- layouts ：主题模板文件
|- static ：静态资源
|- theme.toml ：主题配置文件

2.3 运行Hugo Server

　　Hugo内置http server，在你的站点根目录执行hugo server命令，即可在浏览器里输入：http://localhost:1313访问网站。

  $ hugo server --theme=hyde --buildDrafts

三、内容维护

3.1 发表文章：

    $ hugo new post/test.md

　　可以用文本文件或markdown编辑器打开文件 post/test.md ，并增加点内容。

+++
date = "2017-02-10T15:01:33+08:00"
title = "test"
draft = false

+++
Hello Hugo！测试内容

　　注意：默认创建的是草稿类型，需要将draft值改为false才能看到页面。

3.2 列表页概要处理

　　通常在博客首页显示多篇文章，都采用了摘要显示的方式。这儿需要修改某个主题下面layouts/index.html文件

  {{ range first 10 .Data.Pages }}
  <div class="summary">
    <h1><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
        <span class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>
    {{ .Summary }}
  </div>
  {{ if .Truncated }}
  <div class="read-more-link">
    <a href="{{ .RelPermalink }}">Read More…</a>
  </div>
  {{ end }}
{{ end }}

　　默认的.Summary显示70字符，有的时候显示的内容并不是自己想要截取的内容，可以在.MD文档内容里，直接使用

    <!--more　-->　把more后面的空格删除再用

四、生成Github静态网站

$ hugo --theme=hyde --baseUrl="https://YOURNAME.github.io/"

　　所有静态页面都会生成到 public 目录下，生成静态网站后并push到你的GitHub Pages上，就能得到一个在线的个人博客了。本文对GitHub如何使用不做详细介绍。请参考GitHub Pages在线帮助文档。

　　首先在GitHub上创建个Repository，命名为：YOURNAME.github.io(YOURNAME替换为自己的用户名)，然后用git 将刚才创建的YOURNAME.github.io项目clone下来。

　　将生成的 public 目录下所有文件拷贝到YOURNAME.github.io项目中，并提交版本。

　　现在你可以打开浏览器访问：https://xinjiayu.github.io/ 你的博客了。