跳到正文
花城
花城

About

关于花城

湖南 · 衡阳的前端工程师。喜欢把复杂的东西拆成可以讲清楚的零件,也喜欢把讲清楚的东西写成文章。

这个博客是怎么跑起来的

整站是纯静态的: 写作时打开 /admin 用 TinaCMS 编辑,保存后通过 GitHub API 提交到仓库; Cloudflare Pages 检测到更新就重新构建,把 HTML 直接推到全球 CDN。 访客访问时服务器只负责发送已经生成好的文件,不执行任何查询, 所以既快又几乎零成本。

目前站内有 7 篇文章、12 个标签, 约 6.2k 字。

技术栈

层级技术版本说明
框架Next.js16App Router · 静态导出
UI 库React19服务端组件 + 客户端交互
语言TypeScript5类型安全的 JavaScript
语法JSX / TSX—在 JS 里写 HTML 结构
样式Tailwind CSS4原子化 CSS + 自定义主题
内容管理TinaCMS3网页后台,保存即提交 GitHub
内容格式MDX—Markdown 里嵌 React 组件
代码高亮Shiki4构建期着色,双主题零运行时
数学公式KaTeX0.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

  • 浏览量的防刷

    个人博客不做这个投入

联系我