从 Hugo 站点迁移到 Astro,并部署到 Cloudflare Pages
背景
原站点 blog.543083.xyz 是 Hugo 生成的静态站点(主题是 hugo-theme-stack)。这次目标是:
- 用 Astro 作为新博客项目(更易维护)
- 历史文章 正文 + 图片 尽量完整迁移
- 部署到 Cloudflare Pages
迁移思路(内容与代码分离)
- 文章统一使用 Markdown 管理:
src/content/blog/*.md - 图片统一落到仓库里:
public/images/<slug>/... - 页面渲染交给 Astro(静态输出)
这样后续维护就是:改 Markdown / 放图片 / 提交部署。
抓取与导入(RSS → 逐篇解析 → HTML 转 Markdown → 图片下载)
实现了一个导入脚本:
- 从 RSS 读取文章列表:
/index.xml - 拉取文章页面,提取
.article-content - HTML 转 Markdown
- 下载图片到
public/images/<slug>/...并替换引用
(脚本文件:scripts/import-543083.mjs)
构建与部署(Wrangler)
本地构建:
npm run build
通过 Wrangler 部署到 Cloudflare Pages:
wrangler pages project create <project-name>
wrangler pages deploy dist --project-name <project-name>
本次项目名:hottest。
绑定自定义域名
Cloudflare Pages 会给出一个 *.pages.dev 的默认域名。自定义域名需要:
- 在 Pages 项目里添加 domain
- 同时在 DNS 里设置一条 CNAME 指向
xxx.pages.dev
当 CNAME 生效并通过验证后,HTTPS 证书会自动签发。
备注:这篇文章主要是留一个“以后再做一遍也能照着走”的记录。后续如果主题/样式继续优化,也会在这里追加。