使用 Hugo 搭建博客

以前写的一些文章笔记都托管在简书和 Segmenfault 上，但由于简书内容越来越垃圾，一直都打算转移到 github pages 上，但由于个人原因拖到现在。最近刚好有些时间，比较了一些静态博客生成工具，最后选择用 Hugo 来生成和管理自己的博客。

Hugo

Hugo 是由 Go 语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

---

安装

环境：macOS

brew install hugo

# 检查安装成功
hugo version # Hugo Static Site Generator v0.30.2 darwin/amd64 BuildDate: 2017-12-13T17:35:33+08:00

---

开始使用

生成 site 目录

hugo new site blog
cd blog
git init
#Congratulations! Your new Hugo site is created in /Users/steven/MyProjects/Demo/blog.

#Just a few more steps and you're ready to go:
#
#1. Download a theme into the same-named folder.
#   Choose a theme from https://themes.gohugo.io/, or
#   create your own with the "hugo new theme <THEMENAME>" command.
#2. Perhaps you want to add some content. You can add single files
#   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
#3. Start the built-in live server via "hugo server".
#
#Visit https://gohugo.io/ for quickstart guide and full documentation.

# 目录结构
tree blog
#blog
#├── archetypes
#│   └── default.md
#├── config.toml
#├── content
#├── data
#├── layouts
#├── static
#└── themes

config.toml 是配置文件，在里面可以定义博客地址、构建配置、标题、导航栏等等。

themes 是主题目录，可以去 themes.gohugo.io 下载喜欢的主题。

content 是博客文章的目录。

安装主题

去 themes.gohugo.io 选择喜欢的主题，下载到 themes 目录中，然后在 config.toml 中配置 theme = "even" 即可。其他配置可见 theme 说明

下面以我比较喜欢 Even 主题 举个例子

1. 下载

• 可以直接 clone 到 themes 目录下，优点是如果对主题有调整需求可以同时提交到 git 控制中。

  git clone https://github.com/olOwOlo/hugo-theme-even themes/even

• 也可以添加到 git 的 submodule 中，优点是后面讲到用 travis 自动部署时比较方便。如果需要对主题做更改，最好 fork 主题再做改动。

  git submodule add https://github.com/olOwOlo/hugo-theme-even.git themes/even

2. 使用

如果需要调整更改主题，需要在 themes/even 目录下重新 build

cd themes/even && npm i && npm start

第一篇文章

hugo new post/my-first-post.md

文章顶部可以设置一些 meta 信息，例如：

---
title: "My First Post"
date: 2017-12-14T11:18:15+08:00
weight: 70
keywords: ["hugo"]
description: "第一篇文章"
tags: ["hugo", "pages"]
categories: ["pages"]
author: ""
---

这里是文章内容

预览

执行命令，使用 Hugo 生成静态内容并在启动本地 HTTP Server。然后即可访问 http://localhost:1313/ 查看效果。

hugo server -D
#...
#Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

Hugo server 会检测文件变化，自动刷新浏览器。

---

部署到 GitHub Pages

最终我们需要把博客部署到一个托管服务，免费稳定的 Github Pages 是个很好的选择。再结合 Travis 自动部署，发布文章会变得很简单。

1. 先把源码提交到 GitHub 的一个 repo (源码 repo)

   git add -A
   git commint -m "initial all files"
   git remote add origin https://github.com/<username>/blog
   git push -u origin master

2. 准备发布博客使用的 pages repo

   Github Pages 有多种类型：个人、组织、个人的某个项目、组织的某个项目。具体细节官方文档可见 GitHub Pages。本文使用的是 <username>.github.io。

3. 首先在 Github 上创建 <username>.github.iorepo，同时 config.toml 的 baseURL 要设置成 https://<username>.github.io
4. 生成 Github Access Token，至少要有 public_repo 的权限。

   

5. 配置 Travis

   去 Travis CI 注册关联 Github 的账号，然后同步账户并激活 blog repo。

   

   接着进入 blog 的设置页面，选择自动部署触发条件，并把刚刚生成的 GitHub Access Token 添加到环境变量里。

   

6. 在 blog repo 中添加 .travis.yml

   sudo: false
   language: go
   git:
       depth: 1
   install: go get -v github.com/gohugoio/hugo
   script:
       ‐ hugo
   deploy:
       provider: pages
       skip_cleanup: true
       github_token: $GITHUB_TOKEN
       on:
           branch: master
       local_dir: public
       repo: <username>/<username>.github.io
       fqdn: <custom-domain-if-needed>
       target_branch: master
       email: <github-email>
       name: <github-username>

   部分参数解释：

   • 默认情况下，travis 会自动下载 git submodules
   • github_token: $GITHUB_TOKEN 要和 travis 设置的环境变量名一致
   • fqdn: 如果需要设置自定义域名，可以在这里设置，travis 会自动生成 CNAME 文件提交，同时要设置 config.toml 中的相应的 baseURL

7. 最后，可以手动去 travis 触发一次 build 检查效果。如果设置了提交触发 build，之后每次 blog repo 有提交都会自动 build，不再需要关心 travis 状态。