新博客上线了,就在 cleeate.github.io。这篇记录它是怎么搭起来的,以及上线当天修掉的两个问题。
搭了什么
- AstroPaper 7.1.0 / Astro 7.4.5,Node 24、pnpm,语言 zh-CN、时区 Asia/Shanghai。
- 分仓库:源码在私有仓库
blog-source,构建产物在公开仓库cleeate.github.io。免费版 GitHub Pages 只能从公开仓库发布,源码私有、产物公开是最干净的做法。旧测试站blog-astro(AstroPaper v5)的两篇文章迁了过来,旧仓库没动。 - 部署链:推一次源码库
main,Action 构建后把dist/推到输出库,再由输出库的 Pages 工作流发布。
构建时修的两个问题
- 动态 OG 图被关掉了。 satori 生成中文标题的 OG 图时会挂起构建,改用静态
default-og.jpg。 - RSS 构建报错
MissingLocale。astro.config.ts里把 i18n locales 设为 zh-CN/en、默认 zh-CN 之后通过。
滚动位置 bug:两次修复才确认
上线后发现一个问题:用浏览器前进、后退离开文章页再回来,总是回到文章顶部,而不是之前读到的位置。
原因是文章页里有一段上游主题带过来的代码,在每次页面切换后无条件执行 window.scrollTo(0, 0)。而 Astro 的 ClientRouter 本来会在前进、后退时恢复滚动位置,这段代码把恢复好的位置又覆盖回了顶部。
- 第一版修复:只在前进导航时滚回顶部,后退时不动。部署后实测没起作用。
- 第二版修复:把那段监听整个删掉。
ClientRouter本来就负责这两件事:前进滚到顶部,后退恢复位置,不需要主题再补一段。
但第二版实测一开始也显示失败。最后发现问题在测试方法上:站点头部不是吸顶的,滚到一半时 logo 已经滚出屏幕,要点它得先滚回顶部,而这一滚就把保存的位置改成了 0,回来自然是顶部。换成干净的测法——滚到中间后只按浏览器后退、前进,不点链接也不滚动——位置分毫不差,y=1996,两次都一样。
顺带一个结论:如果你平时是滚回顶部再点导航离开文章,那回来是顶部就是浏览器本身的行为,因为离开那一刻存的就是顶部位置。直接用浏览器前进、后退键,才能回到之前读到的地方。
部署链上的一个坑
输出库的部署用 force_orphan 强制推送,会把整个分支替换掉。第一次推送后,输出库里的 Pages 工作流文件 .github/workflows/pages.yml 被清掉了——部署用的 action 默认排除 .github 目录。这样下次部署就没人触发 Pages 发布,网站会停在旧版本。
修复办法:源码库里留一份 .github/pages-output.yml 做源头,部署时拷进 dist/.github/workflows/pages.yml,并把 exclude_assets 设为空,让 .github 能一起推过去。
收尾
排查滚动问题时临时加过一个调试框(左下角绿字,实时显示滚动位置和路由方向),确认结论后已经从源码里删掉。这篇就是新博客的第一篇原创文章。