為什麼我離開 Medium 用 eleventy 做一個 blog - Jason's Web Memo

為什麼我離開 Medium 用 eleventy 做一個 blog

起因

最近一直覺得在 Medium 寫技術 blog 的體驗不是很好,尤其是對於 code syntax highlight 的缺乏,如果我要貼 code 在 Medium 上,要用內建沒有 code syntax highlight 的 codeblock,不然就是貼在 gist 上再 iframe embed 進來,我最後選擇是直接在 vscode 上用螢幕截圖到 Medium,不管是哪種作法都不是很方便,加上 Medium 的字體行高略大導致呈現資訊密度低,另外如果要放入不少 embed codesandbox 作為範例的時候網頁速度就會變慢,後來就決定要找時間自己架 blog。

而開始想要自架 blog 之後就要來選擇工具了,而選擇工具前要先釐清自己的需求:

  1. 支援 markdown 並且要有 code syntax highlight
  2. 盡量可能的簡單,不想要裝一拖拉庫的 npm package 才能 run 起來
  3. 畢竟是 blog,希望是靜態頁面架構,不需要使用 SPA
  4. 使用簡單的模板架構,方便可以身為前端工程師的我客製化 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 技巧

提升 blog 閱讀體驗

基本的 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 小網站,在一個自己的小小天地寫一些整理過的東西也是挺療癒的,不是嗎?😄

Jason Chen - Yahoo Taiwan EC Web frontend engineer currently. Write something about web and React.js here

Jason Chen

Yahoo Taiwan Sr. Frontend Engineer. Write something about web and React.js here.

Other Posts