基于 Hugo 的博客搭建

简介

Hugo 是一个用 Go 编写的静态 HTML 和 CSS 网站生成器。它针对速度、易用性和可配置性进行了优化。Hugo 将一个包含内容和模板的目录渲染成一个完整的 HTML 网站。

项目地址：https://github.com/gohugoio/hugo

官网：https://gohugo.io

原本使用的博客是用 Hexo 作为生成器，主题为 Matery，但仍觉不够简洁

遂转战用 Hugo 作为生成器，主题用的 MemE

搭建

安装 Hugo

参考快速上手文档：https://gohugo.io/getting-started/installing/

Mac 直接使用 Homebrew 安装

1

brew install hugo

创建项目

1

hugo new site [blog]

安装主题 MemE

1
2
3

cd blog
git init
git submodule add --depth 1 https://github.com/reuixiy/hugo-theme-meme.git themes/meme

替换配置文件

1

rm config.toml && cp themes/meme/config-examples/zh-cn/config.toml config.toml

初始化

1
2

hugo new "posts/hello-world.md"
hugo new "about/_index.md"

本地运行

1

hugo server -D

默认运行在 http://127.0.0.1:1313

撰写

存放文章的路径在 /content/post ，/content/about 中存放着关于页面的内容

文章元信息示例：

1
2
3
4
5
6
7
8

title: # 标题
date: # 20xx-xx-xxTxx:xx:xx+08:00
tags: 	# 标签
- 笔记
- Blog
categories:	# 分类
- 技术
summary: # 这里是文章的概述

需要注意的是，默认模版中会有 Draft 的选项，译为草稿，当选项打开（即为 true）时，默认不会渲染，一般建议不要添加该项（关于 页面死活加载不出来，找半天原因，原来是默认加上了 Draft :)

图片可以放在 static 文件夹中，引用时直接使用 /<pic_name> 就行了

部署

准备仓库

就不在这里赘述了

生成静态文件

1

hugo

前提是已经在配置文件中配置默认主题及项目地址，否则

1

hugo --theme=meme --baseUrl="example.com"

上传部署

不出意外的话，要出意外了，项目根目录会多出 public 文件夹

1
2
3
4
5

cd public
git add .
git commit -m "Hello World!"
git remote add origin [仓库SSH地址]
git push -u origin main

如果有自己的域名，到 /static 中添加 CNAME 文件，里面放自己的域名

其他

MemE 主题添加 Giscus 评论系统

参考大佬给出的文件改动参考：https://github.com/reuixiy/hugo-theme-meme/pull/397/files

支持的 Front Matter