歡迎來到斜槓矽谷 Slash Valley。身為一個對技術與極致體驗有著執著追求的極客，在規劃這個空間時，我就決定拋棄傳統笨重的 CMS 系統（如 WordPress），也不盲目跟風使用龐大的 UI 框架。

我們選擇回歸技術本質，使用 Next.js (App Router) 搭配 Turso / SQLite 邊緣資料庫，並完全以 Vanilla CSS（純 CSS） 雕琢出具備「高級感 (Premium)」的微互動介面。

這篇文章將為你完整拆解這個網站的架構、核心技術，以及高效的自動化同步開發流程。

🛠️ 1. 核心技術棧 (Tech Stack)

整個網站的架構可以分為以下四個核心支柱：

Next.js 14 (App Router)

我們選擇 Next.js 作為網站的骨幹。其預設的 React Server Components (RSC) 能在伺服器端直接完成 Markdown 的 HTML 轉換，實現近乎零 JavaScript 載入的極速首屏體驗。同時，Next.js 原生支援的 Metadata API，讓我們能為每篇文章動態產生 SEO 標題與 Open Graph 標籤，極大提升了搜尋引擎友善度。

Turso (libsql / SQLite)

既然是個人沙龍，我們需要儲存文章的閱讀數（Views）與點讚數（Likes）等動態資料。Turso 是一個基於 SQLite（Libsql）構建的邊緣資料庫，它能將資料庫副本部署在離用戶最近的邊緣節點上，提供低於 10 毫秒的極速讀寫回應，且完全免去了維護複雜伺服器的煩惱。

Markdown 原生寫作流

文章內容採用 .md 檔案儲存於 content/posts/ 目錄。我們利用以下工具進行解析：

  • gray-matter：用於解析文章頂部的 YAML 格式前言（Frontmatter），如標題、發布日期、分類與描述。
  • marked：一個輕量且極速的 Markdown 解析器，負責在 Server 端將內文安全地編譯為標準的 HTML。

純 CSS 與磨砂玻璃設計美學

不使用 TailwindCSS，而是完全手寫 Vanilla CSS。 我們定義了豐富的 CSS 變數（Variables）來支持深色/淺色主題切換。視覺設計上，我們導入了現代網頁的**磨砂玻璃（Glassmorphism）**效果，搭配線性漸層與 cubic-bezier 緩動函數的懸停動畫（Hover Effects），營造出高端、流暢且靈動的互動質感。

⚙️ 2. 自動化 Markdown 同步流程

我們不希望每次寫完文章都要進資料庫手動輸入。因此，我們設計了一個自動化同步腳本 scripts/sync.js：

  1. 檔案監聽與讀取：腳本會掃描本地 content/posts/ 目錄下的所有 .md 檔案。
  2. 資料庫 Upsert（更新或新增）：
    • 腳本會自動將中文字元轉換為網址友善的 slug。
    • 比對資料庫，如果該 slug 已經存在，則執行 UPDATE 更新內文；若不存在，則執行 INSERT 新增文章，並自動將分類（Category）關聯到資料庫中。
  3. 一鍵發行：在本地撰寫完文章後，只需在終端機輸入 npm run db:sync，即可透過 libsql 客戶端，將新文章同步到 Turso 雲端正式資料庫中。

🤖 3. AI 協作開發的新範式

值得一提的是，這個網站從架構規劃、數據表設計、CSS 動畫微調，到推薦連結卡片的精緻包裝，全過程都是在 AI 程式技術的輔助下高效完成的。

透過與 AI 進行 Pair Programming（雙人協同編程），我們省去了查閱繁雜 API 文件與撰寫重複性程式碼的時間，能把 100% 的精力專注在核心產品設計、SEO 優化與內容價值創造上。這正是「斜槓矽谷」一直以來提倡的理念：善用 AI 工具，實現 10 倍速生產力。

💡 總結

「斜槓矽谷」部落格的誕生，不僅僅是為了解密區塊鏈與分享程式技術，它本身就是一個極致效能與現代 Web 技術的實踐結晶。

在未來的文章中，我們也將持續分享更多關於 Next.js、邊緣運算、AI 自動化指令碼以及 Web3 理財策略的實戰經驗。如果你也想開始你的數位探索之旅，不妨現在就做好準備！