About
关于花城
湖南 · 衡阳的前端工程师。喜欢把复杂的东西拆成可以讲清楚的零件,也喜欢把讲清楚的东西写成文章。
这个博客是怎么跑起来的
整站是纯静态的: 写作时打开 /admin 用 TinaCMS 编辑,保存后通过 GitHub API 提交到仓库; Cloudflare Pages 检测到更新就重新构建,把 HTML 直接推到全球 CDN。 访客访问时服务器只负责发送已经生成好的文件,不执行任何查询, 所以既快又几乎零成本。
目前站内有 7 篇文章、12 个标签, 约 6.2k 字。
技术栈
| 层级 | 技术 | 版本 | 说明 |
|---|---|---|---|
| 框架 | Next.js | 16 | App Router · 静态导出 |
| UI 库 | React | 19 | 服务端组件 + 客户端交互 |
| 语言 | TypeScript | 5 | 类型安全的 JavaScript |
| 语法 | JSX / TSX | — | 在 JS 里写 HTML 结构 |
| 样式 | Tailwind CSS | 4 | 原子化 CSS + 自定义主题 |
| 内容管理 | TinaCMS | 3 | 网页后台,保存即提交 GitHub |
| 内容格式 | MDX | — | Markdown 里嵌 React 组件 |
| 代码高亮 | Shiki | 4 | 构建期着色,双主题零运行时 |
| 数学公式 | KaTeX | 0.19 | 构建期渲染,字体按需加载 |
| 评论 | 本机 / 互动服务 / Giscus | — | 默认零配置;全站公开评论需要部署一个可选 Worker |
| 托管 | Cloudflare Pages | — | 全球 CDN,国内速度较好 |
| 视频 | Bilibili iframe | — | 国内可直接播放,免流量 |
能力边界
文章展示
首页列表 + 详情页 + 目录 + 上下篇 + 相关文章
网页后台写作
TinaCMS 编辑器,保存自动推送 GitHub
国内访问速度
Cloudflare CDN + 无外链字体与外链 JS
代码高亮 / 公式
Shiki 双主题 + KaTeX,都在构建期完成
站内搜索
构建期生成索引,支持按时间排序
评论与回复
评论区 + 留言板;回复只有站长能做,写进仓库对所有人生效
浏览量 / 点赞
默认只统计本机;部署自带的 Cloudflare Worker 后是全站数字
视频 / 音乐播放
<BilibiliVideo /> 与侧栏播放器
标签 / 归档
标签页、标签详情、年份归档
列表页配图
cover 当卡片背景;没有封面时展示正文前 4 张图的缩略图带
自定义壁纸
内置预设 + 直传仓库 + 只存本机
站点默认值
存仓库的 JSON,构建期注入,首屏即生效
深浅色主题
跟随系统 + 手动切换,内联脚本防闪屏
图片自动优化
静态导出下 next/image 优化器不可用,见设计文档
精确的阅读量
KV 没有事务,要精确得上 D1
浏览量的防刷
个人博客不做这个投入