简介
TeenyBlog 2.0 是我自己摸索总结出来的一套个人静态博客的解决方案。
这套解决方案的目标是:
- 写博友好:支持 Markdown / 富文本,支持预览,支持复制传图和提供图床,支持 UML 图 / 思维导图
- 读博友好:访问速度快,稳定,界面效果良好,有 TOC 导航
- 维护友好:免维护,一键发布,极高可用率,极低的价格
最大的遗憾是:目前只有博客首页一页,内页仍然跳转到 语雀,有兴趣的同学可以自己开发一下内页,其实非常简单。详见下。
1.0 版本回顾:
https://www.v2ex.com/t/454380
方案简介
- 博主在语雀写博客,语雀支持 Markdown / 富文本,直接预览,复制传图,图床,UML 图 / 思维导图 等功能,提供 TOC,由蚂蚁金服运营。
- 博主触发同步,云函数从语雀 API 拉取数据,并且永久静态存放在 OSS 中( OSS 支持未备案域名)
- 用户访问时,经过 CDN 访问 OSS,提供高速的访问体验 ( CDN 可选)
方案部署详解
- 写博客:在 https://yuque.com/ 注册账号并新建知识库,新建文章后,在知识库首页编辑目录,可以自由控制展示规则。
- 选择一个 OSS 方案,本站使用阿里云的 OSS,选择海外机房不用备案可以直接绑定域名,如果已备案则绑定到 CDN 上
- 选择一个 云函数 方案,本站使用阿里云的函数计算,支持 HTTP 访问 触发,也可以由其他事件触发。
- 选择一个 CDN 方案,本站主站不能备案,所以主页没有使用 CDN,但是静态资源和博文数据可以存放在 可以备案的 CDN 域名上面。本站的静态资源使用 阿里云 CDN
- 上传博客静态页面:https://github.com/xenv/teenyBlog/blob/master/index.html 到 OSS,并且设置为首页
- 修改 title 和 首页数据的 json 等信息
- 静态页面仅供演示,所以__仅有首页,内页跳转到语雀__,有能力的同学完全可以根据 语雀 API 开发内容页等页面
- 能显示博文数据的核心在于:从语雀拉取了博文数据的 json,并且放在 OSS 中,我们的静态页面就可以从 JSON 获取到数据,然后使用 VUE 渲染出来。
- 新建云函数,选择 HTTP 访问触发,我提供一下环境为 Python 3.6 的同步代码:
没有复制过来,在 https://github.com/xenv/teenyBlog
- 开启 CDN,绑定域名到 CDN。不开启 CDN 则绑定域名到 OSS。
- 修改 index.html 中的 vue.min.js 和 list.json 的路径为你的 OSS 路径。
- 更新博文后,访问云函数提供的地址,即可同步语雀数据到 OSS。如果是语雀企业用户,则可以配置 WebHook。
一些截图
首页通过语雀后台完全可定制:
可视化 Markdown 后台:
云函数后台: