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

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

hugo首页

尝试 🚀

但是,最明显的优点在于: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 init
git 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
	- 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文件 🚀

  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备份迁移。下方的两条方法均以已安装宝塔面板、已在面板中添加完网站为前提,推荐使用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--> 

永久链接配置 🚀

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

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