tags: []
categories: [项目]

新动向

由于已经有了足够好用的语雀到静态博客的同步插件，该项目已废弃，新的部署方法见：https://luan.ma/post/yuque2blog/，可以非常优雅的同步语雀文章到静态博客了。

简介

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 的同步代码：

   1. ```python import json import oss2 import logging import requests

config

yuque_auth_token = ‘YXDQoZMhHxNw1zJ+bIRZCL5KVOOlj1OD’ # 语雀后台取得，可选 yuque_path = “page/luan.ma” # 语雀的用户号/仓库号

aliyun_auth_access_key = ‘LTAITMKYkxY’ # https://ram.console.aliyun.com/ 新建账号并授权 OSS 权限 aliyun_auth_access_secret = ‘TbiZpQRPuDGE68IT’

aliyun_oss_endpoint = ‘oss-cn-shenzhen-internal.aliyuncs.com’ # OSS 区域：https://help.aliyun.com/document_detail/31837.html aliyun_oss_bucket = ‘nazhumi-static’ # OSS Bucket 名 aliyun_oss_path = “luanma/list.json” # OSS 博文数据路径

The main function

def handler(environ, start_response): logger = logging.getLogger() logger.info(‘start sync work’)

endpoint = aliyun_oss_endpoint
auth = oss2.Auth(aliyun_auth_access_key, aliyun_auth_access_secret)
bucket = oss2.Bucket(auth, endpoint, aliyun_oss_bucket)
url = 'https://yuque.com/api/v2/repos/' + yuque_path + '/toc'
try:
    main_html = get_data(url)
    main_json = json.loads(main_html)
    for item in main_json["data"]:
        if len(item["slug"]) > 1 and "://" not in item["slug"]:
            item_html = get_data("https://yuque.com/api/v2/repos/" + yuque_path + "/docs/" + item["slug"])
            item_date = json.loads(item_html)["data"]["updated_at"]
            item["date"] = item_date.split("T")[0]
    bucket.put_object(aliyun_oss_path, json.dumps(main_json))
    response_body = {
        'status': 'success'
    }
except Exception as e:
    response_body = {
        'status': 'fail'
    }
status = '200 OK'
response_headers = [('Content-type', 'text/json')]
start_response(status, response_headers)
return [json.dumps(response_body).encode()]

get url of content

def get_data(url): headers = { ‘User-agent’: ‘aliFunction/0.01’, ‘Content-Type’: ‘application/x-www-form-urlencoded’, ‘X-Auth-Token’: yuque_auth_token } html = requests.get(url, headers=headers).content

return html

```

1. 开启CDN，绑定域名到CDN。不开启CDN则绑定域名到OSS。

2. 修改 index.html 中的 vue.min.js 和 list.json 的路径为你的 OSS 路径。

3. 更新博文后，访问云函数提供的地址，即可同步语雀数据到 OSS。如果是语雀企业用户，则可以配置 WebHook。

图片演示

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

可视化 Markdown 后台

云函数后台