使用了静态网页生成器：从wordpress到hugo

本文最后更新于 690 天前，其中的信息可能已经有所发展或是发生改变。

注意：本站又换回了 WordPress

之前立过一个 flag，说并不会把博客变为静态的，依然使用 wordpress 作为博客的主力。但是基于考试考完闲着蛋疼、无穷无尽折腾的原则，准备试试静态博客，也就是分别尝试了两个静态网页生成器：hexo和hugo。在使用两者之前就有将两者进行过对比，前者基于 node.js、后者基于 golang，在对比了种种优缺点之后决定还是选择 wordpress🌚。不过还是对比出来一点东西的，个人倾向于 hugo。

内容隐藏

5.2 或者复制粘贴你的 markdown 文件

尝试

但是，最明显的优点在于：hugo 在构建过程中更快、hexo 使用人数更多资源更丰富。作为新手的我，先用中文资源多的 hexo 搞了一遍，成功了之后换了无数套 hexo 主题没有太满意的，于是打算自己改一下主题。但是看到那些主题文件稍微有点懵，主题文件的后缀名千奇百怪：有些主题用了.ejs、有些主题用了.pug。

反正也很好查，pug 就是jade文件——一种通过缩进的方式来编写代码的过程、可以和 html 相互转换。但是不巧的是，我那套主题把 pug 代码文本放到那种 html 转换器，并不能很好地转为 html 代码、直接修改这些文件又废眼睛（像在改一团乱码）。这种糟糕的体验很容易会使一个懒人放弃，于是我拿着一堆 md 文件正式投奔 hugo 的怀抱。

静态博客最快速上手

如果你有一个虚拟主机或者服务器，服务器搭建好了环境或者面板（比如：宝塔面板），那么你就可以在自己的本地电脑上生成一堆网页静态文件：比方说 html、css、图片等等，然后一股脑地传到自己地虚拟主机上。绑定域名、解析域名、打开网址，网站建成了。

在上段所述过程中，最需要讲地就是“生成一堆网页静态文件”，本篇讲的就是这个步骤。有了这堆静态文件，网站=完成。

安装 hugo

安装 hugo 可以直接点击 hugo 的快速入门，在 windows 中安装 hugo。

我的环境是 windows，选择的安装方法是Chocolatey (Windows)，步骤如下：

用管理员身份打开 windows 中的Windows PowerShell（命令提示符）。（windows 中搜索 powershell，右键“用管理员身份运行”）
复制下方代码，然后执行

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

输入 choco，查看是否安装成功。
复制下方代码，然后执行

choco install hugo -confirm

安装完毕

用 hugo 创建第一个新网站

这时候可以关闭 powershell 了，在想新建网站文件夹的路径下打开cmd，例如： C:\Users\用户名\ 。（路径随意，按照个人喜好决定）
在cmd中，复制下方代码，然后执行（quickstart 可以替换为自己的网站名，英文字母）

hugo new site quickstart

上述操作会在 C:\Users\用户名\ 中创建一个名为”quickstart”的文件夹。打开这个文件夹会发现一些熟悉的目录，比方说theme目录里面放的是主题、content里面放的就是 markdown 文件等等。
下一步增加一个主题，这里推荐MemE 主题，首先在 CMD 中打开博客所在文件夹：

cd /d C:\Users\用户名\quickstart

先网上搜索 git，安装一下（都选择默认选项）。然后在老地方 CMD 中输入：

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

替换config.toml文件，即将这个链接的所有内容复制粘贴到 C:\Users\用户名\quickstart 文件夹下的config.toml文件中。（怎么打开奇怪后缀名的文件？推荐使用notepad++或者visual studio code）
配置config.toml文件。对于MemE主题，该文件的配置说明极其详细，按照文件中说明修改即可。

给网站增加一点内容

写第一篇文章

还是在老地方 CMD 中打开博客所在文件夹：

cd /d C:\Users\用户名\quickstart

输入下方代码，my-first-post 可以修改成任意想要的内容，甚至中文：

hugo new posts/my-first-post.md

在 content/posts 里找到刚才新建的 markdown 文件，尽情写作吧。（什么是 markdown？语法是什么？）在文章的开头（被称为Front Matter，用于文章生成的一些控制）会自动生成下列部分字段，这里可以根据自己需要修改为：

---
title: "My First Post"     #文章标题
description: 文章的描述信息
keywords:
	- post
	- blog
date: 2019-03-26T08:47:11+01:00  #文章建立时间
lastmod: 2019-03-26T08:47:11+01:00  #文章最近修改
draft: true     #是否为草稿，false则不是草稿、会发布
slug: my-first-post     #文章别名，用来做永久链接，下方会详细说明
tag:   #文章的标签
	- 第一个tag
	- 第二个tag
	- 第n个tag
