2024年5月10日

為何我選擇 GitHub Page + Hexo + Cloudflare 作為 Blogger 替代品

為何我選擇 GitHub Page + Hexo + Cloudflare 作為 Blogger 替代品

Wayne Fu 0 A+
github-page-hexo-cloudflare-blogger-alternative.jpg-為何我選擇 GitHub Page + Hexo + Cloudflare 作為 Blogger 替代品因為經歷了「Blogger 網誌被刪除」事件,我計畫將出事的網站搬到自架站,可以避免網站寄人籬下時,需要應付平台的各種合理或不合理規範,不過有相當多問題要解決:
  • 要搬到哪個平台比較適當?如何抉擇各種自架站平台?
  • 能否沿用 Blogger 網址結構(才能不影響 SEO)?
  • 如何克服主機(或是網站託管平台)的流量或其他限制?
  • 能否匯入 Blogger 文章(是否支援 Blogger 匯入格式)?
  • 後台編輯界面是否合用?能否多人協作?
  • 能否從瀏覽器進入後台?有網路就能進入後台?
  • 能否自動備份網站,預防網站發生任何意外?
這裡面每個主題都相當龐大,且根據自身條件,每個人的解決方案都會不太一樣。為了克服所有困難,等待網站恢復的一個多月主要都在研究這些新的領域。最終我找到的替代方案是 Hexo,本篇會說明為何選擇 Hexo,以及從 Blogger 移轉到 Hexo 的大致流程。

一、如何決定架站平台

1. Blogger 網址結構 Blogger 文章的網址結構為 /年份/月份/xxxx.html,跟其他平台截然不同,所以搬遷網站最重要的就是,能否將網址結構移轉到新平台。 經研究後,只要不是搬到其他部落格/架站平台,而是使用自架站的方式,都可自行設定網址結構,所以只須挑選合適的自架站平台。 2. WordPress 最多人使用、最知名的部落格自架站平台為 WordPress,但是經過深思熟慮後,暫時沒有採用 WP 的打算:
  • 後端需要投入時間熟悉 php 語言
  • 挑選主機商太麻煩,找了便宜的可能日後有糾紛,還須跟主機商周旋。找了貴的可能比較穩定,但目前沒營利,先期投資成本太高。
  • 網站流量若短時間衝高,可能會被主機商關閉,必須購買更高等級的主機。但若高流量並非常態時,就會讓花費不成正比
其實部落格型態的網站並不真的需要後端,所以 WP 的後端與主機到頭來是多餘的。不須後端的話只需要建立「靜態網站」就好,真需要用到後端時,可參考我常用的「Google 試算表作為資料庫」系列文,所以只須將目標擺在可建立靜態網頁的自架站平台即可。 3. 程式碼託管平台 參考這個討論頁面「開源git託管平台有哪些」,最知名的程式碼代管平台有這些:GitHub、GitLab、Bitbucket、SourceForge、Gitea...等。 這些存放程式碼的平台都可以用來架設靜態網站,不需要主機、流量費用,當然他們也有付費方案,等我們的網站、線上服務規模大了,需要更多功能時,再來考慮付費,這樣會比一開始還不知道能否賺錢,就貿然使用 WP 架站好太多了。 這些平台之中,GitHub 最知名、最多開發者使用,且被微軟收購,網路上能查閱到最多的參考資料,遇到困難自然最容易找到解答,所以把 GitHub 作為自架站首選沒什麼問題。

二、如何選擇架站工具

1. GitHub 如何架站 GithHub 提供了「GithHub Pages 架設靜態網站」功能,只要上傳 HTML/JS/CSS 就能呈現一個靜態頁面。 但總不能整個網站都用雙手刻出來,如此太花時間,因此有了「靜態網頁產生器」(Static Site Generator)這樣的工具產生,加快我們的部落格架站速度。 2. 靜態網頁產生器 這篇「8 個靜態網頁產生器」整理了這些熱門架站工具:
  • Jekyll: Ruby
  • Hugo: Go
  • Gatsby: React
  • Next.js: React
  • Hexo: Node.js
  • Eleventy: Jekyll 的 JavaScript 替代品
  • VuePress: Vue.js
  • Nuxt.js: Vue.js
架站工具後面標示其使用的語言或框架,接下來說明我的選擇。 3. 為何選擇 Hexo 我在「使用 Node.js 爬蟲定期抓網頁資料,結合 Google 試算表作為資料庫」曾提過 "選擇 Node.js...並搭配 Google 試算表...只要學會 Javascript 就能通吃「前端+後端+資料庫」",所以在眾多靜態網頁架站工具中,我自然要挑以 JS 作為開發環境的 Hexo 或 Eleventy,日後自己修改原始碼才方便。 而經由這篇「靜態網站產生器大比拚」的分析,Hexo 跟 Eleventy 相比的優點有:
  • 比較知名、較多人使用
  • 社群討論多,華語使用者相當多
  • 主題很多
挑選工具最重要的一點是,越多人使用,將來遇到問題才比較容易找到答案,所以對我來說 Hexo 就是首選。而且 Hexo 作者(Tommy Chen) 來自台灣,Hexo 官網 有完整的中文說明頁面,真的沒什麼不用他的理由!

三、如何選擇網站託管平台

1. GitHub Pages 的侷限 開始使用 GitHub Pages 之前,需要了解免費的前提下有哪些限制,可參考官方文件「GitHub Pages 使用限制」,以下列出比較重要的幾點:
  • 公開儲存庫才能使用 GitHub Pages
  • 不可商業使用
  • 檔案上傳空間限制為 1GB
  • 每月傳輸頻寬為 100 GB
  • 每小時部署次數上限 10 次
