使用了静态网页生成器：从WordPress 到 Hugo

时间：2023-07-03 21:00:01 | 来源：网站运营

时间：2023-07-03 21:00:01 来源：网站运营

使用了静态网页生成器：从WordPress 到 Hugo：2020.10.6 增补：又换回了 Hugo，使用 Github 和 Netlify 托管，真香。

2020.7.27 增补 ： 博客地址已更变为 https://xd.sh.cn ，并从Hugo迁移回了WordPress，WordPress 真香。

----- 以下是原文 ------

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

本文的目录（仅供参考之用，点了会跳转到原文）：

1. 尝试
2. 静态博客最快速上手
3. 安装 hugo
4. 用 hugo 创建第一个新网站
5. 给网站增加一点内容
1. 写第一篇文章
2. 或者复制粘贴你的 markdown 文件
6. 预览和上传站点
1. 上传并部署站点
1. 使用 FTP
2. 使用 Git
7. 杂项的配置
1. 内容摘要
2. 永久链接配置
3. 新建页面
4. 更改字体
5. 增加百度、谷歌统计
6. 显示数学公式
7. 显示目录
8. 增补

尝试

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

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

静态博客最快速上手

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

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

安装hugo

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

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

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

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'))

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

choco install hugo -confirm

1. 安装完毕

用hugo创建第一个新网站

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

hugo new site quickstart

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

cd /d C:/Users/用户名/quickstart先网上搜索git，安装一下（都选择默认选项）。然后在老地方CMD中输入：

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

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

给网站增加一点内容

写第一篇文章

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

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

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

hugo new posts/my-first-post.md

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

---title: "My First Post" #文章标题description: 文章的描述信息keywords: - post - blogdate: 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个tagcategories: #文章的目录 - 第一个category - 第二个category - 第n个category---

或者复制粘贴你的markdown文件

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

点击下载上方py文件，修改下方部分。比方说原图片路径为 https://hxd.red/wp-contents/uploads/2019/10/10.jpg ，更改后变为 /uploads/2019/10/10.jpg。

data = re.sub('https://hxd.red/wp-contents', '', data) # 修改此处代码，即将'https://hxd.red/wp-contents'替换为空。if __name__ == '__main__': top = r'C:/Users/用户名/quickstart/content/posts' # 修改此处，更变为你的blog文件夹 modify_md_content(top)

预览和上传站点

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

上传并部署站点

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

2020.10.6 更新：推荐使用 Netlify !

使用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-->

永久链接配置

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

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

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

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

title: 微信小程序「法语记忆：学背单词动词变位」2019总结slug: conj-helper-2019 #文章别名，用来做永久链接举个例子：链接就会从https://hxd.red/posts/微信小程序「法语记忆：学背单词动词变位」2019总结变为https://hxd.red/2020/01/16/conj-helper-2019/，使得其与搜索引擎中之前收录的链接一致，不会跳成404。

新建页面

新建的文章在文件夹content/posts下方，而要新建页面则直接在content文件夹下创建对应的文件夹，比如新建文件夹about。在新的文件夹下创建文件index.md，页面的Front Matter类似于文章。创建完成之后可以直接通过https://hxd.red/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>

显示数学公式

示例文章可以点击这里

• 使用的方法是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。这里可以参考官方的教程，也可以参考下方：

• 首先在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 增加“显示数学公式”、“显示目录”、“增加百度、谷歌统计”、“更改字体”。

欢迎关注公众号：不淡定的实验室。原文地址：