聊下我这豆瓣化改造后的网站

从冒出想法到现在快三年了,这期间断断续续地弄,个人网站的豆瓣化改造差不多结束了;改造过程中又孵化出几个项目,且发现了个别突出问题,接下来会有一波较大重构。

想趁现在这个空隙写篇文章记录并介绍下改造后所形成的一整套体系,也许有人会感兴趣------毕竟我的个人网站是纯静态的,且比常规博客复杂。

豆瓣化改造

要把原本是常规博客的个人网站改造成个人版豆瓣的根源是对公共平台的厌恶。(详见《闲聊个人服务:革「to C」的命》)

在 2020 年 11 月的一天,晚上睡不着,脑子就活跃起来了------

失眠,躺尸七个小时,想了一些事情,其中包括跟自己个人网站相关的------

要加几个功能:「想法」或者说「自言自语」,也是现在很常见的功能了,就是像推特、饭否、微博这种,有了什么想法就立即写出来,不用像写文章似的长篇大论,也不用太考虑措辞等;多语言支持,先(也基本只能)搞英语和日语版,将我现有文章翻译成对应语言,英语要我老婆帮忙,日语我自己来;网友身份识别系统,可以认为是一种账号系统,但是只用于我的个人网站相关服务的网友身份识别,利用(多种)第三方的登录服务,没有密码;评论系统,最主要的原因是现在用的 Disqus 被墙了,对和网友的交流产生很大影响,我要基于上面说的网友身份识别系统和 Git 做一个评论系统。还有其他的畅想,但先弄这几个。

这几个东西的共同点是:基于 Git 的文件存储,而不是 SQL 这种数据库;基于去中心化的 open web 思想,是以个人为中心的,提供免费的工具,可以部署到自己的服务器。

欧雷的想法

所谓「豆瓣化」并非是外观上弄成豆瓣的样子,而是具备它的一些功能------

加入微博和推特那种的「想法」、展示自己看的书影音等的「我的」、动态时间线的「时刻」及让与我有所关联的人有独立资料页的「人物」等模块。

欧雷《再见,博客!

我的网站是用 Jekyll 生成的,完全依赖它的话很难做数据管理并生成动态时间线,因而要进行翻天覆地的改变才行。

说干就干,第二天就找空开始了!

数字「欧雷宇宙」

随着改造工作的推进,这个项目变得愈发复杂,并呈现出体系化的雏形,我将之命名为「欧雷宇宙」:

上图基本涵盖了当前体系的方方面面,并简单标明了它们之间的关系------

直角方块是独立网站或服务,圆角方块是「欧雷流」的一级模块,圆形则是二级模块。

那些直角方块的颜色分别代表:

  1. 青玉色------从属于「欧雷宇宙」的各个独立网站;
  2. 深蓝色------不属于「欧雷宇宙」的自己的孵化项目;
  3. 粉红色------为「欧雷宇宙」提供关键功能的第三方服务;
  4. 深橙色------为「欧雷宇宙」增加并扩大影响力的公共平台。

其中,「欧雷宇宙」的几个网站为:

  1. 欧雷流------展示以图文、音频、视频等方式创作的作品及个人动态之类的主站;
  2. 欧雷的开源软件------专门展示开源软件及其官网、文档等;
  3. 欧雷的开放生活------公开在做的事情及进展、户外活动数据与足迹、赞赏记录等;
  4. 欧雷共享的内容------即「共享中心」,通过公开或受限方式共享的本地个人知识库内容;
  5. 欧雷宇宙------记录「欧雷宇宙」的构成与发展变化等。

而孵化项目皆归属于「欧雷的数字世界」:

  • QiiDB------基于文件存储的开放数据集合及任何人都可用的在线资料库;
  • LinXoid------个人互联网名片和与他人进行连接的平台。

作为「欧雷宇宙」核心的主站「欧雷流」主要由 6 大模块组成:

  1. 创作(浅绿色)------汇总我的作品和碎片化信息,如文章视频想法笔记周报问答开源软件等,根据内容的特征而选择适合的公共平台分发以积累影响力;
  2. 社交(紫色)------集成 Disqus 支撑访客评论,用独有的「人物」系统展现我与他人之间的关系;
  3. 激励反馈(黄色)------通过定期付费的「赞助」或一次性付费的「资助」为我及「欧雷宇宙」的可持续发展「充电」,我会在「致谢」页、「人物」页和广告位等增加曝光予以回馈;
  4. 介绍(橙红色)------让访客在 LinXoid 个人页了解我,在「关于」页和「欧雷宇宙」了解网站本身;
  5. 记录(深绿色)------在「读物」页查看我在读、读过和想读的书籍,在「戏剧」页查看我在看、看过和想看的影视剧,在「设备」页查看我拥有的各类设备,它们的数据来源于 QiiDB
  6. 时刻(浅蓝色)------汇聚了我创作与共享等的动态,形成时间线。

