选择 Notion 搭建博客，其实是出于一种平衡：
我希望写作流程尽可能轻便、界面美观、内容管理足够灵活，同时也不想花太多时间在复杂的前端框架上打转。Notion 配合静态生成工具（比如 Astro 或 Super），看起来是一个理想解。
Notion 在写作体验上的流畅感，让我坚持更新比以往任何一次都久；我也逐步建立起自己的知识分类体系，内容架构越来越清晰。这更像是一种“写给未来的准备”，而不是急功近利的内容发布。
从哪买域名？
看了很多方案，最终购买地点：阿里云买了.Top 只需要188元10年，对比下来最有性价比
域名注册_域名查询_域名申请_域名购买_域名续费_国际域名-万网-阿里云品牌
还看到另外一个日本的也比较便宜：
Com域名5年到手仅需144！首年免费，续费仅需36元每年
首年免费，之后一年仅需750日元，4年+1年免费的只需3000日元（143元人民币）
从哪插入谷歌分析？
Vercel—>Setting—>Environment—>Variables
需要配置如下变量：
NEXT_PUBLIC_ANALYTICS_GOOGLE_ID:G-6************7
SEO_GOOGLE_SITE_VERIFICATION:G-6************7
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9669713886681501"
crossorigin="anonymous"></script>Vercel CLI 全局命令的使用
- 确保安装
Node.js - 下载并安装适用于操作系统的
Node.js和 npm：https://nodejs.org/ - 确认安装成功，可以通过在终端运行
node -v和npm -v命令来检查版本号。
我不是很推荐安装特别新的版本，因为可能会导致一些不兼容，18.20.8 LTS 是我安装的，TS 是稳定版本的缩写，代表 Long Term Support。Node.js® 的 LTS 版本提供长期的维护和支持，通常包含重要的安全更新和关键修复，但不会引入新的功能。LTS 版本适合需要长期稳定运行的 Node.js 应用程序。
重新安装Vercel CLI
如果换到另一台电脑上工作，需要重新安装Vercel CLI。Vercel CLI是一个全局工具，需要在使用它的每台计算机上单独安装。
从您的终端输出可以看到，您之前尝试运行vercel --version命令时收到了错误消息，表明Vercel CLI尚未安装。然后您成功运行了npm install -g vercel命令来安装它，安装完成后您能够使用vercel命令进行部署。
执行以下步骤：
- 确保新电脑上已安装Node.js和npm
- 运行
npm install -g vercel命令安装Vercel CLI - 运行
vercel login命令登录您的Vercel账户 - 然后您就可以使用
vercel命令部署您的项目了
安装完成后，您可以使用vercel --version命令验证安装是否成功。如果您想直接部署到生产环境，可以使用vercel --prod命令。
需要注意的是，Vercel CLI的安装是全局的（使用了-g标志），这意味着它会在您的用户目录下安装，而不是在项目目录中。这就是为什么您需要在每台新电脑上重新安装它。
Github后台的设置
感谢Kindly给我的思路，部署notion的一些后台设置
到这里我以为设置完了，但其实还没有，需要在vercel项目的设置里，同样创建hook，填入main后点create
👇生成后有个网址，打开后返回内容：
✅ 返回内容解释
{
"job": {
"id": "XXXXXXXXXX",
"state": "PENDING",
"createdAt": 1750521279829
}
}
| 字段 | 含义 |
id | 本次部署任务的唯一 ID |
state | 当前部署状态，PENDING 表示已排队准备部署 |
createdAt | 创建时间（Unix 时间戳） |
🔄 部署后续会发生什么？
才点击打开这个 URL，就相当于“远程点了一下 Deploy 按钮”，Vercel 会立即开始重新构建并部署你的项目。
👉 去 Vercel 项目后台 → Deployments 页面
查看状态：
📌 用法建议
你已经有这个 Deploy Hook 网址，以后可以：
✅ 方式一：手动触发部署
- 在浏览器里打开这个链接就能重新部署
✅ 方式二：自动触发（推荐）
- Notion 更新后自动调用：可以用 Zapier 或 IFTTT 来实现「当 Notion 新增页面 → 调用这个 Hook」
- 本地写脚本触发：比如加一个
deploy.sh脚本自动 POST 请求这个 URL
Astro + Notion 博客的 SEO Checklist，
既包括基础配置，也包括进阶优化。也方便每次发布新文章或优化站点时快速检查 ✅
🌱 基础 SEO Checklist（发布就该具备）
| ✅ | 项目 | 说明 |
| ☐ | 设置 sitemap.xml | ✅ 已经完成了，并自动更新。 |
| ☐ | 提交 sitemap 到 Google Search Console | ✅ 已完成 |
| ☐ | 设置 robots.txt | 推荐写清楚允许抓取 + 指定 sitemap 地址 |
| ☐ | 设置 meta title 和 meta description | 每篇文章有独立的标题和描述，提升点击率 |
| ☐ | 使用干净、简洁的 URL（slug） | ✅ 比如 /posts/game-design 好于 /12345?id=1 |
| ☐ | 所有页面都能在桌面+移动设备上良好展示 | 移动端体验很重要，Google 优先抓移动版本 |
| ☐ | 网站加载速度优化（图片压缩、懒加载） | 可测试：PageSpeed Insights |
robots.txt 的设置：
创建并提交 robots.txt 文件 | Google 搜索中心 | Documentation | Google for Developers
📈 进阶优化 Checklist（加分项）
| ✅ | 项目 | 说明 |
| ☐ | 设置 Open Graph + Twitter Card 元标签 | 分享到微信/微博/朋友圈等时显示封面 + 摘要 |
| ☐ | 自定义 404 页面 | 用一点设计感提示用户“页面不见了”，别冷冰冰 |
| ☐ | 使用语义化标签（如 <article> <header>） | Astro 模板一般自带语义结构，利于搜索引擎 |
| ☐ | 加入 Google Analytics 或其他统计工具 | 你可以看到访问数据、用户路径、点击来源等 |
| ☐ | 每篇文章添加 tag 或分类结构 | 帮助构建主题权重，提升相关性推荐 |
| ☐ | 增加内链（相关内容推荐） | 比如“你可能还喜欢”放其他文章链接 |
| ☐ | 每篇文章页有分享按钮 | 鼓励用户转发（你还可以加上打赏按钮 🍉） |
| ☐ | 网站有 favicon + manifest | 浏览器标签页更专业，也支持添加到手机主屏幕 |
| ☐ | 网站支持 RSS | 虽然冷门了，但对少部分读者或自动订阅很重要 |
🧠 内容优化建议
| ✅ | 项目 | 说明 |
| ☐ | 每篇文章标题里包含关键词 | 关键词前置+通俗易懂，帮助搜索引擎识别主题 |
| ☐ | 正文自然包含关键词 | 不要堆砌关键词，但要有逻辑地融入核心词汇 |
| ☐ | 文章有清晰的结构（小标题、列表） | 结构清晰利于用户阅读，也提升搜索评分 |
| ☐ | 文章有首图或封面图 | 有视觉吸引力，分享时更美观 |
| ☐ | 每篇文章有结尾 Call to Action（CTA） | 比如：留言评论、分享给朋友、订阅等 |
🧰 工具推荐
| 类型 | 工具 | 用途 |
| SEO 检查 | Ahrefs Webmaster Tools | ✅免费查死链、SEO建议 实测确实能看到不少问题 |
| 网站测速 | PageSpeed Insights | 检测网站加载速度问题 |
| 标签生成 | metatags.io | 生成 Meta/OpenGraph 标签并预览 |
| Robots 检查 | robots.txt Tester | 测试 robots 文件是否正确 |
博客本地测试用例 & 流程模板
准备
- 确认
.env里有正确的NOTION_API_SECRET和DATABASE_ID - 本地执行：
npm run build
npm run preview
build 生成静态文件，preview 本地起个静态服务器预览
1. 首页内容显示
- 打开首页（通常是
http://localhost:3000或你的本地预览地址） - 确认首页文章列表是否正常显示，文章标题、摘要、封面图加载正常
- 观察首页是否有明显的样式错乱
2. 首页 Tag 显示
- 首页是否正确显示 Tag 分类列表
- 点击不同 Tag，确认跳转到对应的 Tag 页面，文章列表正确过滤
3. 响应式测试
- 在浏览器切换不同屏幕尺寸（桌面、平板、手机）
- 检查页面布局是否自适应，元素没有重叠或溢出
- 交互按钮（分享、点赞）在不同尺寸下正常可用
4. Tag 页面分页和跳转
- 点击任意 Tag，确认页面跳转并显示该 Tag 下文章
- 如果文章数超过分页限制（比如 10 篇），测试分页按钮是否工作正常，内容正确切换
5. Notion文章漏写slug导致错误检测
- 人为制造一个测试文章，在 Notion 中故意删除或留空 slug
- 本地 build 时是否报错
- 访问该文章对应页面时，页面是否正确显示错误或跳转（避免白屏）
6. 日志列表页图片是否丢失
- 首页文章封面图和列表页缩略图是否全部正常加载
- 文章内容页内嵌的图片是否显示正常，没出现断链
7. 日志子页面字段显示正确性
- 进入任意一篇日志详情页
- 标题、日期、标签、内容、封面图是否正确展示
- 交互按钮（分享、点赞）功能是否正常
- 页脚上一篇/下一篇文章链接是否有效
额外推荐
- 错误捕获日志：留意终端是否有构建或运行时错误
- 网络请求：用浏览器开发者工具检查是否有资源请求失败
- SEO 预览：查看 meta 标签是否正确渲染
测试工具建议
- 用 Chrome DevTools 手动测试响应式
- 用 Postman 或 curl 测试某些接口（如果有）
- 将构建好的
dist部署到临时环境验证线上表现（Vercel Preview 环境） - 用 GitHub Action 集成简单的构建和部署自动化
考虑写一个简单的测试脚本（比如用 Puppeteer 或 Playwright 自动化浏览器跑一遍核心页面测试），适合后续持续集成用。
写自动化测试脚本的基础模板，或者搭建 GitHub Action 自动跑这些测试