效果图预览:

image-20220301193053263

大家好,最近重搭了个人博客,之前用 Hexo,WordPress 也搭建过,但是总是很不理想,最近用 hugo 感觉还不错,接下来将我搭建的过程记录下来,方便大家自己尝试;

本地搭建

因为我用的是 MacBook,所以接下来也将基于此环境做演示;

安装 hugo

1
2
brew install hugo #安装hugo
hugo version  #查看版本

这里注意下,安装的是拓展版本,方便以后做拓展,如何查看自己安装的是不是拓展版本,hugo v0.89.2+extended darwin/amd64 BuildDate=unknown查看版本显示这个就是拓展版本(带 extended 的);

新建站点

1
hugo new site site-name #自行定义站点名

添加主题

1
2
3
4
cd site-name #切换到站点根目录
git init #初始化git仓库
git clone https://github.com/dillonzq/LoveIt.git ./themes #这里我安装的是LoveIt主题
cp themes/loveit/exampleSite/config.toml ./config.toml #直接将主题的配置文件复制过来替换成站点配置

站点配置

设置站点默认语言

1
defaultContentLanguage = "zh-cn"

禁用主题目录

1
#themesDir = "../../"

设置站点名称

1
title = "语梦谈"

设置语言项

注意:这个主题默认是支持多语言的,如果使用多语言,需要分别创建对应的文章,不然会报错,我这里只用到了中文;

languages项中,默认有三个语言大项,我删除了其余两个,下面主要展示的是中文的配置内容,同理,只粘贴出我修改过的项:

  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
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
[languages.zh-cn]
    weight = 2
    # 网站语言, 仅在这里 CN 大写
    languageCode = "zh-CN"
    # 语言名称
    languageName = "简体中文"
    # 是否包括中日韩文字
    hasCJKLanguage = true
    # 默认每页列表显示的文章数目
    paginate = 12
    # [UA-XXXXXXXX-X] 谷歌分析代号
    googleAnalytics = ""
    # 版权描述,仅仅用于 SEO
    copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License."
    # 菜单配置
    [languages.zh-cn.menu]
      [[languages.zh-cn.menu.main]]
        identifier = "posts"
        # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标
        pre = ""
        # 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标
        post = ""
        name = "文章"
        url = "/posts/"
        title = ""
        weight = 1
         [[languages.zh-cn.menu.main]]
        identifier = "thinks"
        pre = ""
        post = ""
        name = "思考"
        url = "/thinks/"
        title = ""
        weight = 2
      [[languages.zh-cn.menu.main]]
        identifier = "tags"
        pre = ""
        post = ""
        name = "标签"
        url = "/tags/"
        title = ""
        weight = 3
      [[languages.zh-cn.menu.main]]
        identifier = "categories"
        pre = ""
        post = ""
        name = "分类"
        url = "/categories/"
        title = ""
        weight = 4
      [[languages.zh-cn.menu.main]]
        identifier = "about"
        pre = ""
        post = ""
        name = "关于"
        url = "/about/"
        title = ""
        weight = 5
      [[languages.zh-cn.menu.main]]
        identifier = "github"
        pre = "<i class='fab fa-github fa-fw'></i>"
        post = ""
        name = ""
        url = "https://github.com/jouzeyu"
        title = "GitHub"
        weight = 6
    [languages.zh-cn.params]
      # 网站描述
      description = "盛年不重来,一日难再晨"
      # 网站关键词
      keywords = ["blog", "Jouzeyu"]
      # 应用图标配置
      [languages.zh-cn.params.app]
        # 当添加到 iOS 主屏幕或者 Android 启动器时的标题, 覆盖默认标题
        title = "语梦谈"
        # 是否隐藏网站图标资源链接
        noFavicon = false
        # 更现代的 SVG 网站图标, 可替代旧的 .png 和 .ico 文件
        svgFavicon = ''
        # Android 浏览器主题色
        themeColor = "#ffffff"
        # Safari 图标颜色
        iconColor = "#5bbad5"
        # Windows v8-10 磁贴颜色
        tileColor = "#da532c"
      # 搜索配置
      [languages.zh-cn.params.search]
        enable = true
        # 搜索引擎的类型 ("lunr", "algolia")
        type = "algolia"
        # 文章内容最长索引长度
        contentLength = 4000
        # 搜索框的占位提示语
        placeholder = ""
        # 最大结果数目
        maxResultLength = 10
        # 结果内容片段长度
        snippetLength = 50
        # 搜索结果中高亮部分的 HTML 标签
        highlightTag = "em"
        # 是否在搜索索引中使用基于 baseURL 的绝对路径
        absoluteURL = false
        [languages.zh-cn.params.search.algolia]
          index = "index.zh-cn"
          appID = ""
          searchKey = ""
      # 主页信息设置
      [languages.zh-cn.params.home]
        # RSS 文章数目
        rss = 10
        # 主页个人信息
        [languages.zh-cn.params.home.profile]
          enable = true
          # Gravatar 邮箱,用于优先在主页显示的头像
          #gravatarEmail = "jouzeyu@outlook.com"
          # 主页显示头像的 URL
          avatarURL = "https://avatars.githubusercontent.com/u/56755229?v=4"
          # 主页显示的网站标题 (支持 HTML 格式)
          title = "语梦谈"
          # 主页显示的网站副标题
          subtitle = "盛年不重来,一日难再晨"
          # 是否为副标题显示打字机动画
          typeit = true
          # 是否显示社交账号
          social = true
          # 免责声明 (支持 HTML 格式)
          disclaimer = ""
        # 主页文章列表
        [languages.zh-cn.params.home.posts]
          enable = true
          # 主页每页显示文章数量
          paginate = 6
      # 主页的社交信息设置
      [languages.zh-cn.params.social]
        GitHub = "jouzeyu"
        Linkedin = ""
        Twitter = ""
        Instagram = ""
        Facebook = ""
        Telegram = "jouzeyu"
        Medium = ""
        Gitlab = ""
        Youtubelegacy = ""
        Youtubecustom = ""
        Youtubechannel = ""
        Tumblr = ""
        Quora = ""
       Keybase = ""
        Pinterest = ""
        Reddit = ""
        Codepen = ""
        FreeCodeCamp = ""
        Bitbucket = ""
        Stackoverflow = ""
        Weibo = ""
        Odnoklassniki = ""
        VK = ""
        Flickr = ""
        Xing = ""
        Snapchat = ""
        Soundcloud = ""
        Spotify = ""
        Bandcamp = ""
        Paypal = ""
        Fivehundredpx = ""
        Mix = ""
        Goodreads = ""
        Lastfm = ""
        Foursquare = ""
        Hackernews = ""
        Kickstarter = ""
        Patreon = ""
        Steam = ""
        Twitch = ""
        Strava = ""
        Skype = ""
        Whatsapp = ""
        Zhihu = ""
        Douban = ""
        Angellist = ""
        Slidershare = ""
        Jsfiddle = ""
        Deviantart = ""
        Behance = ""
        Dribbble = ""
        Wordpress = ""
        Vine = ""
        Googlescholar = ""
        Researchgate = ""
        Mastodon = ""
        Thingiverse = ""
        Devto = ""
        Gitea = ""
        XMPP = ""
        Matrix = ""
        Bilibili = ""
        Email = "jouzeyu@outlook.com"
        RSS = true

