🌞

使用了静态网页生成器:从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、图片等等,然后一股脑地传到自己地虚拟主机上。绑定域名、解析域名、打开网址,网站建成了。

在上段所述过程中,最需要讲地就是“生成一堆网页静态文件”,本篇讲的就是这个步骤,且为简单起见不介绍git管理自己的博客。有了这堆静态文件,网站=完成。

安装hugo

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

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

  1. 管理员身份打开windows中的CMD(命令提示符)。(windows中搜索CMD,右键“用管理员身份运行”)
  2. 复制下方代码,然后执行
Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
  1. 输入choco,查看是否安装成功。
  2. 复制下方代码,然后执行
choco install hugo -confirm
  1. 安装完毕

用hugo创建第一个新网站

  1. 同样的地方,复制下方代码,然后执行(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,用于文章生成的一些控制)会自动生成下列部分字段,这里可以根据自己需要修改为:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
---
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

1
2
3
4
5
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)

预览和上传站点

  • 安装面板、环境;解析域名;绑定域名等操作可以查看这篇文章:网站又搬迁啦:顺便说一说使用腾讯云服务器搭建博客和wordpress备份迁移
  • hugo server 启动本地服务器(使用浏览器打开网址http://localhost:1313/即可预览),加上 -D 可以渲染 draft
  • hugo 生成站点静态文件,生成的静态文件保存在public文件夹中
  • 上传站点用个傻一点的办法:将public文件夹中的所有文件打包,这里推荐使用tar.gz格式进行打包。之后可以通过宝塔面板或者ftp传至服务器,然后解压即可。(缺点:传输速度慢、速度慢、速度慢;但是每次可以不将uploads文件夹打包,图片单独传。)
  • 由此,使用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进行访问。

updatedupdated2020-01-312020-01-31