Hugo + Even + GithubPages + Google Domains搭建个人博客(二)
系列 - 搭建个人博客
目录
1 Even主题配置
1.1 基础配置
baseURL = http://example.org/ #替换为你的Github仓库地址,如果需要配置Google搜索,改为你的自定义域名
languageCode = en-us
title = My New Hugo Site # 博客标题
DefaultContentLanguage = "zh-cn"
DefaultContentLanguageInSubdir = true
theme = "even"
preserveTaxonomyNames = true #保留标签大小写, true为保留
enableRobotsTXT = true #自动生成爬虫文件
enableEmoji = true #支持Emoji
enableGitInfo = false #可根据 Git 中的提交生成最近更新记录。
disablePathToLower = true # URL 路径区分大小写
hasCJKLanguage = true #自动检测是否包含 中文\日文\韩文
MetaDataFormat = "yaml" #配置文件类型
disqusShortname = "" #你的disqus用户名
paginate = 5 #分页每页的文章数量
googleAnalytics = "UA-**********-*" #GoogleAnalytic的Id
copyright = ""
1.2 菜单配置
[[menu.main]] # 配置目录
name = "Home"
weight = 10
identifier = "home"
url = "/"
[[menu.main]]
name = "Archives"
weight = 20
identifier = "archives"
url = "/post/"
[[menu.main]]
name = "Tags"
weight = 30
identifier = "tags"
url = "/tags/"
[[menu.main]]
name = "Categories"
weight = 40
identifier = "categories"
url = "/categories/"
提示
这个identifier一定要按照这个填,可以多,不能少,不然点击菜单会出现空白
1.3 代码高亮配置
- 内置代码高亮
# ---------开启代码高亮配置-----------
pygmentsOptions = "linenos=table"
pygmentsCodefences = true
pygmentsUseClasses = true
pygmentsCodefencesGuessSyntax = true
# ----------结束配置----------------
- HighlightJs
highlightInClient = true
提示
内置代码高亮和HighlightJs同时开启会有两个代码框,不要同时开启
1.4 更多主题配置
2 文章配置
所有的文章都是以Markdown格式编写的,更多Markdown格式可以参考Guide
2.1 元数据Metadata
元数据的开头和结尾都用---
来表示,格式可以在config.toml
中的MetaDataFormat
配置,类似于音视频的Metadata。
变量名 | 解释 | 类型 | 参考值 |
---|---|---|---|
title | 标题 | 字符串 | “Title” |
data | 文章创建时间 | 字符串 | 2020-01-01T22:22:22+08:00 |
draft | 草稿,如果为true,只能本地预览,不会生成到最终产物 | 布尔 | true |
toc | 文章大纲悬浮窗 | 布尔 | true |
tag | 标签 | 字符串数组 | [博客] |
categories | 分类 | 字符串数组 | [博客] |
summary | 用来显示主页的摘要 | 字符串 | abc一二三 |
keywords | 关键词 | 字符串数组 | [博客] |
2.2 正文
## 标题
Hello Hugo
3 资源文件
放到static
文件夹下,这些文件会拷贝到网站的生成产物中。建议使用分类来区分资源文件,便于后期整理。
参考目录:
static/
├── android-icon-144x144.png
├── reward
│ ├── alipay.jpeg
│ └── wechatpay.JPG
└── stickers
└── excuseme.webp
3.1 引用路径
比如引用stickers
下的excuseme.webp
,只需输入相对路径/stickers/excuseme.webp
。
3.2 图片处理
图片在Hugo是会原封不到的放在站点下的,一般我会用脚本批量处理,特别是iPhone上使用的HEIC
格式。
脚本如下:(仅针对Mac系统和已安装ImageMaick)
#!/bin/bash
#建议加入图片压缩
if [[ -n $1 ]]; then
cd $1
shopt -s nullglob
for f in *.HEIC
do
echo "process $f"
# extension="${f##*.}"
filename="${f%.*}" #获取文件名
magick convert $f -strip $filename.jpg #删除信息并转换成jpg
rm -rf $f
done
for f in *.[Jj][Pp][Gg]
do
echo "process $f"
filename="${f%.*}" #获取文件名
magick convert $f -strip $f #删除信息
done
for f in *.jpeg
do
echo "process $f"
filename="${f%.*}" #获取文件名
magick convert $f -strip $f #删除信息
done
for f in *.png
do
echo "process $f"
filename="${f%.*}" #获取文件名
magick convert $f -strip $f #删除信息
done
echo "all file has been processed!!!🏆"
else
echo
echo -e "\033[31;7mnot found directory!!!\033[0m\n"
fi
4 发布
运行hugo -D
就会在/public
下生成产物,如果需要改变生成的目录,只需在-D
后面加上你想要生成的目录。
温馨提示: 不建议加上--minify
参数,因为Even主题会有奇怪的缩进问题。
生成好的目录,直接push到Github的仓库上,就会自动生成网页,比如用户名abc,那么浏览器打开abc.github.io
就会看到你生成的个人博客啦。