返回項目OBJECT / 01
ORBITAL OBJECTS 運行中

NOVA / 新星

一個用 Vue 3 + vite-ssg 構建的雙語個人博客,把星圖、軌道線與 commit graph 織在一起。

年份2026
技術Vue 3 · TypeScript · Vite SSG
INDEX01 / 04
2026 年 11 月 10 日

NOVA 是一座很小的私人觀測站。它既是一個可以持續寫作的雙語博客,也是一次關於如何把“宇宙感”做得剋制的實驗。

項目從零開始,沒有使用現成主題。視覺、內容管線、搜索和靜態生成都在同一個倉庫裡完成。

設計目標

  • 讓標題和文字成為主角,星野只負責氣氛;
  • 中文和英文都是完整的一等公民,而不是翻譯插件的結果;
  • 文章可被搜索引擎抓取,關閉 JavaScript 後仍能閱讀;
  • 動效可以關閉,且關閉後不損失任何信息;
  • 全站只用一個 Canvas,不為裝飾引入大型 3D 引擎。

標誌保留了“月球繞著地球”的原始想法,但只出現在導航和 favicon 裡。頁面上的宇宙感來自軌道線、星圖編號和留白,而不是一顆巨大的地球。

技術結構

站點使用 Vue 3 與 Vite 開發,vite-ssg 在構建時把每一條路由預渲染為 HTML。Markdown 內容在 Node 端編譯,代碼高亮、目錄和閱讀時間也在同一個階段生成。

// content -> data -> static routes
const routes = posts.flatMap(post => [
  `/writing/${post.slug}`,
  `/en/writing/${post.slug}`,
])

文章頁會根據 translationKey 尋找對應譯文。語言切換不會把讀者送到首頁,而是儘量停留在同一篇內容的另一種語言版本。

寫作系統

內容存放在 content/posts/ 與 content/projects/,按語言分目錄。frontmatter 負責標題、日期、標籤和翻譯關係,正文繼續使用 Markdown。

發佈一篇新文章只需要:

  1. 新建一份中文 Markdown;
  2. 新建對應的英文 Markdown;
  3. 運行構建,索引、路由、RSS 和搜索數據會自動更新。

這套系統不依賴後臺或數據庫,部署產物是一整個靜態目錄。

下一步

接下來會繼續完善項目卡片、補充真實倉庫鏈接,並把更多關於 Git 與開源協作的筆記沉澱下來。觀測站的建築可以變化,但記錄本身應該保持穩定。

這篇記錄還有另一種語言的版本。閱讀英文版