為什麼我離開 Medium 用 eleventy 做一個 blog
起因 #
最近一直覺得在 Medium 寫技術 blog 的體驗不是很好，尤其是對於 code syntax highlight 的缺乏，如果我要貼 code 在 Medium 上，要用內建沒有 code syntax highlight 的 codeblock，不然就是貼在 gist 上再 iframe embed 進來，我最後選擇是直接在 vscode 上用螢幕截圖到 Medium，不管是哪種作法都不是很方便，加上 Medium 的字體行高略大導致呈現資訊密度低，另外如果要放入不少 embed codesandbox 作為範例的時候網頁速度就會變慢，後來就決定要找時間自己架 blog。
而開始想要自架 blog 之後就要來選擇工具了，而選擇工具前要先釐清自己的需求：
- 支援 markdown 並且要有 code syntax highlight
- 盡量可能的簡單，不想要裝一拖拉庫的 npm package 才能 run 起來
- 畢竟是 blog，希望是靜態頁面架構，不需要使用 SPA
- 使用簡單的模板架構，方便可以身為前端工程師的我客製化 html css 寫一點小 js 做一些簡單的互動
為了追求簡單輕便，所以現在比較流行 Gatsby Nextjs 方案就不考慮採用，現成的 solution Hugo Hexo 本來有看一下，但是看起來只能挑人家做好的 theme，而大部分的 theme 架構都還蠻複雜的，要找到適合自己的 theme 自己要改小東西不是很方便，後來發現 eleventy 這個工具。
eleventy 整體來說就是簡單的 markdown 的 static html generator 跟 hosting server，支援不少 template engine，也有 plugin 系統讓你可以再加工，也有現成的 syntax highlight plugin 可以使用，我後來是使用 Google AMP tech lead 開發的 eleventy-high-performance-blog 作為 template 再自行客製化，這個 template 很棒的地方是裡面對圖片模糊化轉格式會自動處理，相當方便，下面介紹我的 blog 一些設計理念跟前端技巧。
打造一個 high performance 的個人 blog 技巧 #
- 使用靜態頁面
- self host static asset 盡量 reuse connection 減少 connection 成本
- inline css in style tag 讓 critical asset 優先下載
- 盡量使用系統字型，不用額外下載 web font，避免網頁文字跳動跟減少下載資源
- 使用先進的圖片格式，諸如 webp avif 減少圖片體積大小，用
<picture />tag 設定好 jpg fallback - 使用 cdn 服務，cloudflare 免費提供的應該就夠用了，讓世界各地看你的 blog 不會受地理位置影響變慢，還享有 https http/3 的支援服務
- 用
loading="lazy"html attribute 來 native lazyload image 同時不會犧牲 SEO 讓 google crawler 可以爬的到圖片 - 點擊再載入 codesandbox iframe，讓你的 blog 頁面開啟時不會馬上載入好幾個 vscode 進來
提升 blog 閱讀體驗 #
- 在 RWD 頁面維持圖片影片 iframe 寬高比例，避免畫面因為載入圖片影片 iframe 讓畫面跳動
- 降低顏色對比度，參考一些 design system 色盤，看起來比較舒服有質感
- hashtag 跳轉指定段落
- header 不 fixed 增加手機上的閱讀空間
- link 底線跟 visited color，增加連結辨認度以及提供是否看過的提示
- og title og image 讓 SNS 分享的時候可以有預覽圖片標題的效果
- 使用 native share api，用手機系統提拱的分享連結方式取代自己串接 SNS 平台
基本的 SEO #
- html tag 使用盡量符合語意，h1 h2 h3 階層分好
- 弄個簡單 favicon 在 google search 頁面看起來比較不像是隨便的網站
- 產生網站 sitemap 方便 google crawler 爬取
- ld+json 放一些基本的 structure data 讓 google search 增加 rich result 結果
- img 加 alt 增進 google image search SEO
- 買一個好記的域名
deploy tool #
現在要 deploy 一個服務真的蠻容易的，有超多做 deploy 服務的公司流程都相當簡單，我這邊是使用開發 NextJS 公司 vercel 的平台做部署，跟 github 整合相當容易，master commit 之後就會自動 deploy，相當方便，其他像是 Nestify 也有提供很棒的整合，也可以作為使用選項之一。另外如果遇到 deploy 時大量的圖片壓縮會影響到 CI 的效能速度，有一個小技巧就是把測試的時候 build 出來的圖片提前 commit 進去，就可以解決這個問題。
留言系統 #
因為最近發現 disqus 會做 track 跟賣廣告的行為，所以後來就乾脆不用了，想留言討論我有提供我的個人聯絡方式在下方，各大 SNS 也有討論平台，留言系統就覺得沒有那麼重要了。
心得 #
其實搭自己的 blog 還蠻好玩的，運用一下自己的前端知識，可以寫一些簡單的 css js 練練手，寫寫文章記錄開發心得，放一些履歷作品集也很方便，還可以放 donate link，讓大家請你喝咖啡 ☕️ ，在這個網路服務爆炸的時代，可以擁有自己的小 blog 小網站，在一個自己的小小天地寫一些整理過的東西也是挺療癒的，不是嗎？😄
