by Elizaveta Rusalskaya on Behanceby Elizaveta Rusalskaya on Behance

2023/07/12新增段落:

我自架部落格的理由與選擇(上)理由篇〉闡述了我自架 blog 的理由,但從萌生這個念頭到真正行動,中間竟然隔了 9 個月之久!

儘管不滿 Medium 的不便,自己架站卻也要考慮很多,想著想著又放在一旁了。

這篇就來講一下自架部落格有哪些選擇,我怎麼考慮等等。不過我並沒有比較所有可能選項的細節,就當作是自架網站選項參考的收集冊吧!

系列:我的部落格寫作

  1. 我自架部落格的理由與選擇(上)理由篇
  2. 我自架部落格的理由與選擇(下)選擇篇
  3. Notion + VS Code:我的 Markdown 寫作工作流
  4. Hexo 部落格心得:一週年總結與持續寫作策略

路線一:WordPress

既然說是自己架站了,那類似 Medium 的現成寫作平台如 Blogger 或台灣的痞客邦、方格子等,自然就不能納入其中。

而說到自架部落格,第一個想到的毫無疑問就是超級老牌的 WordPress。

百花齊放的選擇

WordPress 的建置方案眾多,從自己搞 VM 把整個 LAMP Stack 架起來這種比較適合工程師的「低階方案」(意指需要較多技術門檻),到直接去 WordPress.com 開一個帳號的「高階方案」(這麼做已經很像 Medium 了,但它沒有社群元素,所以姑且還是歸類於自架),各種選擇應有盡有,這個市場已經非常成熟。

其中你的技術成分愈多,彈性就愈大,需要花的錢也就愈少(通常啦!但也不一定),反之就要付費才能用得比較舒服。我想時間就是金錢,而且我們是來寫作而不是來搞技術的,不一定要選擇最有彈性的方式,太累啦!

所幸,一般人只要願意學習,網路上的 WordPress 教學資源豐富,一步一步照著做,都能找到適合自己的折衷方案。

我的思考:來自星箭廣播

起初會先考慮 WordPress,無疑是受到「上篇」中所提及星箭廣播的〈我們把文章搬到自己架設的網站了〉影響,該篇文章已經非常完整地闡述了「選擇 WordPress 的理由」,值得參考。

對我而言,選用 WordPress 最大的賣點就在於編輯器,容我直接引述原文這幾段:

不過最後我們卻打了個煞車停了下來,回心轉意改用 WordPress。最主要的原因就是 WordPress 的編輯器:Gutenberg Editor 以及他的生態系。

Gutenberg Editor 在每一個區塊(blocks)裡面可以使用比 Medium 與 Ghost 更多的格式,可以放上按鈕、音檔、直接塞入 HTML 之外,連圖文的排版都可以自由調整。

根據這一個強大的功能,我們決定轉向 WordPress,因為實際上來說,這樣的彈性自由將可以讓內容編輯在撰文與排版上有更多發揮的空間。

寫作上,我也是傳統文章編輯器的高度依賴者,雖然是軟體工程師,但我並不那麼愛寫 Markdown,對我來說,還是編輯器最棒了!

並非沒試過用 Markdown 來寫作,比如 macOS 上的寫作軟體 Bear 我也付費過一段時間,但還是不太習慣沒有編輯器與樣式按鈕的模式,可能是從 Evernote 以來就養成的習慣,積習難改?

拒絕 WordPress

既然編輯器這麼重要,那應該就選擇 WordPress 了?

為什麼?和工程師的偏執有關。

很多工程師都會追求簡潔,我也不例外。WordPress 在預設上確實是不夠簡潔的,且常常因「肥大」而為人垢病,在網站內容較多的情況下還希望它跑得順,除了砸更多錢在機器上外,調校的功力也不可少。

至於 WordPress 生態系的各式外掛套件,對非商業取向的我而言,重要性也不高,而且大量套件本身就已經違反了簡潔的精神。當然,這仍要視每個人的需求而定。

光這樣想就覺得有點「複雜」,仔細思考一下,如果 WordPress 對我而言最大的吸引力就是編輯器,那或許我應該有辦法在編輯器部分取得一個平衡然後捨棄它。

