使用Hugo和Github搭建一个静态博客

选型

目前市面上开源的静态博客也有不少,Jekyll、Hexo等,这次我们使用Hugo,它有一个好处最吸引我,安装简单,只有一个二进制文件,下载就好了. 页面我们放在github pages上托管,好处是github支持自定义未备案的域名,缺陷也有,打开比较慢.

安装Hugo

hugo的安装比较简单,二进制文件下载之后,放到一个文件夹,然后将路径配置到PATH环境变量中就好了.环境变量配置不是重点这里就不展开了. 配置好之后,执行命令

hugo version

有类似如下输出说明安装成功

Hugo Static Site Generator v0.69.0-4205844B darwin/amd64 BuildDate: 2020-04-10T09:10:40Z

新建网站

在一个文件夹里执行

hugo new site myblog

此时会在当前文件新建一个文件夹myblog,其中会存在

.
├── archetypes
│   └── default.md    新建页面的时候使用的模板
├── config.toml       网站配置
├── content           新建的页面都是
├── data
├── layouts           自定义主题/页面的话可以放在这
├── static            自定义的
└── themes            这里边放网站的主题,需要注意的是,这个时候没有主题,如果启动的话主页是个空白页面

配置主题

执行命令

git clone https://github.com/flysnow-org/maupassant-hugo themes/maupassant

可以看下themes里多了个文件夹maupassant

然后修改config.toml文件

baseURL = "http://localhost:1313/"
languageCode = "en-us"
title = "你的网站名"

theme = "maupassant"

新建页面

使用命令

hugo new post/filename.md

要注意的就是上边的post按有些教程里改成posts会有问题.

然后修改 content/post/filename.md

---
title: "这是页面的标题"
date: 2020-05-13T20:13:31+08:00
draft: false
---

# 说明
需要注意的就是draft: true要改成false,否则页面默认不展示草稿.

本地启动

执行命令

hugo server

此时打开浏览器访问http://localhost:1313/ 应该会有这个页面了. 到这里本地就算搭建完成了

托管到Github

既然是网站当然要公开了才算呀 我们把网站托管到git page上

新建项目

此时默认你已注册了github的账号,没有的话自行注册吧,不展开了. 然后在github上新建仓库,仓库名为 <你的用户名>.github.io 注意: 一定是你的github用户名.github.io

编译页面

还是在myblog执行命令

hugo build

此时会生成public文件夹,将public文件夹里的内容push到刚才创建的项目.

配置git pages

这步忘了.只知道在settings这个tab. 可以直接访问一下 http://<你的用户名>.github.io 不记得是怎么配置的了,我的现在好了,也没有办法还原再看了.