a bd.me

我的個人網站

我的個人作品集網站設計得簡單、乾淨，同時包括帶有瀏覽次數的 MDX 部落格文章、深色模式切換、裝備清單、關於頁面等功能。

技術堆疊

後端：

• Next.js / TypeScript
• MDX / Contentlayer（部落格文章）
• PlanetScale（資料庫）
• 棱鏡 (ORM)

前端：

• Tailwind CSS（樣式）
• Radix Primitives（無頭 UI 元件）
• Radix UI 顏色（顏色系統）
• 成幀器運動（動畫）

入門

確保您的電腦上安裝了 Node.js v18.17.0+。

1. 安裝依賴項： npm install
2. 環境變數：將.env.example複製到新的.env.local
3. 資料庫設定：參考資料庫設置
4. Prisma 設定： npm install @prisma/client （如果還沒有），然後執行npx prisma generate 。
5. 開始開發： npm run dev ，這將自動建立 .contentlayer 檔案並啟動 Next.js 開發伺服器。

資料庫設定

• 註冊 PlanetScale 帳戶
• 在 PlanetScale 中建立新資料庫
• 使用 PlanetScale 提供的連接字串更新項目的.env.local檔案中的 DATABASE_URL 環境變量

部署

該專案可以快速部署到Vercel。只需將您的 Vercel 帳戶連接到 GitHub 儲存庫，Vercel 將在每次新推送到主分支時自動建置和部署您的應用程式。

將項目 .env 變數加入 Vercel 項目設定。