「星巴哥文章推薦」開發全記錄 — 從 Hexo 到 11ty

最近嘗試使用 11ty 也就是 eleventy 來架設共筆部落格。所以做了一個小 Side Project 來嘗試一下 11ty 開發共筆部落格。

星巴哥文章推薦 — 核心精神

在開始之前，先說明一下星巴哥文章推薦的核心精神。讓更多人可以分享看到的好文章，看到的同時，也可以宣傳一下自己的 Blog。並且在 Github 上留下貢獻的記錄。

除了對他人有幫助外，對自己，對社群都有幫助。這是星巴哥文章推薦的出發點。

開發成品 — 星巴哥文章推薦

「星巴哥技術週刊」是每週推薦 3~4 種類型的組成的週刊。但是每個人喜歡看的不一樣，例如：前端工程師可能只想看「前端開發」相關文章，需要的時候再去看 DevOps 或是後端。

每一篇大概會像下面這樣，很長，要找到自己想看的東西可能需要捲動一下才能定位到自己想看的內容。

於是我用 11ty 做了一個新的網站，叫做「星巴哥文章推薦」，印象中大概花了五天左右，每天寫一下下，花最多時間的大概是與思考如何呈現想要的內容與調整版面樣式。

另外 11ty 因為是靜態網站生成器，所以也有一些特殊的規則需要遵守。整體而言 11ty 的專案是挺乾淨的。國外也有很多 JS 開發者使用 11ty 來撰寫部落格。

「星巴哥文章推薦」最大的改變有以下幾項：

• 開放所有人透過 Github 貢獻推薦文章至星巴哥技術週刊
• 推薦文章會顯示作者
• 獨立作者推薦的所有文章。
• 獨立類別推薦的所有文章，例如：前端開發、後端開發、DevOps … 等等。

作者推薦的所有文章的範例 — 神Q超人推薦的所有文章：

點擊進去，單篇文章更容易閱讀

由類別分類，以 DevOps 為例，可以快速得到自己需要的資訊。

除了文章推薦以外，也開發了「活動」與「研討會」來讓大家貢獻活動上去。

為什麼是 11ty ?

基本上我參考了兩個 Blog，第一個是 Jason Memo Dev，如果常常在 FB 前端版應該不陌生，Jason 常常分享前端開發優質文章，他的 Blog 就是使用 11ty 架設的。優點是開啟文章非常的快速，通常部落格慢就慢在圖片載入的速度，而 11ty 加上 Google 基於 11ty 開發的開源專案：eleventy-high-performance-blog，會將圖片做些特殊處理，基本上可以達到秒開的速度。

11ty 的特色是落落大方，使用 11ty 會有一個簡潔的版面，一進去就是讀文章。

相對來說大部分的功能和頁面都需要自幹，所以第二個參考的 Blog 是 Cymetrics Tech Blog，Cymetric Tech Blog 已經增加了許多實用的功能，包含：

• 多作者共筆
• 作者介紹

星巴哥文章推薦是直接 fork 這個專案來修改需要的功能。

開發功能記錄

新增了多種身分，包含：發起人、專欄作家、維護者、貢獻者。在 About 頁面點擊名字時會連結到個人 Blog。(原本是文章列表)。

如果在文章列表點擊名字

則會顯示該作者的文章列表

研討會活動列表

依照文章類型觀看

落落大方的閱讀體驗

心得

雖然「星巴哥技術推薦」專案技術難度不高，構思卻花了許多時間，因為想讓星巴哥技術週刊能夠永續經營，然而，總是由同一群人分享，一方面內容依照相同的人來推薦，可能比較侷限。再來每週需要花時間其實也不少，藉由這個 Side Project 讓更多人參與，希望能夠永續經營知識分享。並且達到去中心化的目的。

近一兩年，其實我自己的追蹤成長數是星巴哥中成長最慢的，甚至已經被反超。但是我卻覺得踏實，因為對我來說，營造一個能夠讓更多的人願意出來分享知識的環境，才是最重要的。而星巴哥正是一個讓願意分享知識的人，發光發熱的組織。