V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xcold
V2EX  ›  推广

使用语雀打造你的自定义博客

  •  
  •   xcold · 2018-12-15 13:01:22 +08:00 · 8846 次点击
    这是一个创建于 2154 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    过去我总是以用什么工具来写文档(文章)而纠结,直到遇见了语雀

    yuque-blog 是最近这几个周末用业余时间设计和实现的一个博客系统,核心目标是:“在语雀上(和你的小伙伴一起)编辑文章,在自己的网站上展示文章”。它基于语雀,实现了博客内容页面的自定义输出,支持同构直出、离线访问等特性;技术架构上,我选用了 beidou (基于 eggjs 的同构框架) 作为后端框架,前端框架采取了常见的 React 全家(半)桶。

    yuque-hexo 是用于下载语雀的文章到 hexo 的文章目录下的一款命令行工具。

    调研阶段

    常见的博客平台根据其形态大致分为以下几类:

    • 无后台(静态部署)
      • 静态页面 + 静态内容
      • 静态页面 + 动态内容管理
    • 有后台

    一般来说,在服务器资源允许的条件下,有后台的博客系统(基于 PHP 的 WordPress,使用 Node.js 的 Ghost )是比较普遍的方案,通常情况都会提供一个内容管理的后台管理页面,让写者集中在写作本身,没有太多额外的(技术性)操作;下面可以在几方面稍微对比一下,不同方案下的优劣;

    <colgroup> <col width="auto"> <col width="auto"> <col width="auto"> <col width="auto"> </colgroup>
    完全静态
    静态页面+第三方内容管理
    完全动态
    经典案例
    GIthub Pages ( Hexo / Hugo )
    Github Pages + Github Issue
    Github Pages + Serverless
    WordPress / Ghost / Calypso / Typecho
    内容管理
    +
    ++
    +++
    团队协作
    ++
    +++
    +++
    文章编辑
    +
    ++
    +++
    RSS 订阅
    +++
    +++
    +++
    可扩展性
    +
    ++
    +++
    社会化生态
    +++
    +++
    +++
    首屏加载
    +++
    +
    ++
    缓存加载
    ++
    +++
    ++
    SEO
    +++
    +
    +++
    性能
    +++
    ++
    +
    环境简易程度
    +++(静态文件服务器)
    ++(静态文件服务器+第三方内容管理系统)
    +(独立部署的 HTTP 服务)

    灵光乍现

    语雀是一款拥有非常优秀的编辑 / 阅读体验,支持团队协作的知识创作平台; TXD 团队博客包含前端、视觉、交互同学积累的精华文章,由于成员背景原因(设计写代码???),方案 1 和 方案 2 显然不是最佳的选择(设计师的学习成本和内容维护难易度),加上团队里面日常工作中使用语雀来编辑文档和知识仓库梳理,为了降低写作者的学习成本,以及提供良好的编辑体验,决定基于语雀去开发一套完全动态的博客系统。

    其中实现的主要的特性如下:

    • 优秀的文档编辑和管理体验( Powered by 语雀)
    • 极速输出博客页面
    • 可定制的博客主题
    • 支持服务端渲染
    • 支持 PWA 及离线访问
    • 便捷的运维体验,提供一键部署的 Docker 镜像

    脑洞大开

    对于一些有专业背景的同学而言,Github Pages 是最好的博客载体,其要求我们能够提供一个可以输出静态页面的版本;考虑到大多数同学原有的一些基础建设,决定不再重复制作轮子,于是便基于 hexo 开始设计和思考,经过了一系列的预研工作(看源码、找参考……),最终一把梭开发了一个无侵入的命令行小工具 yuque-hexo,只负责同步语雀的文章,下载到本地后生成对应的 hexo 的文章( markdown 文件),对原有的逻辑没有做任何的改造,纯粹的进行了功能扩展。

    总结

    言归正传,适合自己的才是最好的,体验一款好的产品,再到利用这个产品来扩展到一些相似的场景下,然后系统性的对该场景下的各种设计进行了调研分析和总结,从而达到提升体验和效率的目的。

    10 条回复    2019-12-16 17:04:51 +08:00
    hobochen
        1
    hobochen  
       2018-12-15 13:22:57 +08:00
    虽然说我也是 Alibaba 的 但是我还是觉得 LZ 这样的硬广哪里不对
    imn1
        2
    imn1  
       2018-12-15 14:05:56 +08:00   ❤️ 1
    一直以为「语雀」是语音麻将游戏
    xcold
        3
    xcold  
    OP
       2018-12-15 14:52:02 +08:00
    @hobochen hhh 并没有硬广告,就是好用推荐一下,无利益相关
    liuxu
        4
    liuxu  
       2018-12-15 14:55:27 +08:00   ❤️ 1
    @Livid 推广
    lhx2008
        5
    lhx2008  
       2018-12-15 15:01:57 +08:00 via Android
    我的 luan.ma 采用楼主的方案,哈哈
    xxb
        6
    xxb  
       2019-01-31 14:14:36 +08:00
    我也用楼主方案,有个问题,yuque-hexo 一个 repo 只对应一个语雀知识库,但实际上语雀会有多个知识库,有办法支持多个 repo 吗?
    xcold
        7
    xcold  
    OP
       2019-01-31 19:52:06 +08:00
    @xxb 可以到 github 给我提 issue,短期内应该木有时间支持。年后会考虑下,实现上不会很复杂。
    SenLief
        8
    SenLief  
       2019-10-26 21:03:19 +08:00
    整一个 yuque-Hugo 呗
    xcold
        9
    xcold  
    OP
       2019-10-28 09:49:04 +08:00
    @SenLief 欢迎 MR,我理解应该只需要加个 adapter 就可以实现的
    jabin88
        10
    jabin88  
       2019-12-16 17:04:51 +08:00
    如果楼主的方案没有搞定的,可以试试 https://www.yuque.com/jabin-ka5gk/wb5yft/cnh9xo,直接一键运行即可。基于 webhook 可即时更新
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4142 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 04:09 · PVG 12:09 · LAX 20:09 · JFK 23:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.