博客 / 詳情

返回

聊下我這豆瓣化改造後的網站

從冒出想法到現在快三年了,這期間斷斷續續地弄,個人網站的豆瓣化改造差不多結束了;改造過程中又孵化出幾個項目,且發現了個別突出問題,接下來會有一波較大重構。

想趁現在這個空隙寫篇文章記錄並介紹下改造後所形成的一整套體系,也許有人會感興趣——畢竟我的個人網站是純靜態的,且比常規博客複雜。

豆瓣化改造

要把原本是常規博客的個人網站改造成個人版豆瓣的根源是對公共平台的厭惡。(詳見《閒聊個人服務:革「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 和個人知識庫「外腦」:

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 倉庫進行管理,統一調度:

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 數據規範的數據源及部分靜態網站生成器的網站源碼。

結語

這頓改造所引起的主要問題有——

構建網站需要從數據源轉換而來的數據,這些「中間文件」佔用了很多磁盤空間,數據和網站越多佔用得就越多,磁盤剩餘空間肉眼可見地變少。

網站源碼文件多了,編譯時間也變得很長,主站「歐雷流」每次部署都要半個小時左右……

要解決這倆問題的基本思路就是將網站的構建流程管道化,即從數據源經過流式轉換直接生成最終的網頁及相關文件。


本文其他閲讀地址:個人網站|微信公眾號

user avatar wanhuabandedasuan 頭像
1 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.