TeenyBlog 2.0 ：使用友好，访问极速的个人 静态博客 解决方案 ，基于 语雀 + OSS + 云函数 + CDN

简介

TeenyBlog 2.0 是我自己摸索总结出来的一套个人静态博客的解决方案。

这套解决方案的目标是：

1. 写博友好：支持 Markdown / 富文本，支持预览，支持复制传图和提供图床，支持 UML 图 / 思维导图
2. 读博友好：访问速度快，稳定，界面效果良好，有 TOC 导航
3. 维护友好：免维护，一键发布，极高可用率，极低的价格

最大的遗憾是：目前只有博客首页一页，内页仍然跳转到 语雀，有兴趣的同学可以自己开发一下内页，其实非常简单。详见下。

• 演示： https://luan.ma
• 项目地址：https://github.com/xenv/teenyBlog

方案简介

1. 博主在语雀写博客，语雀支持 Markdown / 富文本，直接预览，复制传图，图床，UML 图 / 思维导图 等功能，提供 TOC，由蚂蚁金服运营。
2. 博主触发同步，云函数从语雀 API 拉取数据，并且永久静态存放在 OSS 中（ OSS 支持未备案域名）
3. 用户访问时，经过 CDN 访问 OSS，提供高速的访问体验 （ CDN 可选）

方案部署详解

1. 写博客：在 https://yuque.com/ 注册账号并新建知识库，新建文章后，在知识库首页编辑目录，可以自由控制展示规则。
2. 选择一个 OSS 方案，本站使用阿里云的 OSS，选择海外机房不用备案可以直接绑定域名，如果已备案则绑定到 CDN 上
3. 选择一个 云函数 方案，本站使用阿里云的函数计算，支持 HTTP 访问 触发，也可以由其他事件触发。
4. 选择一个 CDN 方案，本站主站不能备案，所以主页没有使用 CDN，但是静态资源和博文数据可以存放在 可以备案的 CDN 域名上面。本站的静态资源使用 阿里云 CDN
5. 上传博客静态页面：https://github.com/xenv/teenyBlog/blob/master/index.html 到 OSS，并且设置为首页
   1. 修改 title 和 首页数据的 json 等信息
   2. 静态页面仅供演示，所以__仅有首页，内页跳转到语雀__，有能力的同学完全可以根据 语雀 API 开发内容页等页面
   3. 能显示博文数据的核心在于：从语雀拉取了博文数据的 json，并且放在 OSS 中，我们的静态页面就可以从 JSON 获取到数据，然后使用 VUE 渲染出来。
6. 新建云函数，选择 HTTP 访问触发，我提供一下环境为 Python 3.6 的同步代码： 没有复制过来，在 https://github.com/xenv/teenyBlog
7. 开启 CDN，绑定域名到 CDN。不开启 CDN 则绑定域名到 OSS。
8. 修改 index.html 中的 vue.min.js 和 list.json 的路径为你的 OSS 路径。
9. 更新博文后，访问云函数提供的地址，即可同步语雀数据到 OSS。如果是语雀企业用户，则可以配置 WebHook。

一些截图

首页通过语雀后台完全可定制：

可视化 Markdown 后台：

云函数后台：