颜林林的个人网站

Linlin Yan's Personal Website

使用Hugo将GitHub仓库快速改造成内容网站

2019-12-17 22:53

参加极客时间《左耳听风》专栏的每周学习打卡活动ARTS已经第13周了。

我一直在使用GitHub仓库做打卡记录。如今内容越来越多,想要查找过去学过的内容进行复习,感觉越来越不方便了,急需弄几个索引出来。

同时,因为我通常在本地编辑,都完成后,才用git push推到GitHub上,内容预览也不太方便。最近改变了自己的个人网站,打算采用同样的技术(Hugo + simple-style Theme)来做一次架构升级,并使用GitHub Pages完成最终版本的对外发布。

以下是相应的操作过程,供参考(使用时应根据情况做些微调):

1. 初始化Hugo站点:

由于我是在已有仓库上建站,所以采用:

1
$ hugo new site . --force

如果是全新的,则可以直接:

1
2
$ hugo new site my-site-name  # 这里可以将“my-site-name”更换为其他名字
$ cd my-site-name/

2. 选择风格:

这里我选择我自己设计的simple-style风格:

1
$ git submodule add https://github.com/yanlinlin82/simple-style themes/simple-style

也可以从这里去另外找一个其他风格:https://themes.gohugo.io/

3. 配置config.toml

详细配置项,可参见:https://gohugo.io/getting-started/configuration/

这里我写的配置如下:

baseURL = "http://yanlinlin82.github.io/ARTS-Weekly/"
title = "颜林林的“左耳听风ARTS”打卡记录"
theme = "simple-style"
paginate = 20

[permalinks]
post = "/:slug/"
page = "/:slug/"

[[menu.main]]
weight = 10
name = "目录"
url = "/"

[[menu.main]]
weight = 90
name = "关于"
url = "/about/"

4. 将已有内容移入发帖目录

$ mkdir content/posts/
$ mv week*.md content/posts/

同时修改每个文件,将标题部分从原来的

# 左耳听风ARTS第一周(2019年9月23日~29日)

改成如下格式(同时加上日期和时间):

---
title: ARTS第一周(2019年9月23日~29日)
date: 2019-09-29T22:11:09+0800
slug: week-001
---

5. 增加一个“关于”页面

$ vi content/about.md

将原来在README中的活动说明写入该页面。头部也参考上述格式。

6. 预览站点

$ hugo server

7. 发布站点

$ hugo  # 编译站点
$ rsync -avP public/ docs/  # 将站点发布结果完全同步到docs目录中,方便配置GitHub Pages
$ echo public/ >> .gitignore  # 在git中忽略public目录
$ git add docs/  # 将docs(发布结果)加入git管理

最后git commit后,将其推送到GitHub。

8. 配置GitHub Pages

进入该github仓库的设置页面,启用Pages功能,并设置到展示master的docs/目录。

然后浏览:https://yanlinlin82.github.io/ARTS-Weekly/