總結與回顧：一個炫砲技術部落格的誕生 - Modern Next.js Blog 系列 #30

本文同步發佈於 it 邦幫忙 2022 iThome 鐵人賽

這是「從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術」系列第 30 篇文章。

在這 30 天裡，我們一起從無到有、使用現代技術、打造出了一個炫砲的技術部落格。

​

Show me the code & demo!

我把這 30 天的成果開源成「Next.js Tailwind Contentlayer Blog Starter」template 專案，並放在 Github 上。

​

Github repo

你可以點下面 repo 網址，看到所有程式碼：

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter

歡迎使用它來建立你自己的技術部落格，點綠色「Use this template」或「Fork」按鈕就行了！

也希望你能點個「Star」支持我，如果這系列有幫助到你的話！

發現任何 bug 或想加入更多 feature 的話，也歡迎開 issue 和 PR 一起合作！

​

Demo

你可以在這裡玩玩它：

https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/

我自己的個人部落格 https://easonchang.com/ 也是用這套模板開發的。 Repo 在這兒：https://github.com/Kamigami55/easonchang.com-next 。 裡面還有更多前端開發相關技術文章，歡迎來逛逛！

​

回顧這 30 天，我們做到了什麼

我們一起在 30 天內從零開始，用最現代的前端技術，從最基礎的環境配置、到最後的網站部署及維護，做出了一個炫砲個人部落格。

​

回顧系列內容

這 30 天我們經歷了 3 階段迭代：

第 1 ~ 13 天，我們先做出了一個有基本功能、且不錯看的部落格。

第 14 ~ 19 天，做完程式碼區塊、SEO 處理、sitemap、RSS 後，完成一個技術部落格該有的一切條件了。

而最後第 20 ~ 30 天，我們繼續加入更多炫砲且實用的功能，讓我們的部落格脫穎而出！

這 30 天目錄如下：

1. 「從零開始打造炫砲個人部落格」系列簡介
2. 簡介前端開發生態＆建立 Next.js 專案
3. 將 Next.js 專案部署上 Vercel 平台
4. ESLint、Prettier、TypeScript 等 Next.js 專案基礎設定
5. Markdown 簡介 & 安裝 ContentLayer
6. 首頁功能實作，加入 Contentlayer 文章列表
7. 文章內頁功能實作，渲染 Markdown 文章內容
8. 讓 Contentlayer 文章支援 MDX
9. 安裝 Tailwind CSS 和相關 ESLint、Prettier 設定
10. Dark Mode 深色模式支援，使用 Tailwind CSS、next-themes
11. 全站樣式切版
12. 首頁樣式切版
13. 文章內頁樣式切版
14. 加入程式碼 Syntax Highlighting，使用 rehype-prism-plus
15. 加入程式碼區塊標題，使用 rehype-code-titles
16. 加入程式碼區塊「複製按鈕」，使用客製化 MDX 元件
17. 加入 Open Graph、LD-JSON 等 SEO meta data
18. 使用 next-sitemap 生成 Sitemap
19. 使用 feed 生成 RSS Feed
20. 為內文小標題加入 anchor 錨點連結
21. 強化內文連結換頁速度、加入外部連結 icon
22. 圖片效能最佳化，使用 Next.js Image、plaiceholder、客製 MDX 元件
23. 使用 nprogress 加入換頁進度條
24. 在 MDX 文章側邊加入目錄
25. 使用 giscus 在 Next.js 加入留言系統
26. 使用 kbar 加入 Command Palette 指令面板
27. 在 kbar Command Palette 實作文章搜尋
28. 使用 next-i18next 實作中英文多語系
29. 在 Next.js Contentlayer blog 實作舊路徑轉址
30. 總結與回顧：一個炫砲技術部落格的誕生（You are here）

​

回顧使用的前端技術

• Next.js：現代全端框架
• Vercel：網站託管
• Contentlayer：Markdown/MDX 文章處理
• Tailwind CSS：UI 樣式
• next-i18next：多語系
• next-seo：SEO meta tags
• kbar：指令面板
• giscus：留言系統
• nprogress：換頁進度條
• TypeScript：更扎實的 JavaScript
• ESLint, Prettier：統一程式碼格式

​

回顧實作出的功能

除了基本部落格功能，我們也實作下列這些酷炫 feature：

• 編輯 local Markdown / MDX 檔案來寫作
• 網頁效能極佳
• SEO 友善
• 深色模式
• 中文、英文多語系
• 指令面板 Command Palette
• 留言系統
• 換頁進度條
• RSS Feed
• Sitemap
• 好讀的程式碼區塊

​

未來展望

我會持續維護「Next.js Tailwind Contentlayer Blog Starter」專案，畢竟我的個人部落格（easonchang.com）就是基於它開發的。

我還有很多想做的，我的部落格會持續進化，這份專案也會！

下面簡單列出一些未來預計加入的功能，應該會繼續寫成第 31、32... 篇文章：

1. 文章 OG image 自動產生：預計使用 Vercel 最新推出的 @vercel/og 搭配 Vercel Edge Function 來實作，參見 Introducing OG Image Generation: Fast, dynamic social card images at the Edge - Vercel
2. 可編輯的程式碼區塊：預計使用 Sandpack 搭配這篇教學文（Building a Next-Level Code Playground / Sandbox / REPL with Sandpack）
3. 加入更多頁面（About、Projects、Resume）
4. 快速生成文章 .mdx 檔：預計使用 Hygen code generator
5. 加入 Analytics：預計使用 Google Analytics 4
6. 串接 Google Search Console
7. 讓 RSS 分語系
8. 改善寫作體驗
9. 加入推薦文章區塊
10. 加入 Storybook
11. 還有很多...!

​

關於我

我是 Eason Chang，最愛挖坑給自己跳的全端工程師。

如果這系列文章對你有幫助，或是想追蹤後續更多文章，歡迎透過各種方式追蹤我，一起交流切磋！

個人部落格：https://easonchang.com/

Facebook：https://www.facebook.com/chang.ying.hsiang

Twitter：https://twitter.com/EasonChang_me

Github：https://github.com/Kamigami55

LinkedIn：https://www.linkedin.com/in/easonchang101/