Hugo | 也没那么靠谱的子Blog搭建烹饪流程

2021-09-15

4711字

甘普基本变形定律

Hugo

初入静态博客是2018年，当时看了一系列“小白半个小时搭建出自己的个人Blog”文章，热情一时勃发，充满了想当然的自信，没想到前方大坑，一跳多年，终于每次更新都刷一屏半的Warning。

今年换Hugo重建，倒倒腾腾玩儿了半个多月，感觉摸出一点门道。又看上了新的Blog主题，找了个想要试试子域名的借口，重走了一遍新的搭建流程，比之前搭主站要简洁很多，暂且记录在这里。

子Blog在这里：Mantyke-杂货铺与仓储间，以Vercel进行搭建并自动部署，使用Hyde主题。

准备锅碗瓢盆

事先需要准备的东西是：

一个Github账号，注册即可
安装Git、VScode，一路按下一步装好备用，VScode插件推荐可以参考使用 Hugo 从 0 到 1 搭建个人博客 - 少数派
生成SSH密钥并链接，具体过程参考Alola World | 暨简明麻瓜快速念咒 Hugo 搭建笔记 | 小球飞鱼默写甘普基本变形定律部分。大部分名词解释和原理个人理解我也写在了它里面，今天这篇就不赘述了，仅讲流程。

捋清菜谱思路

捋一下上面几项的基本作用：

Github用于代码管理，负责储藏Blog代码，以Vercel进行搭建的话，储存Blog代码的仓库可以被设置为私密，仓库不会被其他人看到并复制。
Git用于版本控制，暂时只需要知道它负责推送代码到Github、同时也可以用来做版本回滚（万一搞砸了可以用它救命）。
VScode是个代码管理软件，我主要是用它偷懒进行主题自定义，它的搜索功能可以直接搜到需要修改的部分，省去在文件夹里找文件的痛苦。

锅里加一点油

总而言之，言而总之，先把Blog搭起来。

打开Vercel，点Continue with Github，用之前准备好的Github账号登录，流程上可以参考Hugo | 用 Vercel 完成 blog 自动化部署 | 小球飞鱼，但稍作改变：自动化部署这篇文章里，由于我已经事先搭建好了自己的Blog，所以采取的是导入自己的Github仓库的方式。而现在，我想让Vercel帮忙我搭一个Blog出来，所以直接在Let’s build something new界面点击Browse All Templates，往下拉找到Hugo，点它打开搭建页面。接下来在Create Git Repository处点Github图标，按流程进行授权，REPOSITORY NAME处填写想要的Github仓库名字，点Create，直接跳过Create a Team环节，等Vercel自己跑一会儿，新的Blog就搭好了。

图中画圈部分就是Vercel分配给Blog的网址，可以直接以这个网址进行访问，也可以进一步自己购买域名使用。

站在风火轮上原来是这种感觉……

闭眼煎炸炖炒

整个后续布置流程大致如下：

将Vercel建立的Github仓库下载到本地
选择主题，将主题文件夹复制到Blog文件夹中
对主题进行一定修改和自定义
将修改后的Blog文件夹上传到Github
触发Vercel自动部署，并发布到网上

其中修改主题会用到VScode（其实比较熟的话直接改文件也行，但是VScode可以跨文件搜索修改关键字，很方便），修改上传后的Blog文件夹会用到Git操作，都是很入门的东西，一样一样来。

将Github仓库下载到本地

打开Github，找到Vercel搭建的仓库（一个偷懒的方式，在网址栏输入https://github.com/账号名/仓库名），选择Download ZIP，将整个仓库下载到本地，找一个本地盘解压。解压后最好保持这个文件夹地址不发生变化，之后的一系列修改和上传都基于它完成。

选一个主题，然后加载

这次我选的主题是Hyde，一个基础两栏式主题，文件写得很精简，需要自定义的部分不多，也很容易改，非常适合快速布置一下就直接拿来用。

