琐碎笔记

从 WordPress 迁移到 Astro:本站的重构之旅

1276 字阅读 2 分钟
从 WordPress 迁移到 Astro:本站的重构之旅

作为一个长期使用 WordPress 的博主,随着时间的推移,越来越感受到动态建站系统带来的臃肿与性能瓶颈。为了追求更极致的加载速度、更纯粹的写作体验以及更好的前端掌控力,我决定将本站从老旧的 WordPress 全面迁移至当下火热的现代化静态站点生成器 —— Astro

这篇文章将完整记录本站的迁移过程,特别是最让人头疼的历史文章数据转换环节。

迁移效果对比

在开始讲具体技术细节前,先来看看迁移前后的视觉效果对比。新的 Astro 站点不仅在代码底层完全脱胎换骨,视觉呈现上也进行了更加现代化、通透的设计。

迁移前(WordPress 时期): WordPress 迁移前效果

迁移后(Astro 重构后): Astro 迁移后效果


迁移准备与环境依赖

本次操作环境基于 macOS,在开始前请确保你的 Mac 已经安装了 Node.js(推荐 v18 或以上版本)。

你可以通过终端检查:

node -v
npm -v

第一步:从 WordPress 导出 XML 数据

WordPress 自带了数据导出功能,无需复杂的数据库操作:

  1. 登录你的 WordPress 后台。
  2. 导航至左侧菜单:工具 (Tools) -> 导出 (Export)
  3. 选择**“所有内容 (All content)”,点击“下载导出的文件”**。
  4. 你会得到一个 .xml 结尾的文件,这里面包含了你所有的文章、页面和评论等数据。

第二步:将 XML 转换为 Markdown(核心步骤)

为了让 Astro 能够读取,我们需要把刚刚导出的 XML 数据转换为标准的 Markdown (.md) 文件,并且最好能一并处理掉图片资源的下载。

这里我们使用开源社区非常优秀的转换工具:github.comwordpress-export-to-markdowngithub.com

在 macOS 的终端中,执行以下操作:

  1. 新建一个工作目录并进入:

    mkdir wp-migration
    cd wp-migration
  2. 将你刚才下载的 WordPress XML 文件放到这个 wp-migration 目录中。

  3. 运行转换向导: 直接使用 npx 运行该工具,无需全局安装:

    npx wordpress-export-to-markdown
  4. 跟随向导进行配置: 运行后,终端会进入交互式问答,工具会询问你一系列关于转换规则的问题。以下是推荐的配置选项:

    • Path to WordPress export file? (输入你的 xml 文件名)
    • Path to output folder? (直接回车默认即可,通常是 output)
    • Create year folders? (是否按年份建立文件夹,根据个人喜好选 No)
    • Create month folders? (选 No)
    • Create a folder for each post? (强烈建议选 Yes,这样每篇文章一个文件夹,方便管理同级图片资源)
    • Prefix post folders/files with date? (选 No)
    • Save images attached to posts? (Yes,它会自动帮你把文章里的图片下载到本地)
    • Save images scraped from post body content? (Yes)

跑完向导后,脚本会自动解析 XML 并下载图片。最终你会在 output 文件夹中看到所有已经被完美转化为 Markdown 格式的历史文章。

第三步:导入 Astro 项目

Astro 拥有原生的 Content Collections 支持,处理这些 Markdown 文件非常简单。

  1. 在你的 Astro 项目中,找到 src/content/blog/ 目录。
  2. 将上一步生成的包含 .md 文件和对应图片的文件夹,全部原封不动地复制到 src/content/blog/ 下。
  3. 调整 Frontmatter 元数据: 转换工具生成的 Markdown 头部(Frontmatter)可能包含一些你不需要的 WordPress 冗余字段。你可以根据 Astro 中定义的 config.ts 格式,对这些文章的头部进行批量调整。

例如,Astro 规范的 Frontmatter 可能如下:

---
title: "我的第一篇迁移文章"
description: "文章摘要..."
date: '2023-01-01'
tags:
  - 随笔
category: 生活
---

第四步:检查与部署

文章全部迁移进 src/content/blog/ 后,在本地运行 Astro 开发服务器:

npm run dev

打开浏览器,检查所有文章是否正常渲染、图片路径是否正确显示。由于我们选择了“为每篇文章创建单独的文件夹”,图片会被与 Markdown 文件放在同级目录,Astro 在构建时会自动对这些相对路径图片进行优化和处理。

确认无误后,就可以执行 npm run build 部署到你的服务器或托管平台了。

总结

借助于 wordpress-export-to-markdown 这个强大的脚本,从 WordPress 迁移至 Astro 最繁琐的“清洗数据”和“下载图片”环节被彻底自动化了。

彻底告别 PHP 和 MySQL,拥抱纯静态的 Astro 后,本站的加载速度迎来了质的飞跃。希望这篇记录也能给正在考虑迁移博客的你带来一些帮助!

本文作者:春夏
版权声明:若无特殊注明,文章均为本站 【楠格】 原创,并以 《知识共享署名-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》 协议进行许可,转载时请以超链接形式标明文章原始出处和作者信息,否则谢绝转载!

相关文章