Skip to content
This repository has been archived by the owner on Oct 5, 2018. It is now read-only.
/ teenyBlog Public archive

TeenyBlog 2.0 :使用友好、访问极速的个人静态博客解决方案

License

Notifications You must be signed in to change notification settings

xenv/teenyBlog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 

Repository files navigation

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

About

TeenyBlog 2.0 :使用友好、访问极速的个人静态博客解决方案

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages