博客项目复盘与常用指令

这次做了什么

本次主要完成了博客视觉升级、小猫挂件重做、Git 推送，以及 Cloudflare Pages 自动部署配置修复。

主要改动：

  • 将原来写在 BaseLayout.astro 里的小猫挂件拆成独立组件：
    • src/components/CatPet.astro
  • 重做小猫外观和交互：
    • 更圆润的脸、尾巴、围巾、斑纹、腮红、阴影
    • 保留拖拽、走动、点击说话、眼睛跟随鼠标
    • 增加 prefers-reduced-motion 支持
  • 优化博客整体视觉：
    • 全局配色从高糖粉紫改成奶白、珊瑚粉、薄荷绿、深色正文
    • 导航改成更克制的胶囊样式
    • 卡片阴影和边框更轻
  • 重排首页：
    • 左侧博客介绍
    • 右侧纸卡猫脸视觉
    • 最新文章改成“首篇精选 + 文章列表”
  • 修复 Cloudflare Pages 部署方式：
    • 删除旧的 Direct Upload 项目
    • 新建 GitHub 绑定的 Pages 项目
    • 绑定 GitHub 仓库
    • 配置自动部署

学到的事情

1. Cloudflare Pages 的 Direct Upload 不能直接改成 Git 绑定

旧项目显示：

Git Provider: No

这说明它是 Direct Upload / Wrangler 上传模式。

这种项目不会因为 git push 自动部署。即使 GitHub 已经推送成功，Cloudflare 页面也不会更新。

解决方法是：

  1. 删除旧 Direct Upload 项目。
  2. 新建 GitHub 绑定的 Pages 项目。
  3. 设置构建命令和输出目录。
  4. 再 push 一次触发自动部署。

2. GitHub App 授权要选对仓库

Cloudflare Pages 绑定 GitHub 时，需要安装或配置：

Cloudflare Workers and Pages GitHub App

仓库权限建议选择：

Only select repositories
你的 GitHub 用户名/仓库名

否则 Cloudflare 可能看不到目标仓库。

3. 新建 GitHub 绑定项目后，旧 commit 不会自动回放

这次新 Pages 项目是在某个旧 commit 推送之后创建的，所以 Cloudflare 不会自动部署那个旧 commit。

因此创建了一个空提交来触发首次自动构建：

<commit-hash> Trigger Cloudflare Pages deployment

4. PowerShell 的 conda 报错来自 profile

每次命令结束看到的噪音来自：

C:\Users\<用户名>\Documents\WindowsPowerShell\profile.ps1

里面有旧路径：

(& "D:\path\to\anaconda\Scripts\conda.exe" "shell.powershell" "hook") | Out-String | Invoke-Expression

如果这个 conda 路径已经不存在，就会报错。

可以以后改成：

$condaPath = "D:\path\to\anaconda\Scripts\conda.exe"
if (Test-Path $condaPath) {
  (& $condaPath "shell.powershell" "hook") | Out-String | Invoke-Expression
}

或者直接注释掉 conda 初始化行。

常用本地开发指令

进入项目：

cd E:\path\to\your-blog-project

启动开发服务器：

npm run dev

本地访问：

http://localhost:4321

构建静态文件：

npm run build

预览构建结果：

npm run preview

Git 常用指令

查看当前状态：

git status

查看改动摘要：

git diff --stat

暂存改动：

git add .

提交改动：

git commit -m "你的提交信息"

推送到 GitHub：

git push origin main

创建空提交，用于触发 Cloudflare 自动部署：

git commit --allow-empty -m "Trigger Cloudflare Pages deployment"
git push origin main

Cloudflare Pages 当前配置

项目名：

your-pages-project

线上地址：

https://your-pages-project.pages.dev

GitHub 仓库：

你的 GitHub 用户名/仓库名

生产分支：

main

构建命令：

npm run build

输出目录：

dist

Root directory：

留空

现在配置已经是：

Git Provider: Yes

以后只要推送到 main，Cloudflare Pages 会自动构建部署。

Wrangler 相关指令

查看 Pages 项目列表：

npx wrangler pages project list

查看某个 Pages 项目的部署记录：

npx wrangler pages deployment list --project-name your-pages-project

手动部署当前 dist：

npx wrangler pages deploy dist --project-name your-pages-project

注意：现在已经绑定 GitHub，正常情况下不需要再手动部署。

删除 Pages 项目：

npx wrangler pages project delete your-pages-project --yes

慎用这个命令，会直接删除 Cloudflare Pages 项目。

本次关键提交

视觉升级提交：

<commit-hash> Polish blog design and cat pet

触发 Cloudflare 自动部署的空提交：

<commit-hash> Trigger Cloudflare Pages deployment

后续建议

  • 如果继续美化，可以下一步处理文章列表页、标签页、搜索页和关于页，让它们跟首页的新风格更统一。
  • 可以把重复的文章卡片样式抽成组件，减少页面之间的 CSS 重复。
  • 可以更新 README，补上 Cloudflare Pages GitHub 自动部署流程。
  • 如果不再使用手动部署，可以保留 Wrangler 作为排查工具，但日常只用 git push origin main 即可。