使用 Next.js 建立自己的部落格網站

前言

很久以前在學生時期曾經短暫寫過一段時間的部落格，不過因為三分鐘熱度的個性很快就停止更新了。最近因為工作的關係開始接觸很多不同的技術，深深覺得果然還是應該紀錄一下自己的學習過程，不然很多技術在一段時間沒使用之後，記憶就開始逐漸模糊， 甚至每次要用到的時候都還要重新查資料。與其如此，那還不如用自己的文字把所學的知識記錄下來，希望能以此加深自己的記憶，也希望能對其他看到的人有所幫助~~

使用 Next.js 建立部落格

身為一個選擇困難症患者，在考慮要使用什麼方式來建立部落格的時候猶豫了好一陣子。考慮的對象包括了 Hexo，Hugo，Wordpress等，甚至也考慮了像是ghost.js這樣的 headless CMS 等等，關於這些不同服務的比較，也許我未來會再寫一篇相關的文章介紹。不過簡而言之，我最後選擇了 Next.js來建立這個部落格。原因有以下幾點：

1. 對外部框架的依賴較少，有比較高的彈性與客製化能力
2. 可以使用前端熱門的 React 語法
3. 除了前端，也可以使用 API route 來實作後端功能
4. 可以使用 Vercel 免費的部署方案，而且部署非常方便
5. 學習 Next.js 的經驗也可以用於未來開發其他網站
6. 自己寫感覺比較酷！

不過理所當然的，更高的彈性也就意味著有更多功能都要自己處理，我會選擇這種方式也是因為網站開發也算是我的工作跟興趣之一。

如果不是對網站架設有興趣的人，或者是不想寫程式而只想專注在生產文章的話，使用現有的工具應該會是個更有效率的選擇。個人還滿推薦 Hexo 的 icarus 主題，甚至像是利用現成的平台服務如 Medium 就很好用了。

簡易架設教學

這裡簡單說明一下我的架設流程。

取得原始碼

雖然說是自己架設，但是如果完全從零開始的話應該會非常繁瑣 🤣，所以這裡還是借鑒了一下前人在 Github 上面的智慧！這裡我用了 tailwind-nextjs-starter-blog 這個模板，裡面包含了很多有用的基本功能。使用方式也非常簡單：

1. 打開這個模板的 Github 頁面 並點選 Use this template
2. 這會在你的 Github 帳號底下產生一個相同的專案，之後使用git clone下載到你的電腦
3. 在專案資料夾底下執行 npm install，安裝所需函式庫

在本機執行

1. 安裝完成之後，跟其他的 Next.js 網站一樣，執行npm run dev即可在本機上執行並測試。
2. 在瀏覽器網址輸入 localhost:3000 就可以看到執行成果。

改寫設定檔

在確認執行成功之後，首要的任務自然是修改網站名稱與資訊等設定，讓它變成屬於你的部落格。這裡需要修改的檔案都放在data資料夾底下。

1. 修改 siteMetadata.js 裡面的網站基本資訊，像是網站名稱、網址、圖標、電子報、留言服務等資訊。
2. 如果有使用外部的分析或是留言服務，可能需要修改 next.config.js 裡面的 content security policy 部分。(預設為 giscus 留言)
3. 修改 authors/default.md 裡面的作者資訊
4. 修改 projectsData.js，這裡放的是你的相關作品集資料
5. 可以修改 headerNavLinks.js，來客製化網站上方的連結選項，可以減少或新增選項 (預設有 blog、tag、project、about)

內容撰寫

對於一個部落格網站來說，能夠方便編輯與撰寫內容是很重要的！而一種非常方便跟常見的文件格式就是 Markdown 語法了，這也是幾乎每個部落格網站的框架都會支援的格式。 在我們所使用的模板中，部落格文章存放在 data/blog 這個資料夾內，點進去應該就會看到一些預設的文章內容。

只要把預設的文章刪除並建立自己的 Markdown 格式的文件 (.md 或 .mdx)，就可以開始建立自己的文章了！

部署到 Vercel 上

之前也有試過用不同的平台(像是 Heroku 或 AWS)來部署 Next.js 的網站，不過 Vercel 畢竟是由同樣的團隊提供的服務，整合與部署的過程還是更方便不少。

只要註冊 Vercel 帳號然後跟你的 Github repository 連結，之後只要更新 Github 的主要分支，就會自動部署最新的改動了。

程式架構

有時間的話再來介紹一下這個專案裡面所提供的一些功能還有用到的函式庫吧。

展望

希望自己有足夠的熱情跟毅力更新下去！