Tech Jekyll Cloudflare

Jekyll + Cloudflare + Telegram 博客系统上线了!

calendar_month 2026年07月31日 person ZGQ schedule 约 1 分钟阅读

为什么做这个?

一直想要一个真正「属于自己」的博客,不依赖任何第三方平台,数据完全掌控在手里。同时,作为一个重度 Telegram 用户,希望能在 TG 频道里也能看到博客更新,甚至直接在 Telegram 里发文章。

于是就有了这套系统。

技术架构

前端

  • Jekyll:静态网站生成器,Markdown 写作,Git 管理
  • Material Design 3:Google 最新设计规范,完整 Monet 色彩系统
  • Glassmorphism:毛玻璃效果侧边栏 + 顶部导航
  • Cloudflare Pages:全球 CDN 托管,秒级部署

后端

  • Cloudflare Worker:TypeScript 编写,处理所有 API 请求
  • Cloudflare D1:SQLite 兼容的 Serverless 数据库,存储文章与 TG 消息的映射
  • Cloudflare R2:对象存储,保存 Telegram 上传的媒体文件

自动化

1
2
3
4
5
6
# 发布流程 (Git Push → Telegram)
Push to GitHub
  → GitHub Actions: Jekyll Build
  → Cloudflare Pages: 静态部署
  → Worker /api/notify: 推送 TG 频道
  → D1: 记录 post_id ↔ message_id

双向发布工作流

方式一:VS Code + Git Push(标准流程)

  1. _posts/ 目录下创建 Markdown 文件
  2. Front Matter 填写 id, summary, tags
  3. git push 触发 GitHub Actions
  4. Actions 自动部署 + 推送 TG 摘要

方式二:Telegram Bot 直发

1
/post 2026-002|文章标题|这是摘要|Tag1,Tag2

Bot 会自动:

  • 如果附带图片/文件 → 上传到 R2
  • 生成 Markdown 文件 → 提交到 GitHub
  • 推送摘要到 TG 频道
  • 写入 D1 数据库

主题系统

支持 6 种 Monet 色彩方案 + 亮/暗/跟随系统三种模式:

方案 主色
🔵 海洋蓝 #0061A4
💜 紫色梦境 #6750A4
🌿 森林绿意 #006E2C
🍊 秋日橙光 #9D4000
🌹 玫瑰红 #B3261E
🩵 青色清风 #006A6A

点击右上角调色板图标即可切换,设置持久化到 localStorage。

接下来

  • 搜索功能优化(algolia 或 pagefind)
  • 文章阅读量统计(D1 + Worker)
  • 更多 Telegram Bot 指令
  • RSS to TG 频道自动转发

欢迎在 Telegram 频道留言交流!

share 分享到 Telegram

前往 Telegram 频道参与讨论

在频道帖子下评论,与其他读者互动

open_in_new 打开

chat_bubble 评论