WordPress 快速迁移 Hugo 教程

最近把博客由WordPress迁移到Hugo，并部署在netlify.com。

迁移前后

Hugo 简介

Hugo

hugo 是一个静态网站生成器，可以帮助你生成一个网站。

由于 hugo 使用比较简单，并且静态网站比动态网站的服务器资源要求低，被广泛使用。它可以在几秒钟之内，生成几百、上千的网页。

安装

直接去 https://github.com/gohugoio/hugo 下载最新发布版本的可执行文件即可。

注意：下载带Extended后缀版本的文件。

把文件解压，把hugo.exe添加到环境变量Path中即可。

创建新的博客

1
2
3
4
5
6
7
8
9


> # 进入某个目录
> cd ~
> # 创建网站目录
> hugo new site blog.mzh.ren
> cd mysite
> # 创建一个模板目录,结果在 mysite/themes 下
> hugo new theme mytheme
> # 创建一篇文章
> hugo new helloworld.md

此时站点的目录结构为：

blog.mzh.ren
├─ .hugo_build.lock
├─ archetypes
│  └─ default.md
├─ config.toml
├─ content
│  └─ helloworld.md
├─ data
├─ layouts
├─ public
├─ resources
│  └─ _gen
│     ├─ assets
│     └─ images
├─ static
└─ themes
   └─ mytheme
      ├─ archetypes
      │  └─ default.md
      ├─ layouts
      │  ├─ 404.html
      │  ├─ index.html
      │  ├─ partials
      │  │  ├─ footer.html
      │  │  ├─ head.html
      │  │  └─ header.html
      │  └─ _default
      │     ├─ baseof.html
      │     ├─ list.html
      │     └─ single.html
      ├─ LICENSE
      ├─ static
      │  ├─ css
      │  └─ js
      └─ theme.toml

本地测试

使用下面命令会在本地开启一个新的web server，具体地址查看实际输出内容，根据实际提供的地址即可访问

1

hugo server -D

注意：-D的意思是把draft: true（草稿的含义）的文档也生成为页面

配置修改

站点的配置文件是config.toml，根据实际的主题要求修改即可

部署发布

生成最后的静态页面，使用一个命令即可

1

hugo

会在站点路径下生成一个public的目录，把下面的内容复制到静态服务器即可

配置主题

下载一个主题，放到themes目录下，然后在config.toml中配置主题。我挑中的是ZZO主题。

1
2


cd blog.mzh.ren/themes/
git clone https://github.com/zzossig/hugo-theme-zzo.git

配置 config.toml

1
2
3
4


baseURL = 'https://blog.mzh.ren/'
languageCode = 'zh'
title = '码中人的博客'
theme = 'zzo'

Hugo 主题包下面都会有一个 exampleSite 目录，里面有一些示例文件，可以用来做主题的示例。将该目录下的文件复制到站点的根目录下面，方便你自己测试主题。

Zzo是一个非常全面的主题，配置较多，可以说一切皆可配置。除了站点名称、描述、语言、颜色等这些常规的配置，重点提醒三点：

1. Logo 配置

Logo 肯定要改，我这个网站是通过小米风格Logo生成器生成的。生成之后，把生成的图片放到主题下面 static/images/logo.png 即可。

2. Manifest 配置

Manifest 配置是个很重要的配置，它的作用是告诉浏览器，这个网站的 favicon 和 logo 是什么。方便将网站添加到手机屏幕(A2HS)。

添加到主屏幕（Add to Home Screen，简称 A2HS）是现代智能手机浏览器中的一项功能，使开发人员可以轻松便捷地将自己喜欢的 Web 应用程序（或网站）的快捷方式添加到主屏幕中，以便用户随后可以通过单击访问它。

3. 统计代码

你可以在 params.toml 中配置统计代码，比如：

1
2
3
4
5
6
7


# service
googleTagManager = "" # GTM-XXXXXX
baiduAnalytics = ""
enableBusuanzi = false
busuanziSiteUV = true
busuanziSitePV = true
busuanziPagePV = true

也可以直接在主题的 footer 上添加统计脚本。

数据迁移

1. 导出wordpress数据

进到wordpress管理后台，点击工具–>导出，选择所有内容，然后下载导出的文件。

导出wordpress数据

2. wordpress 转换成 markdown

利用 wordpresss export to markdown 工具，将导出的文件转换成 markdown 格式。

执行命令：

1

npx wordpress-export-to-markdown

根据提示输入相应的参数，即可完成转换。

3. 导入 markdown 数据

将转换后的 markdown 文件复制到 hugo 的 content/posts 目录下，然后执行命令：

1

hugo server

启动本地调试。

这时会出现标签显示多过的bug。

标签显示多过

只需要在 params.toml 中配置 minItemsToShowInTagCloud，把值设为你想要的数字即可。如值为5，则只显示的标签使用次数大于等于5个的标签。

1

minItemsToShowInTagCloud = 5 # Minimum items to show in tag cloud

部署Hugo 至 Netlify

netlify 是一家位于旧金山的云计算公司，为Web应用程序和静态网站提供託管和无服务器后端服务。该公司为网站提供托管服务，这些网站的源代码通过git&github管理，netlify 将其转化成静态页面发帽到网络。

💡部署前一定要在本地发布一下，看看生成的静态站点有没有问题。

💡当然，也要提交到你的github代码库上，这样netlify才能把你的静态站点推送到网络。

部署Hugo 至 Netlify，需要按照以下步骤进行：

登录 Netlify，建议使用 github 登录，这样可以方便导入github中的项目。
新建站点，导入一个已有的git项目。
配置构建器，选择 build: hugo，然后点击 Save。
发布静态站点，点击 Deploy。
配置域名，点击 Domain，然后点击 Add。
解析域名到netlify的域名服务器 dns1.p08.nsone.net。

通过以上双向奔赴，点击 blog.mzh.ren ，就可以访问到我的博客了。