Hugo配置主题非常简单：先看一眼Blog文件夹里有没有themes这个文件夹，如果没有，新建一个，再在主题的Github仓库里下载主题文件，把解压后的文件夹放进themes文件夹，最后修改根目录下的config.toml文件（可以用VScode打开），将config.toml文件中theme一行改为theme = "hyde"，就算是大功告成了。

注意，"hyde"是主题文件夹的名字，需要和放在themes文件夹里的主题文件夹名称保持一致，也就是说如果主题文件夹叫Hyde-master，那么相应也需要改成theme = "Hyde-master

检查这一步是不是成功了？在Blog根目录下右键，点击Git Bash Here，在弹出的命令行窗口中输入Hugo server，顺利的话，会弹出如下回复：

hugo v0.87.0-B0C541E4 windows/amd64 BuildDate=2021-08-03T10:57:28Z VendorInfo=gohugoio
WARN 2021/09/15 12:19:27 Page.URL is deprecated and will be removed in a future release. Use .Permalink or .RelPermalink. If what you want is the front matter URL value, use .Params.url //这是一个报错，看起来像是Hugo版本升级后和老模板有哪里不太适应，我不确定是不是人人都有，但是我用到现在感觉它并不影响使用，暂时先不管它，回头再修。

                   | EN
-------------------+-----
  Pages            | 15
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  6
  Processed images |  0
  Aliases          |  5
  Sitemaps         |  1
  Cleaned          |  0

Built in 58 ms
Watching for changes in E:\Hugo\Mantyke-ink\{archetypes,content,layouts,static,themes}
Watching for config changes in E:\Hugo\Mantyke-ink\config.toml //这里会根据选择的Blog文件夹路径有所不同
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) //本地预览地址，会随着本地修改不断刷新
Press Ctrl+C to stop //按Ctrl+C关闭本地预览，当然也可以直接把命令行窗口关掉。

在浏览器中打开http://localhost:1313/ ，这时候就可以在本地预览Blog现在的样子了——理论上它应该和Hyde示例长成一样。

进行主题自定义

加载模板后肯定不能马上就用，至少得改改网页名字吧！——在这里我列出我对自己的Blog做出的一系列修改，改之前，推荐先把官网文档完整看一遍。

修改过程中会用到VScode，请保证安装了它，并且也装了之前文章中提到的几个插件。

修改网站标题、描述，和底部版权行

下面的内容我直接给出了应该修改的文件，但实际上，大量修改都可以通过直接在VScode中搜索来找到位置，搜索前，需要用VScode先打开Blog文件夹。

另外，如果修改的是themes文件夹里面的内容，推荐先把相应子文件夹复制一份到根目录下，修改根目录下的对应文件——Hugo会优先读取根目录下的设置——万一搞砸了，把根目录里这个文件夹删掉，从themes文件夹里再复制一份出来，重新改就行了。

修改网站标题：修改根目录中config.toml文件，将title = "Hyde"改成想要的名字，我改成了title = "Mantyke"

修改标题下描述：修改layouts\partials中的sidebar.html文件

<aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a>
      <p class="lead">
      {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}//修改这一段内容，从{{ else }}开始，到{{end}}结束
      </p>
    </div>

我修改后的内容为：

{{ with .Site.Params.description }} {{.}} {{ else }}档案库与仓储间{{end}}

修改底部版权行：在同一个文件的下半部分，修改

    <nav>
      <ul class="sidebar-nav">
        <li><a href="{{ .Site.BaseURL }}">Home</a> </li>
        {{ range .Site.Menus.main -}}
          <li><a href="{{.URL}}"> {{ .Name }} </a></li>
        {{- end }}
      </ul>
    </nav>

    <p>{{ with .Site.Params.copyright }}{{.}}{{ else }}&copy; {{ now.Format "2006"}}. All rights reserved. {{end}}</p> //修改这一段
  </div>
</aside>

我修改后的内容为：

<p>{{ with .Site.Params.copyright }}{{.}}{{ else }}&copy; {{ now.Format "2006"}}. Reading for pleasure. {{end}}</p>

