Hugo + Even + GithubPages + Google Domains搭建个人博客(二)

系列 - 搭建个人博客
警告
本文最后更新于 2020-01-01,文中内容可能已过时。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
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
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
[[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. 内置代码高亮
1
2
3
4
5
6
# ---------开启代码高亮配置-----------
pygmentsOptions = "linenos=table"
pygmentsCodefences = true
pygmentsUseClasses = true
pygmentsCodefencesGuessSyntax = true
# ----------结束配置----------------
  1. HighlightJs
1
highlightInClient = true
提示
内置代码高亮和HighlightJs同时开启会有两个代码框,不要同时开启

Even主题Github

所有的文章都是以Markdown格式编写的,更多Markdown格式可以参考Guide

元数据的开头和结尾都用---来表示,格式可以在config.toml中的MetaDataFormat配置,类似于音视频的Metadata。

变量名解释类型参考值
title标题字符串“Title”
data文章创建时间字符串2020-01-01T22:22:22+08:00
draft草稿,如果为true,只能本地预览,不会生成到最终产物布尔true
toc文章大纲悬浮窗布尔true
tag标签字符串数组[博客]
categories分类字符串数组[博客]
summary用来显示主页的摘要字符串abc一二三
keywords关键词字符串数组[博客]
1
2
## 标题
Hello Hugo

放到static文件夹下,这些文件会拷贝到网站的生成产物中。建议使用分类来区分资源文件,便于后期整理。
参考目录:

1
2
3
4
5
6
7
static/
├── android-icon-144x144.png
├── reward
│   ├── alipay.jpeg
│   └── wechatpay.JPG
└── stickers
    └── excuseme.jpg

比如引用stickers下的excuseme.jpg,只需输入相对路径/stickers/excuseme.jpg

图片在Hugo是会原封不到的放在站点下的,一般我会用脚本批量处理,特别是iPhone上使用的HEIC格式。

脚本如下:(仅针对Mac系统和已安装ImageMaick)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#!/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

运行hugo -D就会在/public下生成产物,如果需要改变生成的目录,只需在-D 后面加上你想要生成的目录。

温馨提示: 不建议加上--minify参数,因为Even主题会有奇怪的缩进问题。

生成好的目录,直接push到Github的仓库上,就会自动生成网页,比如用户名abc,那么浏览器打开abc.github.io就会看到你生成的个人博客啦。

相关内容