内容提要
作者将博客从WordPress迁移到Hugo:先用WordPress to Hugo Exporter插件导出文章为Markdown,安装Hugo并新建站点,选用maupassant主题并配置站点、归档页和关于页;用hugo server本地预览,手动修正代码高亮等未转换的HTML标签,再用hugo生成public静态文件部署到Nginx或Apache;此外修改主题,将搜索改为百度、增加相关文章开关、备案号、最近文章数量和百度统计等配置。
延伸解读
迁移工具能省力,但转换并不彻底
作者用 WordPress to Hugo Exporter 插件将文章导出为 Markdown,省去了大量手工搬运工作。但该工具无法转换 <code>、<pre>、<li> 等 HTML 标签,导致代码高亮和列表在 Hugo 中显示错乱。作者近 100 篇文章仍需用正则批量修改并逐篇测试。这说明迁移前应评估原文中 HTML 标签的使用量,预留修正时间,不能指望导出后直接上线。
主题选择要优先匹配现有功能需求
作者希望保留搜索、标签、分类、归档、RSS 订阅等功能,但官方主题库中没有完全满足需求的选项,最终选用 GitHub 上非官方的 maupassant 主题分支。这提示读者:选主题时应先列出必需功能,再考察主题是否支持,或是否愿意自行修改代码。非官方主题虽可定制,但后续维护和更新需自行负责。
本地预览与静态部署流程清晰
Hugo 自带 Web 服务器,运行 hugo server 即可在 localhost:1313 预览,并支持热修改,保存 Markdown 后自动重新编译。确认内容无误后执行 hugo 命令,生成的静态文件保存在 public 目录,将该目录设为 Nginx 或 Apache 的根目录即可运行。这一流程让迁移后的验证和部署相对简单,但前提是文章内容已修正完毕。
主题定制围绕国内使用场景展开
作者对 maupassant 主题做了多项修改:将搜索从 Google 改为百度,通过拼接“关键字 site:域名”实现站内搜索;增加相关文章开关、备案号配置、最近文章数量设置,并接入百度统计。这些改动针对国内访问和合规需求,说明选用非官方主题后,按实际场景调整配置是常见做法,但修改需自行维护。
Q&A
如何将WordPress博客的文章导出为Hugo可用的Markdown格式?
使用WordPress to Hugo Exporter插件:在wp-content/plugins/下克隆插件源码,在WordPress后台启用插件,然后通过“工具”->“Export to Hugo”下载hugo-export.zip,解压后得到posts目录下的Markdown文件。也可以直接运行插件目录下的php hugo-export-cli.php命令生成同样的zip文件。
从WordPress迁移到Hugo时,选择maupassant主题的原因和安装方法是什么?
作者希望保留WordPress博客的搜索、标签、分类、归档、RSS订阅等功能,但官方主题库没有合适的,最终选择了GitHub上飞雪无情修改的maupassant主题。安装方法:在站点目录下创建themes目录,进入后git clone https://github.com/rujews/maupassant-hugo.git,然后在config.toml中设置theme = "maupassant-hugo"。
Hugo本地预览网站时如何启动服务器并支持热更新?
在站点目录下运行hugo server即可启动本地服务器,默认访问http://localhost:1313。如果需要从其他机器访问,可以使用hugo server -D --bind 0.0.0.0 --baseURL "http://你的域名/"。Hugo支持热更新,修改Markdown文件保存后会自动重新编译加载。
迁移后文章中的代码高亮和HTML标签为什么需要手动修改?如何修改?
因为WordPress to Hugo Exporter无法转换<code>、<pre>、<li>等HTML标签,这些标签在Hugo中会导致内容混乱,所以需要手动修改。作者使用VSCode等编辑器配合正则表达式进行批量替换,修改后逐个测试确保正确。
如何用Hugo生成静态页面并部署到Web服务器?
在站点目录下运行hugo命令,编译完成后所有静态页面和资源会保存在public目录下。将该目录设置为Nginx或Apache的根目录即可对外提供服务。
作者对maupassant主题做了哪些自定义修改?
主要修改包括:将搜索从Google改为百度搜索(使用site:语法);增加相关文章开关([params] related = false);增加备案号配置([params] registerInfo = "沪ICP备xxxxxxx号");设置右边栏最近文章数量([params] recentPostNumber = 5)并显示文章日期;添加百度统计([params] baiduAnalysisId = "ID")。