修改日期样式

修改layouts/index.html中下面这一段

  <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>

其中Mon, Jan 2, 2006可以按照自己喜欢的方式进行修改，它会显示在Blog主页，以及文章页面的下方。

（比较偷懒的方式修改思路是也可以在VScode中搜索Mon, Jan 2, 2006然后逐个文件进行替换，这种替换式的修改思路适用于很多部分的自定义，如果懒得学更多的话）

删掉Read More…

如果觉得每篇文章下面的Read More不好看，可以删掉，位置同样在layouts/index.html文件中，修改

  <div class="read-more-link">
    <a href="{{ .RelPermalink }}">Read More…</a>

直接删除Read More…就不会再显示在页面上——觉得这么删不干净？万一哪天想再加回来呢？

紧急插入：先写个文章！

理论上下一步应该是把Blog上传到Github……但是这还一篇文章都没有呢！先写一篇！

指令是：Hugo new posts/新文章名.md，在根目录下输入，就会在content\posts里看到新建的md文件。其中比较需要注意的是Front Matter

Front Matter是文章最上方以— 分隔的区域，用于指定个别文件的变量，简单来说，它负责指定每篇文章的日期、目录、Tag等等属性。每次使用Hugo new posts/新文章名.md指令生成一篇新文章，它都会在最上方出现。可以通过编辑archetypes文件夹中的default.md来指定 Front Matter模板

我的Front Matter一般长这个样子：

---
title: "{{ replace .Name "-" " " | title }}" //文章标题
date: {{ .Date }} //自动生成日期
toc: true //打开目录：有的主题有，比如Eureka。但Hyde似乎没有目录
tags:
  - Hugo //文章tag
categories:
  - 麻瓜快速念咒互助小组  //文章分类
series:  //系列，我用得很少
draft: true //是否为草稿，如果不是，把true改成false
---

通过这个可以玩一些比较投机取巧的花招，比如以Hyde的设计，在侧栏做标签归档或者分类归档会有点麻烦，我用了一个简单点的办法：一般分类的页面地址格式是https://网站域名/categories/分类名/，于是我们指定每篇文章的其中一个分类为2021，再修改根目录下config.toml文件中的这一段：

[Menus]

  main = [
      {Name = "2021", URL = "http://ink.mantyke.icu/categories/2021/"}
  ]

铛铛铛铛，一个2021年的文章归档页就这么出现了。

另一个类似思路的偷奸耍滑小技巧：Hugo支持以Markdown语法来写文章，而Markdown语法又支持html语言，于是我们可以用<!-more-->来解决首页文章预览的问题，在内容最上方写一个<!-more-->，首页就会只显示文章标题。

以及，可以用<br />和&emsp;来写空白行，但在不同主题里适用范围不一样，Hyde主题似乎只适用后一个。

上传到Github

这个部分之前写的文章里有，可以参考：Alola World | 暨简明麻瓜快速念咒 Hugo 搭建笔记 | 小球飞鱼中的过程来操作，需要注意的是：

由于使用Vercel进行自动部署，因此不需要输入Hugo命令生成静态页面，也不需要cd public，这一步可以跳过。
由于这次搭建是从Github上先下载仓库到本地，再在本地进行修改，最终上传回Github，有可能出现推不上去的情况，可以在第一次推送时使用git push -forigin master指令，强制让本地端内容覆盖远程端。
自动部署可以达成的效果是：在线编辑Github中的仓库内容，自动更新到网站中。所以如果之后只更新文章，不再修改网站主题等设置的话，之后的文章可以直接在Github中写，或者只上传md文件到相应目录，本地端推送流程只需要一开始做一次就行（但最好还是掌握一下）。

以及以下是我经常会用到的Git教程：

Git | Git Book

開始使用分支 - 為你自己學 Git | 高見龍

Push 上傳到 GitHub - 為你自己學 Git | 高見龍

【狀況題】怎麼有時候推不上去… - 為你自己學 Git | 高見龍