【快速建站】WordPress 快速迁移 Hugo 教程
最近把博客由WordPress迁移到Hugo，并部署在netlify.com。
Hugo 简介
hugo 是一个静态网站生成器，可以帮助你生成一个网站。
由于 hugo 使用比较简单，并且静态网站比动态网站的服务器资源要求低，被广泛使用。它可以在几秒钟之内，生成几百、上千的网页。
安装
直接去 https://github.com/gohugoio/hugo 下载最新发布版本的可执行文件即可。
注意：下载带Extended后缀版本的文件。
把文件解压，把hugo.exe添加到环境变量Path中即可。
创建新的博客
1 | > # 进入某个目录 |
此时站点的目录结构为：
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 | cd blog.mzh.ren/themes/ |
配置 config.toml
1 | baseURL = 'https://blog.mzh.ren/' |
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 | # service |
也可以直接在主题的 footer 上添加统计脚本。
数据迁移
1. 导出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 ，就可以访问到我的博客了。
往期推荐
• 吴军老师作品集
欢迎关注我的公众号“码中人”，原创技术文章第一时间推送。