鐵人檔案
每個工程師都值得擁有個人網站！這30天讓我們一起用上各種前端現代技術，自幹一個炫砲個人網站吧！
主題將涵蓋：用 MDX 格式寫文章、炫砲樣式切版、程式碼 highlight、多語系、架站、RSS、SEO、留言區、效能優化等。
用到的技術如下：React.js、Next.js、TypeScript、TailwindCSS、Markdown、MDX、ContentLayer、i18next、Vercel、GA、Storybook等。
歡迎來到 30 天 「從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術」 系列！ 這系列我們會在 30 天...
開工之前，讓我們先來了解前端開發生態，以及 JS 套件管理器 pnpm，接著建立基礎 Next.js 前端專案，並在電腦上打開它！ 這篇文章會講這些： 堆積木...
這篇文章會介紹 Vercel 架站平台、如何把 Next.js 專案部署上去、以及綁定 Github 實現持續部署。 內容如下： Vercel 架站平台介紹...
這一篇我們來進一步做些 Next.js 專案基本設定，讓後續開發體驗更流暢、專案結構更易讀。 我們會做這些設定： 新增 .nvmrc 鎖定專案 Node.js...
這篇我們來簡介如何使用 Markdown 語法撰寫文章，以及安裝 Contentlayer 將 Markdown 檔案轉換成文章。 這篇完整程式碼改動可以在這...
讓我們使用上一篇安裝的 Contentlayer，實作首頁文章列表功能，呈現所有 Markdown 文章。 結果截圖如下： 這篇修改的程式碼如下：https...
TL;DR 這是「Modern Blog 30 天」系列第 7 篇文章，上一篇我們做完了首頁文章列表功能，這篇我們接著實作文章內頁，呈現完整文章 Markdow...
TL;DR 這是「Modern Blog 30 天」系列第 8 篇文章，上一篇我們實作了 Markdown 格式的文章內頁，這篇我們會擴充它，讓他支援 MDX...
TL;DR 這是「Modern Blog 30 天」系列第 9 篇文章，上一篇我們讓 Contentlayer 也支援了 MDX 格式。這篇讓我們來安裝 Tai...
這篇我們來讓上一篇安裝完的 Tailwind CSS 支援暗黑模式（深色模式、Dark mode）。 並搭配 next-themes 管理主題切換以及偏好主題的...