说明:

  1. 菜单配置中标签和分类会自动获取,其他分类需要创建对应的文件夹来存放文章,比如文章对应的是posts,那么创建新文章的时候就是hugo new posts/my-first-post.md;
  2. 搜索配置建议选algolia,需要其他额外配置,放在下面讲;
  3. 主页的社交信息设置中,是那一项有内容首页就会显示那一项;

线上相关准备

如果想要部署到线上,那么下面的准备工作是必不可少的,另外还需要你有一个备案过的域名(国内的话)

设置搜索

需要去algolia官网去注册一个账号,可以参考这篇文章:Hugo Algolia 搜索及 Netlify 自动化处理

设置评论系统

hugo 默认用的是 Valine 评论系统,需要完成这项需要做以下几步:

注册账号

网址是:https://console.leancloud.cn/

创建应用

image-20220301201041362

数据存储创建 class

image-20220301201135080

配置安全域名

image-20220301201224536

如果不配置,会提示 Code 403: 访问被 API 域名白名单拒绝,请检查你的安全域名设置.

绑定域名

image-20220301201329057

这里稍微注意下,这个域名可以用别的二级域名,不用使用原本解析访问的域名。另外如果提示正在部署中,不用着急,它需要等待一会,如果提示 dns 未解析,那按照说明解析就可以了。

配置到 hugo
1
2
3
 appId = "fa7mRg1BGQdKUEs5b5c42rah-gzGzoHsz" #从应用凭证中获取的
 appKey = "ekeMLbPcNnMXGj9w30Ehadcj" #从应用凭证中获取的
 serverURLs = "https://valine.unlazy.run" #就是上一步你填写的域名

部署到服务器

简单讲下原理,我们写出 markdown 文章,通过 hugo -D 将文章打包成 html 之类的静态访问资源,所以如果你和我一样想部署到服务器时,你只需要将打包生成的 public 文件夹上传到服务器就可以了,不需要在服务器上搭建 hugo,也不需要上传其他的文件;

这一块有很多中方法,我简单说下我的方法:

1
2
3
4
5
第一步:通过hugo -D 命令生成静态资源,即public目录
第二步:将public上传到github仓库,这里用了一个本地自己写的脚本
第三步:服务器安装nginx,域名绑定,指向网站所在目录
第四步:生成https证书
第五步:通过定时任务,在服务器上定时运行脚本-将github仓库的内容同步到服务器

相关问题答疑

  1. 如果是本地的话,截止到线上相关准备前就已经结束了,你可以本地运行hugo server -D然后访问http://localhost:1313预览网站;

  2. 如果想要部署到github page可能你还需要看看其他文章,因为我还没试过;

  3. 如果你的文章不显示,那需要将 md 文件中的draft选项改为false,这个选项的意思是,该文章是否草稿;

  4. 如果需要加标签,你可以这样写:

    1
    2
    
    draft: false
    tags: ["MySQL"]
    
  5. 如果需要加分类,你可以这样写:

    1
    2
    
    draft: false
    categories: ["MySQL学习"]
    
  6. 如果文中包含照片,可以先放到任意图床中,拿到链接放到文中,当然你也可以用本地文件;