「從零開始打造炫砲個人部落格」系列簡介 - Modern Next.js Blog 系列 #01

Published on

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

歡迎來到 30 天 「從零開始打造炫砲個人部落格,使用 Next.js、ContentLayer、i18next 等現代技術」 系列!

這系列我們會在 30 天內從零開始,用最現代的前端技術,做出你的炫砲個人部落格!

這篇文章會向你簡介本系列,包含以下內容:

  • 目標讀者
  • 成果 Demo
  • 開源 Github repo
  • 部落格功能列表
  • 使用的技術列表
  • 30 天內容規劃
  • 關於我

目標讀者

這系列是實作導向,會包含大量前端程式碼,從最基礎的環境配置、酷炫功能開發、到最後將部落格部署上線,一步步架出部落格網站。

適合的讀者群如下:

  • 已經有些前端開發經驗
  • 想架設自己的部落格
  • 熱愛折騰與客製化
  • 剛挑戰完鐵人賽,想順便建立個人部落格放文章

如果有以下先備知識會很棒:

  • HTML、CSS 略懂
  • JavaScript、TypeScript 略懂
  • Git 操作
  • React.js 略懂
  • Next.js 略懂

這系列不會細講上面這些語言、技術的全部細節,但開發過程中有用到的部分都會清楚說明,也會附上各種參考資料,所以不用擔心!

如果你完全沒接觸過前端開發,但還是想做一個酷酷個人部落格的話,也歡迎往下讀!從做中學才能學得更快。

每一篇文章最後也都會附上完整程式碼,先照著做、再一行行理解,接著修改成你喜歡的樣子,這樣就學會了!

所以這個部落格長怎樣?

成果 Demo

你可以在這裡玩玩最終成果:

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

成果截圖

首頁:

首頁

文章頁與深色模式:

文章頁與深色模式

指令面板:

指令面板

原始碼 Github repo

最終成果有開源成「Next.js Tailwind Contentlayer Blog Starter」template 專案了,你可以在這兒看到 30 天所有程式碼:

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

Github repo

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

如果這系列有幫助到你的話,也希望你能點個「Star」支持一下~

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

部落格功能列表

除了做出基本部落格功能,我們還會實作下列這些酷炫 feature:

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

使用到的技術

全系列主要會使用到的技術如下:

部落格架站費用

這系列全篇用到的開發與在架站資源都是**「免費」**的,只有 2 處可能會需要付費:

  1. 第 3 篇 介紹的 Vercel 架站平台,網站流量很大時(每月超過 100 GB)需要升級付費方案,每月 20 美金。 但部落格程式碼都是你自己的,需要時可以輕易搬移全站到其他伺服器。
  2. 網域名稱 Domain name。價格依照域名稀有程度有所不同。 我自己在 GoDaddy 購買的 easonchang.com 價格是每年 800 元台幣左右。 不想買域名也行,Vercel 會配給你 XXX.vercel.app 的域名,XXX 可以自訂,只要沒被別人使用過都行,像是我的 blog 也在 easonchang.vercel.app 上。

30 天詳細內容規劃

這系列 30 天大致上分成 3 個階段:

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

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

而最後第 20 ~ 30 天,則會繼續加入更多炫砲且實用的功能,讓你的部落格脫穎而出!

這 30 天目錄如下:

  1. 「從零開始打造炫砲個人部落格」系列簡介(You are here)
  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. 總結與回顧:一個炫砲技術部落格的誕生

關於我 Eason Chang

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

我從 7 年前開始接觸前端開發,最近正在往後端邁進。

如果這系列文章對你有幫助,或是想看看我的其他文章,歡迎透過各種方式追蹤我,一起交流切磋!

個人部落格: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/

我自己的個人部落格也是用這 30 天開發的「Next.js Tailwind Contentlayer Blog Starter」模板架起來的。

Repo 在這兒:https://github.com/Kamigami55/easonchang.com-next ,也歡迎來逛逛按個 Star ~

小結&下一篇

現在我們暸解了 Modern Next.js Blog 系列 30 天會經歷的事。

準備好一起打造酷酷部落格了嗎?下一篇,讓我們了解什麼是 Next.js,以及建立 Next.js 專案!

Let's gogo!