GitHub 最初的用意即為提供公開原始碼的儲存空間,所以自然上傳的檔案得公開,才允許使用 GitHub Pages 架設網站。基本上這些限制對於一般部落格型態的網站,應該都沒什麼問題,所以如果都能接受的話,就可使用 GitHub Pages 架站,並跳過此章節。 但如果網站檔案有些不想被看到,或是想要有更多的流量,那麼請繼續往下看要如何繞過 Github 的限制。 2. 可佈署 GitHub 的網站託管平台 除了 GitHub 之外,還有很多知名的網站託管平台,例如 Google、Amazon 都有提供對應的服務。且如前所述,由於 GitHub 是這些平台之中最大、最知名的,所以基本上各大網站託管平台都支援 GitHub。意思就是說,在 GitHub 建立的儲存庫(repository),幾乎都能直接匯入各大網站託管平台,並且可以同步。 這篇「各大免費託管平台體驗有感」介紹了三個可以佈署 GitHub 的知名平台 Netlify、Cloudflare Pages、Vercel 及大致的免費使用限制。 大致比較一下後,Google 收購的 Firebase Hosting,以及亞馬遜(AMAZON)的 AWS Amplify,免費使用的條件比較以上三個差,而其他沒那麼知名、使用者較少的平台就先略過,那麼先整理一下這三個平台的限制條件及優缺點。 3. Netlify Netlify 免費版功能可參考官網「Pricing」頁面:
  • 每月傳輸頻寬為 100 GB
  • 每月佈署時間 300 分鐘
100 GB 對一個網站應該沒問題,如果有多個網站就要計算一下了。除此之外還有很多強大的功能,例如有帳號管理功能(免費版可5個帳號登入),需要多人協作後台的話,Netlify 會是首選,之後會另外發文介紹 Netlify。 4. Vercel Vercel 免費版功能可參考官網「Limits」頁面:
  • 每月傳輸頻寬為 100 GB
  • 每月佈署時間 100 小時
傳輸頻寬 100 GB 應該也是一個帳號的所有網站總合,大部分的限制看起來比 Netlify 還要好,也是值得考慮的選擇。 5. Cloudflare Pages Cloudflare Pages 免費版功能可參考「開發人員平臺」頁面 →「Cloudflare 頁面」: github-page-hexo-cloudflare-blogger-alternative-1.jpg-為何我選擇 GitHub Page + Hexo + Cloudflare 作為 Blogger 替代品 看到上面這張圖了嗎,真是太離譜了,Cloudflare 是比前兩家知名度更大的公司,網站不但有中文界面,而且免費版的限制更優渥——完全沒有限制! 可以建立無限的網站,而且每個網站都有無限的頻寬,這樣下來根本沒什麼好比較,沒什麼好考慮,Cloudflare Pages 就是首選啦~

四、如何匯入 Blogger 文章格式

github-page-hexo-cloudflare-blogger-alternative-2.jpg-為何我選擇 GitHub Page + Hexo + Cloudflare 作為 Blogger 替代品 平台問題都解決後,接下來要研究如何將 Blogger 文章轉換為 Hexo 能讀取的格式。在 Hexo 官網「Plugins」有看到兩個相關工具,之後撰寫 Hexo 系列文章時會再說明。

五、如何處理後台編輯、協作問題

1. 本地後台編輯 官網提供的外掛之中有個「Hexo Admin」可以進行後台編輯,但只能從本地 localhost 執行。如果沒有特別用途,也許這樣就夠用,那麼就可以跳過這個章節的剩餘部份。 2. 雲端後台編輯 如果希望比較有機動性,在各處有網路的環境就能上網進後台編輯,而非只在自己電腦才能作業,那麼得為 Hexo 安裝 CMS 後台管理功能。因為網站架在 GitHub,可選擇「git-base CMS」(基於 git 的內容管理系統),這篇「9 best Git-based CMS platforms」介紹了 9 個知名的工具,雖是英文頁面但可翻成中文看說明。 直接說結論,挑選原則如前所述,越多人使用的越好,「Decap CMS」是免費開源專案,有龐大的社群討論,遇到問題容易找答案,其前身就是非常知名的 Netlify CMS。後來母公司 Netlify 決定專心做「網站託管平台」這一塊,乾脆把 Netlify CMS 獨立出去,之後才改名為 Decap CMS。 3. 多人協作後台 如果除了上網編輯後台,還希望多人協作的話,就可選擇 Decap CMS(Netlify CMS) 配合 Netlify,使用其特有的 Netlify Identity 服務,管理最多 5 個使用者(免費版)。 因為兩者原本是同一家,Decap CMS 官網說明文件甚至有「搭配 Netlify Identity」的操作說明,是多人協作最簡便的方案。

六、如何自動備份網站

Github 提供了一個自動執行的工具「GitHub Actions」,可以設定在 "執行特定動作時" 觸發一連串動作,也可以設定 "定時執行"。 那麼要自動備份網站,就可利用 GitHub Actions 定時執行 "複製儲存庫的檔案" 到指定位置即可。 其他需要注意的地方,可參考「Github Action 經驗分享」,例如私有儲存庫每月執行時間為 2000 分鐘。

七、Hexo 安裝

開始 Hexo 架站之前需要決定、研究的主要問題有以上這些,找出解決方案後終於可以開始正式架站,而過程中需要解決的問題,數量及耗費時程又是遠遠超過本篇的內容,將會另外撰寫系列文章作為紀錄。
更多 Hexo 相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP