注意:本站又换回了 WordPress
之前立过一个 flag,说并不会把博客变为静态的,依然使用 wordpress 作为博客的主力。但是基于考试考完闲着蛋疼、无穷无尽折腾的原则,准备试试静态博客,也就是分别尝试了两个静态网页生成器:hexo
和hugo
。在使用两者之前就有将两者进行过对比,前者基于 node.js、后者基于 golang,在对比了种种优缺点之后决定还是选择 wordpress🌚。不过还是对比出来一点东西的,个人倾向于 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)
,步骤如下:
- 用
管理员身份
打开 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
进行访问。
更改字体
- 可以先去
gfont.cdn.wepublish.cn
上找字体,我 ping 了一下谷歌字体在国内似乎可以正常访问,所以选择心仪的字体,复制类似代码如下:
<link
href="https://gfont.cdn.wepublish.cn/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 增加“显示数学公式”、“显示目录”、“增加百度、谷歌统计”、“更改字体”