CNB博客 - 让分享更简单 🚀 人人有好博！

基于CNB Issues API构建的现代化静态博客系统，使用Next.js 15、React 19、TypeScript和Tailwind CSS开发。

• 静态生成: 使用Next.js静态站点生成(SSG)，确保极速加载
• 现代化UI: 基于Tailwind CSS和shadcn/ui组件库的响应式设计
• 深色模式: 支持明暗主题自动切换
• TypeScript: 完整的类型安全支持
• SEO优化: 完整的元数据、sitemap和结构化数据
• PWA支持: 包含Web App Manifest
• API集成: 与CNB Issues API无缝集成
• Markdown增强: 支持代码高亮、数学公式、目录导航
• 部署就绪: 支持Cloudflare Pages、EdgeOne Pages等所有静态部署平台

• 拖放式上传图片及文件，复制的图片可以直接粘贴到输入区域（包括评论中），使用体验好
• 关注CNB公众号后，ISSUE评论回复会有在微信服务号中得到通知，交流互动及时
• CNB=国内版Github,永久免费不是吹
• CNB API相当完善，你自己用AI写一个静态网站也可以
• 你直接拿CNB ISSUE系统来做博客做记录就可以，但静态网站部署后，利于SEO，便于你的内容被搜索引擎收录
• 写博客做记录有很多好处，用CNB能以最简便的方式让你写博客，获取写博客的好处

• 完成喂饭级部署教程（edgeone篇）：- []
• 完成分类及标签页面：- []
• 增加按钮触发构建：- [x] 完成
• 增加ISSUE触发构建：- []
• 增加外部发布ISSUE功能：- []
• 指定用户来构建静态网站，防止无关issue写入静态网站中：- []
• 接入AI API：- []
• 完成喂饭级部署教程（firebase、cf pages、vercel、github篇）：- []
• 更好的前端主题样式：- []

• fork为自己的仓库，创建一篇issue

• 点击橙色的云原生开发进行后台，等待一会打开弹出通知的网址即可查看网站了。

• 这是直接拿issue作为记录的平台，开箱即用！以下构建为静态博客网站为可选项。

• 有问请查看 aii.mobi/blog#2

先Fork我这个仓库，然后根据以下的步骤来操作，不难的。

1. 用邮箱注册EdgeOne，网址

2. 来创建一个page项目:

在这里新建 https://console.tencentcloud.com/edgeone/pages

点击选择“直接上传”的方式。

进入部署页面，加整区域根据你的需求来选择。

之后点击示例模板，随便选一个，之后左上角修改项目名称为：“cnb-issue-sites”。

之后点击开始部署。

4. 获取API token

创建复制即可。

5. 之后在cnb中新建一个密码仓库，增加一个文件，名称为：'envs.yml'

内容为：

# envs.yml
# 获取网址：https://console.tencentcloud.com/edgeone/pages?tab=api
EDGEONE_PAGES_API_TOKEN: <your_api_token你刚才复制的api token>

6. 之后复制这个文件的网址：

7.回到你fork的这个仓库，点击打开 .cnb.yml文件，粘贴刚才复制的网址。

之后保存提交即可。

• 可定时进行构建静态博客；
• 你修改了仓库文件 push后也会自动构建；
• 可以点击仓库页面中指定按钮来构建（进行中）；
• 新建一个issue后也会自动构建（进行中）；

cnb-static-blog/
├── app/                    # Next.js App Router页面
│   ├── layout.tsx         # 根布局
│   ├── page.tsx           # 首页
│   ├── about/             # 关于页面
│   └── posts/             # 文章相关页面
├── components/            # React组件
│   ├── ui/               # 基础UI组件
│   ├── header.tsx        # 头部导航
│   ├── footer.tsx        # 页脚
│   └── ...               # 其他组件
├── lib/                  # 工具库
│   ├── api.ts           # API集成
│   ├── markdown.ts      # Markdown渲染增强
│   └── utils.ts         # 工具函数
├── types/               # TypeScript类型定义
├── public/              # 静态资源
├── .github/workflows/   # GitHub Actions
└── scripts/             # 构建脚本

• Next.js 15: React全栈框架，支持App Router
• React 19: 用户界面库
• TypeScript: 类型安全的JavaScript

• Tailwind CSS: 实用优先的CSS框架
• shadcn/ui: 高质量的React组件库
• Radix UI: 无障碍的UI原语
• Lucide React: 现代图标库

• marked: 高性能Markdown解析器
• Prism.js: 代码语法高亮(支持20+语言)
• KaTeX: 数学公式渲染
• marked-highlight: Markdown代码高亮集成

• ESLint: 代码质量检查
• PostCSS: CSS处理工具
• Autoprefixer: CSS前缀自动添加

• Cloudflare Pages: 边缘计算静态托管
• EdgeOne Pages: 腾讯云边缘托管

• Node.js 20+
• pnpm

pnpm install

创建 .env.local 文件：

BASE_URL=https://api.cnb.cool
REPO=cnb.ai/testblog
AUTH_TOKEN=your_auth_token_here
NEXT_PUBLIC_SITE_URL=https://your-domain.com

pnpm run dev

pnpm run build

pnpm run build:static

pnpm run preview

项目集成了CNB Issues API，将GitHub Issues作为内容管理系统：

• 文章列表: 获取所有开放的Issues作为博客文章
• 文章详情: 获取单个Issue的详细内容
• 评论系统: 支持Issue评论作为文章评论
• 标签系统: 使用Issue标签进行文章分类

• 动态生成页面标题和描述
• Open Graph标签支持
• Twitter Card支持
• 结构化数据(JSON-LD)

• 静态生成确保快速加载
• 图片优化和懒加载
• CSS和JavaScript压缩
• CDN加速

支持20+编程语言的语法高亮：

• JavaScript/TypeScript
• Python, Java, C++, C#
• HTML, CSS, JSON, YAML
• Shell, SQL, Docker
• 等等...

使用KaTeX渲染数学公式：

行内公式：$E = mc^2$
块级公式：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

• 自动生成文章目录
• 桌面端侧边栏显示
• 移动端可折叠显示
• 滚动高亮当前章节
• 平滑滚动导航

请按需修改blog.config.js文件：

# JSON配置文件 (blog.config.json)
{
  "site": {
    "title": "CNB技术博客",
    "description": "分享前沿技术，探索创新思维"
  }
}

此文件位置为/workspace/blog.config.json，在项目根目录下。

• 站点信息: 标题、描述、作者、联系方式
• 内容设置: 分页、摘要、显示选项
• Markdown渲染: 代码高亮、数学公式、目录导航
• 主题外观: 颜色、字体、布局样式
• 功能开关: PWA、RSS、社交分享等
• SEO设置: 站点地图、结构化数据、社交标签

项目包含完整的PWA配置：

• Web App Manifest
• 服务工作者(可选)
• 离线支持(可选)

本项目采用MIT许可证

如果您遇到问题或有建议，请：

1. 查看Issues
2. 创建新的Issue
3. 联系维护者

• Next.js文档
• Tailwind CSS文档
• shadcn/ui文档
• CNB API文档