体系架构

经过一番伤筋动骨的改造,整体架构大致如下图所示:

简单来说,就是将原本用 Jekyll 生成静态网站的数据从网站源码中剥离出去,并按照一致的结构存储,使其如数据库般与具体应用场景无关,作为数据源集中管理。

数据源中最重要的是被视为通用知识库的 QiiDB 和个人知识库「外脑」:

bash 复制代码
brain
   ├── build                  # 数据处理脚本
   │   └── ...
   ├── data                   # 数据源
   │   ├── blog
   │   │   ├── answers        # 问题的回答
   │   │   ├── changes        # 「欧雷宇宙」的变更记录
   │   │   ├── drafts         # 草稿
   │   │   ├── media          # 转载我文章的媒体
   │   │   ├── murmurs        # 想法
   │   │   ├── notes          # 小红书笔记
   │   │   ├── posts          # 文章
   │   │   ├── series         # 文章系列
   │   │   └── videos         # 创作的视频
   │   ├── collection
   │   │   ├── lists          # 列表
   │   │   ├── projects       # 项目
   │   │   └── repos          # 知识库
   │   ├── mine
   │   │   ├── animations     # 动画记录
   │   │   ├── categories     # 设备类别
   │   │   ├── devices        # 拥有的设备
   │   │   ├── dramas         # 影视剧记录
   │   │   ├── games          # 游戏记录
   │   │   └── publications   # 书籍记录
   │   ├── observation
   │   │   ├── facts
   │   │   ├── logs           # 每日做事日志
   │   │   ├── memos          # 备忘
   │   │   ├── people         # 人物信息
   │   │   └── requirements   # 工作需求
   │   └── summarization
   │       ├── dailies        # 日报
   │       ├── notes          # 笔记
   │       └── weeklies       # 周报
   ├── shared                 # 已共享文档
   │   └── ...
   └── readme.md

各个独立网站的源码从多个单独的 Git 仓库合并进一个 Git 仓库进行管理,统一调度:

bash 复制代码
homepage
   ├── build            # 数据及网站处理脚本
   │   └── ...
   ├── src              # 网站源码
   │   ├── life         # 欧雷的开放生活
   │   │   └── ...
   │   ├── meta         # 欧雷宇宙
   │   │   └── ...
   │   ├── oss          # 欧雷的开源软件
   │   │   └── ...
   │   ├── ourairyu     # 欧雷流
   │   │   └── ...
   │   └── share        # 欧雷共享的内容
   │       └── ...
   └── readme.md

网站源码仓库中的脚本用来:

  • 把数据源转换为网站构建所需的数据,尤其是用于「时刻」的;
  • 启动本地服务器调试网站功能与样式,以及部署到云服务器或 GitHub Pages。

个人知识库与网站源码仓库中的脚本在执行时都是用简化并统一后的 npm scripts:

  • 转换数据------npm run build [module]
  • 启动调试------npm start
  • 部署网站------npm run deploy

具体逻辑写在 build 文件夹下的 JS 文件中,基于 KnoSys 处理符合 QiiDB 数据规范的数据源及部分静态网站生成器的网站源码。

结语

这顿改造所引起的主要问题有------

构建网站需要从数据源转换而来的数据,这些「中间文件」占用了很多磁盘空间,数据和网站越多占用得就越多,磁盘剩余空间肉眼可见地变少。

网站源码文件多了,编译时间也变得很长,主站「欧雷流」每次部署都要半个小时左右......

要解决这俩问题的基本思路就是将网站的构建流程管道化,即从数据源经过流式转换直接生成最终的网页及相关文件。


本文其他阅读地址:个人网站微信公众号

相关推荐
~甲壳虫几秒前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年19 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_20 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891123 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾24 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu26 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym31 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫32 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫36 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat37 分钟前
前端性能优化2
前端