categories:   #文章的目录
	- 第一个category
	- 第二个category
	- 第n个category
---

或者复制粘贴你的 markdown 文件

将自己所有的 markdown 文件放入 posts 文件夹中即可。
将原来 wordpress 中 uploads 的图片放入content文件夹下。
用 Python 批量将原有的图片链接替换为相对路径：完整代码下载，请点击这里，搜索文件名为20200126-hugo_changes_urls_of_images.py的文件。

点击下载上方 py 文件，修改下方部分。比方说原图片路径为 https://xdshcn-1258032613.cos.ap-shanghai.myqcloud.coms/uploads/2019/10/10.jpg ，更改后变为 /uploads/2019/10/10.jpg。

data = re.sub('https://xdshcn-1258032613.cos.ap-shanghai.myqcloud.coms', '', data)   # 修改此处代码，即将'https://xdshcn-1258032613.cos.ap-shanghai.myqcloud.coms'替换为空。

if __name__ == '__main__':
    top = r'C:\Users\用户名\quickstart\content\posts' # 修改此处，更变为你的blog文件夹
    modify_md_content(top)

预览和上传站点

输入命令hugo server 启动本地服务器（使用浏览器打开网址https://xdshcn-1258032613.cos.ap-shanghai.myqcloud.com/即可预览），加上 -D 可以渲染 draft。
输入命令hugo 生成站点静态文件，生成的静态文件保存在public文件夹中。

上传并部署站点

安装宝塔面板（更方便管理）、环境；解析域名；绑定域名等操作可以查看这篇文章：网站又搬迁啦：顺便说一说使用腾讯云服务器搭建博客和 wordpress 备份迁移。下方的两条方法均以已安装宝塔面板、已在面板中添加完网站为前提，推荐使用 Git。

使用 FTP

上传站点先用个傻一点的办法：将public文件夹中的所有文件打包，这里推荐使用tar.gz格式进行打包。之后可以通过宝塔面板或者 ftp 传至服务器，然后解压即可。（缺点：传输速度慢、速度慢、速度慢；但是每次可以不将uploads文件夹打包，图片单独传。）

使用 Git

在 github 新建一个自己 blog 的仓库，并将自己博客文件下的所有内容上传至github，就像左边的链接那样。获取像这样的项目地址：https://github.com/0sheldonhuang0/hxdred_blog.git。

在服务器端（以 CentOS 为例）安装 Git：

yum install git

在服务器端打开站点文件夹。在宝塔面板中，一般为/www/wwwroot/<你设置的网站名称或文件夹>：

cd /www/wwwroot/<你设置的网站名称或文件夹>

从 github 克隆或者拉取最新的内容，例如：

git clone https://github.com/0sheldonhuang0/hxdred_blog.git #克隆，首次使用
git pull https://github.com/0sheldonhuang0/hxdred_blog.git #更新

观察网站的路径并在面板中设置网站目录，自行修改网站目录和运行目录，最终的运行目录即为public文件夹。

由此，使用 hugo 建站完成！

杂项的配置

内容摘要

Hugo 会自动提取文章的前 n 个字符作为摘要，或者在config.toml中设置（使用 MemE 主题的话）。此外，还可以在文章内使用下方代码进行强行分割。

<!--more-->

永久链接配置

为了使迁移过后的网站仍旧保持原有链接的样式，这一步是必做不可的：

首先还是在config.toml文件中增加（部分内容已经有了，使用MemE主题的情况下）：

# URL 结构
[permalinks]
	posts = "/:year/:month/:day/:slug/"   # 增加此处 年/月/日/文章别名，保持和wordpress默认的一致
    categories = "/categories/:slug/"
    tags = "/tags/:slug/"

在所有文章的Front Matter中加入：

title: 微信小程序「法语记忆：学背单词动词变位」2019总结
slug: conj-helper-2019     #文章别名，用来做永久链接

举个例子：链接就会从https://xd.sh.cn/posts/微信小程序「法语记忆：学背单词动词变位」2019总结变为https://xd.sh.cn/2020/01/16/conj-helper-2019/，使得其与搜索引擎中之前收录的链接一致，不会跳成 404。

新建页面

新建的文章在文件夹content/posts下方，而要新建页面则直接在content文件夹下创建对应的文件夹，比如新建文件夹about。在新的文件夹下创建文件index.md，页面的Front Matter类似于文章。创建完成之后可以直接通过https://xd.sh.cn/about进行访问。

更改字体

可以先去fonts.googleapis.com上找字体，我 ping 了一下谷歌字体在国内似乎可以正常访问，所以选择心仪的字体，复制类似代码如下：

<link
  href="https://fonts.googleapis.com/css?family=Noto+Serif+SC&display=swap"
  rel="stylesheet"
/>