總之,最後就沒有選它了。

WordPress 好站推薦

雖然我沒有採用,但考慮到 WordPress 的網頁與影片教學資源實在多如繁星,我相信它仍是大部分人的第一選擇。

以下推薦我覺得有代表性的 WordPress 網站,並簡述我欣賞的點,這部分純屬個人品味,僅供參考。

簡約,且效能很高的 WordPress 網站,如果我是選擇 WordPress,我也會想要這樣風格的網站。軟體工程相關,所以對我而言它的代表性除了界面還有實用。

雖然我很少看別人的書評文章、影片,但瓦基的網站卻讓我印象深刻,難以想像上面的一切都是他一個人研究、實作出來的,視覺上兼具整體的一致性與美感,可以看得出他是個完美主義者


路線二:付費部落格方案

如果我不懂技術,也不想花時間研究如何架站,那我會選擇優質的付費部落格方案,好讓我可以專心當一個創作者

這樣的好處是省時省力,不用擔心網站的架設、主機的維護,只要專注在內容即可。而內容對一個 blog 而言,永遠都是最重要的。

前面提過,WordPress 有著各式各樣的付費方案——從低階到高階,一應俱全。但因為其肥大,在此也不特別推薦。

這裡只講兩個我覺得「可能不錯」的方案,你權當參考。

為什麼說「可能」?因為我沒有實際使用過,而是從 blog 讀者的角度去感受這個服務帶給我的閱讀體驗——這當然也是很重要的。

一、Ghost

Ghost 和 WordPress 非常類似,既是開源軟體,也提供商業方案,這樣的商業模式在現代似乎更加流行了。且兩者都是以部落格為主要產品。

你甚至可以說它基本上就是衝著 WordPress 來的。😎

至於為何選擇 Ghost 而不考慮 WordPress,可以參考這兩篇「搬家」文章:

  1. 我從 Wordpress 搬到 Ghost 了
  2. 從 WordPress 搬家到 Ghost 的記錄和體驗心得

這兩篇文章都是 Ghost 的使用者,且都是從 WordPress 搬家過來的,可以看得出來他們對 Ghost 的簡潔效能都很滿意。

二、Typlog

Typlog 是一個的部落格平台,它的特色在於簡潔美觀,且有著簡單易用的編輯器。

相較於 Ghost,Typlog 的知名度就小得多,但我覺得它的設計閱讀體驗都算不錯。

Typlog 是中國開發者 lepture 到日本創業的產品。

第一次聽到它,則是在 Podcast 節目《捕蛇者說》的這集〈Ep 34. 和 lepture 聊聊他的產品,以及做個人開發的體驗〉。

這集的來賓正是 Typlog 的創辦人,他在節目中提到了他的產品與創業歷程。當然,你不一定關心這些,但我覺得這集節目很有趣,可以聽聽看。


懶人包:所以新手到底要選哪個?

不時有人問我:「我想寫部落格,該用什麼平台?

現在我大抵會這麼回答:

  1. 對於新手,還不確定自己是否能持續寫作的人,我一律推薦 Medium。
  2. 對於中手(已寫作一段時間),或雖是新手但很篤定自己會持續寫作的人,我會推薦路線二。雖然要花錢,但換來的是專注在內容上的寫作體驗
    1. 而且退萬步言,這年代要花錢的事情很多呀!——筆記軟體、電子報服務、ChatGPT Plus XD。
    2. 在這之中,寫作無疑是最值得花錢的,因為世界會看見你。
  3. 對於「我就是不想花錢!」,但又希望版面漂亮且不要有廣告的人,那就只能選路線三了。

好,我們來講路線三。


路線三:各式靜態框架

靜態框架就是「靜態網站產生器(Static Site Generator)」,基本上就是把你寫成的 Markdown 檔案轉換成 HTML 頁面加以呈現(這個過程我稱之為「渲染」)。

關於「靜態網頁」的定義可以自行搜索,簡單理解就是沒有資料庫與複雜程式的網頁,整體頁面以 HTML、CSS 和基本的 JavaScript 為主。

靜態框架的優點

