Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。相较于Hexo和WordPress,Hugo的安装和配置都方便得多,生成页面的速度也是前两者无可比拟的。而Github Pages是github提供的静态网页托管服务,提供1GB的免费空间,可直接通过github仓库进行站点部署,十分方便。

本站就是使用了Hugo和Github Pages来进行创建和部署的,下面来简单介绍一下部署过程。

安装及新建站点

以macOS为例:

brew install hugo # 安装hugo,其他平台类似,参考:https://gohugo.io/getting-started/installing/

hugo version # 测试是否安装成功

hugo new site myblog # 创建一个新站点myblog,会新建一个文件夹myblog,并在该文件夹中生成基础的网页配置模块。

"""
.
├── archetypes
├── assets
├── config
├── content
├── data
├── layouts
├── static
└── themes
"""

选择主题

下一步就是要找到合适的主题,以本站使用的hugo-nuo为例。

cd myblog
cd themes
git clone https://github.com/laozhu/hugo-nuo

这一步是讲hugo-nuo主题从git仓库中clone到本地themes的文件夹中,其他主题同理。可以在hugo官网发现更多主题。

配置站点

下一步就需要进行网页的配置,一些自定义的内容,是通过myblog文件夹中的config.toml文件实现的。

可以参考作者给出的配置文件样例:themes/hugo-nuo/exampleSite/config.toml,不懂的地方可以参考说明文档,作者的博客里也有中文版

新建文章

在配置完config.toml后,可以新建文章进行测试。在主文件夹目录myblog下运行:

hugo new post/hello-world.md

会在目录content/post中生成hello-world.md,文档的头部内容如下:发布前将draft改为false即可。

---
title: "Hello World"
author: "Author Name"
cover: "/images/cover.jpg"
tags: ["tagA", "tagB"]
date: 2019-05-04T11:15:31+08:00
draft: true
---

<!--more--> # 标记 READ MORE 位置

发布并预览

启动hugo,-D使得draft为true的文档也会被预览。执行以下命令后即可通过http://localhost:1313/进行预览。

hugo server -D

预览没有问题后可以在主目录下执行:

hugo

则会下public/目录下根据配置生成网页。

Host on GitHub

渲染完成后,我们当然是要把我们的网站发布在网络上,可以随时随地让所有人都可以通过网页访问到。一种简单免费的方法是通过github pages,这样就不用捣腾自己的服务器了,省时省力省钱。可以把public/目录可以同步到github上,通过github pages部署。

首先,需要在github上新建一个个人仓库,命名为:<USERNAME>.github.io

在GitHub Pages的部分可以配置自己的域名:

新建完仓库后,需要建立本地public/目录,和github上<USERNAME>.github.io仓库的链接:

# 进入public目录:
cd public

# git初始化
git init

# 链接到远程仓库
git remote add origin git@github.com:<github_username>/<username>.github.io.git

git add .
git commit -m "first commit of myblog"
git push -u origin master

很快我们就可以通过https://<USERNAME>.github.io访问到我们的网页啦,如果配置了自己的域名,则可通过该域名进行访问。

BUG修复

  1. 解决 MathJax 与 Markdown 的冲突

https://liam.page/2015/09/09/fix-conflict-between-mathjax-and-markdown/

http://kubicode.me/2016/03/16/Hexo/Fix-Hexo-Bug-In-Mathjax/

https://blog.csdn.net/kamidox/article/details/48380239

https://github.com/hexojs/hexo/issues/524

https://www.gohugo.org/doc/tutorials/mathjax/

NexT

Reference

  1. hugo docs

  2. Hugo-nuo-theme