Wen Chen
Published on

動手做 Blog 吧！和我為何要自己架部落格

Authors
  • avatar
    Name
    Wen Chen

為什麼我要自己架部落格

其實說來也白爛，有其中一個原因是一兩年前在準備作品集時，有在 GoDaddy 買一個自己的 Domain，但開始就業之後就幾乎沒在打開那個作品，某天突然發現那個域名自動續約了，尋思了一下，不然自己弄個 Blog 好了。

不過當然不僅僅那麼單純，過去我大部分文章都寫在 Medium，老實說，Medium 對我來說很好用，傳圖片啊什麼的，都很方便，唯獨就貼 Code 的部分，相信這個在很多離開 Medium 的相關文章都有看過，雖然有解決方法，但都很麻煩，再不然就是要直接貼程式碼的截圖。

但這樣又失去了讓讀者直接複製程式碼的功能，總之對於很多碼農來說，這應該算是 Medium 一個很惱人的問題。

再來還有一部分是我個人心態因素啦，因為我自己心裡覺得 Medium 放的文章絕大多數都是偏專業的文章，所以起初在寫文章的時候心裏都有點壓力，怕被嘴。

又加上，有時候其實只想發發廢文，或是發發出去玩的照片，總感覺發在 Medium 上不太適合，假如有自己的 Blog ，就沒有上述問題囉，畢竟這真的是我個版。

接下來會分享我建構這個 Blog 用了哪些東西，有興趣者可以參考看看。

動工前的使用須知

選擇工具的過程就不贅述了，最後是選用了在 Vercel 官方 Templates 中看到的 Tailwind CSS Blog，主要是他符合幾點我當初選擇時在意的點：

  • 支援 codeblock：用 markdown 撰寫且支援 codeblock。( 這個模板用 MDX 撰寫 )
  • 支援客製細節：Tailwind 改起來不會太困難。
  • 開箱即用：基本上直接 pull 專案，或使用作者提供的 Pliny project CLI 直接安裝也可以，甚至還可以選擇安裝 TypeScript 的版本。
  • 幾乎完美的 Lighthouse 跑分
    • 基本 SEO
    • 預設圖片 Lazy Loading
  • 預設就已經做好深色模式 與 RWD ( Dark Mode )

當然也不是沒有缺點，在開始前還是先說說缺點：

  • 假如是想做「 Blog 」當求職作品的人，不適合用這套，因為這太開箱即用了，很難作為技術的展現，這 templates 主要還是給單純要做 Blog 放自己文章的人使用。
  • 對前端要有一定基本觀念，可能要懂一點 NextJS，這樣才改得動裡面的 Code。
  • 要會寫 markdown (不過我相信工程師應該都會寫)。

使用

前面有提到，我是用 Tailwind CSS Blog 作為我的 Blog 模板，使用方式簡單到好像不需要另外寫教學。

我是用作者提供的 CLI 直接安裝，同時可以選擇要寫 TS 還是 JS。

安裝：

npm i -g @pliny/cli  # 安裝 CLI
pliny new --template=starter-blog my-blog # 透過 Pliny 建一個新的 Blog 專案

基本設定

我安裝的是 TS，底下檔名在 typeScript 環境會是 .ts ，自己對應就行。

  1. 要修改網站主要訊息去 siteMetaData.js 修改。
  2. 主要作者訊息去 data/authors/default.mdx 修改，內容會對應至 about 頁面。
  3. data/projectsData.js 對應的是 project 頁面，不過我拔掉了，要放作品集可放在裡面。
  4. headerNavLinks.js 自訂 Nav 連結，我把預設的 project 拔掉，塞我自己想要的連結。
const headerNavLinks = [
  { href: '/tags/開發', title: '開發' },
  { href: '/tags/工作', title: '工作' },
  { href: '/tags/生活', title: '生活' },
  { href: '/blog', title: '所有文章' },
  { href: '/tags', title: '關鍵字' },
  { href: '/about', title: '關於' },
]