因此,選用靜態框架的一個代表性優勢,在於它能夠大幅節省執行網站程式運算所需要的資源耗費(相較於 WordPress)——白話講就是:你的網站會更快

不過對很多人而言,它最大的賣點或許還是在於「免費」。

選用靜態框架的人大多是部署在 GitHub Pages 上,我也是,整套方案弄下來花不到一毛錢(如果不算租網域的費用),而且 GitHub 的速度和穩定度都很不錯。

不要小看這個「免費」,如果你研究過 WordPress 的話,你會知道它的「免費」是有很多限制的,而且你很容易就會超出限制,這時候你就得花錢了。

靜態框架的缺點

靜態網頁的缺點就是界面與功能的彈性較小,想要額外的特性常常需要套件輔助才能辦到。這也帶來了另一個缺點:要透過套件新增功能時,對非技術人員實在略有門檻。

我也是照著網路上的教學一步一步實踐,基本上不會涉及太多技術細節,但終端機的操作免不了,確實稱不上平易近人。

可以說,技術的門檻是靜態框架對一般人的最大挑戰

但如果你只是要把網站架起來,供人瀏覽,且沒有太多客製化行為,那麼這個問題並不大。因為 step by step 的教學文章很多,只要有耐心,基本上都能完成。

三個靜態框架介紹

靜態框架也是百百種,這裡只提三個我有真正考慮過的選項。

選項一:Pelican

Pelican is a static site generator, written in Python.

作為 Python 開發者,會想選擇自己熟悉語言所寫成的框架誠屬自然。不過值得注意的是:Pelican 的知名度和下面兩位相比,著實有不小的差距。我也是開始蒐集靜態框架相關的資料後才知道它。

後來沒選它,原因也很簡單,一來是找不到喜歡的主題。其次,它的相對冷門也是一個顧慮,如果使用上有問題,或需要手刻一些功能時,資料會比較難找。

所以,平心而論,我並不推薦你選擇 Pelican。以下兩個框架,應該會是更好的選擇。

網站的頁面很有質感,文章更是一篇比一篇長,可謂質與量兼具。資料科學學習者應該很少不知道這個網站,但可能也很少注意過它是用 Pelican 架設的。

倘若你還沒有聽過這個網站,推薦可以從這篇〈直觀理解 GPT-2 語言模型並生成金庸武俠小說〉開始上手。

選項二:Hugo

GitHub 上的星星數已經超過下述的 Hexo 好一截,號稱生成頁面速度地表最快的靜態框架,畢竟是以 Go 語言寫成,沒人會質疑它的效能。

未採用的原因一樣是找不到理想的主題,顯然主題才是本體無誤。

2022/07/17:不過,如果你正考慮用 Hugo 來架站,卻苦於不知道從何上手,或者需要更加手把手的教學。那我個人推薦 Hahow 平台上的這堂《Github 免費架站術!輕鬆打造個人品牌》,我有買且大致看完了,並曾在個人臉書發表過簡單的課程心得,可供參考。

選項三:Hexo

終於來到重頭戲——Hexo!沒錯,我最後就是選了 Hexo,說一下它的優點吧!

它最大的優點就是中文的使用者很多。(這在國外網站的介紹被列為缺點,只能苦笑)


我選擇 Hexo 的原因

中文使用者多,除了使用上有問題時容易搜尋到中文資料以及相關教學外,一個更大的影響就是主題的創作很多是中文用戶,所以會更在乎中文的排版

常常被忽略的中文排版

這點真的很重要,前述我未提及的一個不想選 WordPress 的潛在原因就是中文排版優化不足,此議題請參考這篇〈留在 Medium 及暫不自架站〉中「不同語言在介面上的體驗呈現」部分。

並不是單純改變語系,就能完成編排設計。

在預設的情況下,WordPress 的中文排版常常是一場災難。

合適的主題

鑑於前二者不採用的理由,都是因為沒有理想的主題,而最後選了 Hexo,自然是因為找到了合適的主題!感謝 Even 的作者,創作出如此簡潔又有美感的作品。

