Skip to content
This repository has been archived by the owner. It is now read-only.
TeenyBlog 2.0 :使用友好、访问极速的个人静态博客解决方案
HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE v1 May 12, 2018
README.md update README Oct 5, 2018
index.html update index Jul 18, 2018

README.md

TeenyBlog 2.0

新动向

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

简介

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

这套解决方案的目标是:

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

方案简介

  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 的同步代码:
       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
    
       ```
  7. 开启CDN,绑定域名到CDN。不开启CDN则绑定域名到OSS。
  8. 修改 index.html 中的 vue.min.js 和 list.json 的路径为你的 OSS 路径。
  9. 更新博文后,访问云函数提供的地址,即可同步语雀数据到 OSS。如果是语雀企业用户,则可以配置 WebHook。

图片演示

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

image.png | left | 690x314

可视化 Markdown 后台

image.png | left | 690x137

云函数后台

image.png | left | 690x635

You can’t perform that action at this time.