export default headerNavLinks
  1. data/blog 內的檔案就會是你的所有文章，再不改動 pages/blog 內元件的情況下，他會自動抓到 data/blog 底下的 md 或 mdx 檔案生成靜態文章頁面，而檔案結構支援資料夾分類。

舉例來說，以這篇文的 route 為例 : /blog/life/build-your-blog，他在專案內的結構就會是：

.
└── data
    └── blog
        └── life
            └── build-your-blog.mdx

放在資料夾內的話，在生成 route 時會自動幫你多一層路徑，當然全部塞在同一層也行，不過多一些資料夾，比較方便分類。

  1. public/static NextJS 放置靜態資源的地方，圖片什麼的都要放這邊。

  2. next.config.js 假如要加入 GA 或是留言板，要來這裡設定 ContentSecurityPolicy ，否則預設都會擋掉。

基本上設定大概就是這樣，預設情況下，不用改太多東西就可以直接開始寫作，如果想自定義一些樣式，因為是用 Tailwind 寫的，稍微看一下用法，改起來也不會太困難。

發文

這個模板在寫作方面除了內文本身，formatter 提供了七個欄位可以填入，詳細可以去看 這邊。

這裡提一下我一定會填的選項：

title : 標題 (必填)
date : 日期 (必填)
tags : 標籤，在我的 Blog 我把他改名成關鍵字。 (必填)
summary : 概括，我都會填。

內文部分的話，基本就是寫 markdown，而這個部落格也支援 mdx ，他支援在 markdown 裡面撰寫 JSX ，除此之外，就都與原始 markdown 一模壹樣了，想看更多 mdx 可以看這裡

部署

完成基本設定之後，當然是要部署自己的網站，我這邊是用 Vercel，主要因為他們的網站託管平台使用起來真的非常銀杏，而且作為 NextJS 的開發公司，選用他們是在適合不過。

Vercel 本身可以跟 Github 串連，串連完成之後，只要買次 push 新的版本上 GitHub，便會自動部署新的版本，非常方便。

類似功能的還有 Netlify ，用起來也不錯。

額外的優化

購買自己的域名

雖然 Vercel 有提供免費的 domain，但如果不想要後面掛一串 vercel.app 可以自己買一個域名，我自己是在 GoDaddy，買的，買完去 Vercel 設定的地方照著指示做就對了。

圖片優化

因為之前有發過旅遊類型的文章，裡面大量自己拍的照片就算經過 TinyPNG 壓縮後，體積還是略大，後來把網站所有圖片都轉成 webp，節省更多體積。

對 webp 有興趣者可以看這兩篇之前寫的文章：用python批次將圖片轉檔成webp並壓縮 、實測 PIL 壓縮圖片(WebP、Jpeg)之差異

留言

這個模板預設支援 disqus 、 gisqus 和 utterances ，我自己是用 disqus。

模板 Tag 應用

這個不算是優化，算是使用小心得吧！

在發文時我們填入 tags 的內容他會自動生成在 /tags 這個 page 內，而底下的 tag 則是會出現在 /tags/ route，假如是「開發」這個標籤，便會是/tags/開發 這個 route。

我們回到文章前段提到的 headerNavLink ：

const headerNavLinks = [
  { href: '/tags/開發', title: '開發' },
  { href: '/tags/工作', title: '工作' },
  { href: '/tags/生活', title: '生活' },
  { href: '/blog', title: '所有文章' },
  { href: '/tags', title: '關鍵字' },
  { href: '/about', title: '關於' },
]

export default headerNavLinks

這裡我透過特定的標籤，來做文章分類，算是基於模板的標籤功能無痛替文章做分類吧 XD

後記

回過頭來看，好像自己又發了篇廢文，因為模板本身文件很詳細，其實也不太需要寫教學，算是推廣一下這個模板，有需要的人非常推薦嘗試一下。

不過寫自己的 Blog 確實挺有趣的，架設過程可以順便運用一下過去工作使用到的技術，之後要當成筆記本或是放作品的地方都不錯XD

畢竟是自己的空間，要 po 什麼廢文心理壓力也不會那麼大了！