話雖如此,我還是花了 30 小時以上(不誇張)調整了頁面的各項 CSS 細節,包括顏色,字體大小、行距、字型等等,才讓版面接近我的理想。

不過,後來我發現,原來 Even 主題也有 Hugo 版本!😂

由前端工程師 Askie Lin 所架設的網站,基於她的專業(前端技術)與審美對原主題進行了相當程度的頁面優化,不得不說我在修改自己頁面的時候,也常常參考她的排版,獲益良多。

Markdown 伏筆

從前面看下來,你是否覺得有點奇怪,我明明一開始說不愛用 Markdown 寫作,怎麼最後卻是選了基於 Markdown 的靜態框架?

簡言之,我找到了用 Markdown 寫作的折衷方式。這部分細節不少,請容我再另闢一篇討論,因為它確實滿重要的,也會影響你寫作的舒適度,最終決定你能否長期運行與產出。

也就是說,靜態框架有它的缺點,唯有接受或克服這些缺點,它才會是適合的選項。

相關文章:Notion + VS Code:我的 Markdown 寫作工作流


寫了十篇之後

這篇恰好是自架後的第十篇文章,已經有基本的累積,可以稍為講述,自行架站寫作的整體感受與心得了。

一言以蔽之:我覺得這個決定非常正確且必要

編輯器與排版部分

用了 Hexo(或說 Markdown)後,才深感原先 Medium 的編輯器與版面是如何限制我的文章呈現上篇提到的程式碼區塊部分就不提了,還有清單無法到第二層,以及小標題不明顯等讓我困擾的排版缺陷。

像這樣有兩層的有序清單,Medium 是不允許的像這樣有兩層的有序清單,Medium 是不允許的

Medium 的小標題存在感稀薄Medium 的小標題存在感稀薄

  • 2021/07/25:後來發現小標不明顯的問題主要發生在 Chrome 瀏覽器上。

不過大體而言,Medium 的中文排版還不差,功能也基本夠用,所以不算是我真正覺得「被解放」的部分。

發文流程的大幅化簡

真正被解放的是發文流程!因為在 Medium 發文前要設定一堆東西!

這裡就說明一下我把文章轉到 Medium 後,在發布之前要設定什麼:

  1. 文章標籤:這個幾乎都要,所以還好。
  2. display subtitle:在 publication 的縮圖呈現時,副標是獨立的,通常會自動使用你內文的副標(如果有的話),內文沒有副標時,就會自動抓取你第一段的開頭部分,呈現上未必是你想要的。
  3. 封面 reposition:封面如果比較大張,縮圖截取的位置可能不理想,要重新定位,這部分我少用,但偶爾還是需要。
  4. SEO Title:給 Google 索引用的標題,通常不用動,但太長會需要修一下。
  5. SEO Description:給 Google 索引用的文章描述,我幾乎都會改,因為預設的內容往往很醜。
  6. Customize Story Link:一定改,因為要用英文連結名稱。
  7. Customize Canonical Link:因為是從自己 blog 轉載所以也一定會加。Canonical Link 的功能在於告訴 Google 儘可能以呈現原站文章為主,使用 import story 的話就會自帶。

以上設定除了封面重置偶爾為之以外,每一個都是我發文前必要的步驟,說多煩有多煩,不設定又覺得呈現不夠理想,心理不適 😎,真的辛苦。

而 Hexo 就沒有這些東西可以設定,主要就是文章的分類和標籤而已,發布更是指令一下就完成了,速度差很多。

即使日後要調整分類或變更標籤也非常方便即使日後要調整分類或變更標籤也非常方便

流程化簡的好處就是發文的摩擦力顯著下降!尤其是短文,只有 500 字的文章也一樣要設定上述那些,想想真的讓人有點卻步。


結語:狡兔有三窟

我想任何單一寫作平台,即使再好,身為作者也難免不安,擔心平台的變動和自己會受到的影響。而有自己 blog 的好處是分散了這個風險,達到真正的「多元」。

平台還是平台,但你是自由的。

平台可以繼續使用,只是哪天它變了,你也可以立刻拍拍屁股走人,不用擔心接下來該何去何從。我想這就是自架部落格所帶能來的最大救贖。