在themes/主题名/layouts/partials/header.html文件中的</header>标签前加入上方代码。
在themes/主题名/assets/scss/_predefined.scss（根据具体主题进行变化）中加上刚才的字体名称。字体名称越靠前，浏览器就会优先选用：

// Fonts
$fonts: "Trebuchet MS", Verdana; //原来
$fonts: "Noto Serif SC", "Trebuchet MS", Verdana; //新加入字体，放在最前面

增加百度、谷歌统计

在themes/主题名/layouts/partials/header.html文件中的</header>标签前加入下面一行代码（这里以百度统计为例，谷歌统计类似）：

<script>
  var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?你的专属后缀";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>

显示数学公式

/uploads/2020/03/powered_by_hugo_math.jpg

示例文章可以点击这里

使用的方法是MathJax来进行渲染，和之前 wordpress 上使用的是一样的，wordpress 上使用短代码来进行控制。这里，只需要在公式的两端加上$$符号即可。

显示效果示例：

$$ f(x) = \sin(x) $$

行间显示：
$$ f(x) = \sin(x) $$

换行显示：
$$
f(x) = \sin(x)
$$

在themes/主题名/layouts/partials/header.html文件中的</header>标签前加入下面一行代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_SVG"></script>

参考资料在这里

显示目录

在每篇文章的开头显示文章的目录，即 TOC。这里可以参考官方的教程，也可以参考下方：

/uploads/2020/03/powered_by_hugo_toc.jpg

首先在config.toml中加上：

[params]
    toc = true

新建 toc 模板，即在layouts/partials这个目录下新建文件toc.html。该文件的参考示例如下：

<!-- toc.html -->
<!-- ignore empty links with + -->
{{ $headers := findRE "<h[1-4].*?>(.|\n])+?</h[1-4]>" .Content }}
<!-- at least one header to link to -->
{{ if ge (len $headers) 1 }}
{{ $h1_n := len (findRE "(.|\n])+?" .Content) }}
{{ $re := (cond (eq $h1_n 0) "<h[2-4]" "<h[1-4]") }}
{{ $renum := (cond (eq $h1_n 0) "[2-4]" "[1-4]") }}

<!--Scrollspy-->
<div class="toc">

    <div class="page-header"><strong>- CATALOG -</strong></div>

    <div id="page-scrollspy" class="toc-nav">

        {{ range $headers }}
        {{ $header := . }}
            {{ range first 1 (findRE $re $header 1) }}
                {{ range findRE $renum . 1 }}
                {{ $next_heading := (cond (eq $h1_n 0) (sub (int .) 1 ) (int . ) ) }}
                    {{ range seq $next_heading }}
                    <ul class="nav">
                    {{end}}
                    {{ $anchorId := (replaceRE ".* id=\"(.*?)\".*" "$1" $header ) }}
                        <li class="nav-item">
                            <a class="nav-link text-left" href="#{{ $anchorId }}">
                            {{ $header | plainify | htmlUnescape }}
                            </a>
                        </li>
                    <!-- close list -->
                    {{ range seq $next_heading }}
                    </ul>
                    {{ end }}
                {{ end }}
            {{ end }}
        {{ end }}

    </div>

</div>
<!--Scrollspy-->

{{ end }}

完成后，我使用默认样式即可。若要修改样式，可以在themes/主题名/assets/scss文件夹下方增加样式。
引入 TOC 模板。将下方代码插入到想要显示 TOC 目录的位置。比如说想要在文章开头的位置显示：在themes\主题名\layouts\posts\single.html中的contents标签下插入下方代码：

{{ if .Site.Params.toc | default false }}
{{ partial "toc" . }}
{{ end }}

参考资料在这里

增补

2020.3.1 增加“使用 git”部署网站
2020.3.15 增加“显示数学公式”、“显示目录”、“增加百度、谷歌统计”、“更改字体”

最新评论

最新文章

统计

尝试

静态博客最快速上手

安装 hugo

用 hugo 创建第一个新网站

给网站增加一点内容

写第一篇文章

或者复制粘贴你的 markdown 文件

预览和上传站点

上传并部署站点

使用 FTP

使用 Git

杂项的配置

内容摘要

永久链接配置

新建页面

更改字体

增加百度、谷歌统计

显示数学公式

显示目录

增补

发送评论编辑评论

尝试

静态博客最快速上手

安装 hugo

用 hugo 创建第一个新网站

给网站增加一点内容

写第一篇文章

或者复制粘贴你的 markdown 文件

预览和上传站点

上传并部署站点

使用 FTP

使用 Git

杂项的配置

内容摘要

永久链接配置

新建页面

更改字体

增加百度、谷歌统计

显示数学公式

显示目录

增补

发送评论 编辑评论

推荐文章

发送评论编辑评论