Hexo + Netlify 打造完全免費的部落格
節能省碳救荷包
一直以來都是用 Wordpress 寫部落格,也沒有什麼不好,一切都很方便。不過最近在出清一些家裏的 3C 產品時,原本當作伺服器的 Mac mini 被我賣掉了!就在轉移 Wordpress 的過程中,忽然覺得是該嘗試一下靜態部落格了,節能省碳救荷包!
優點
- 免費
- 簡單
- 備份維護方便
- 可以從 Wordpress 匯入
- Theme 很多
- 發起人是臺灣人
架設教學
基本上沒什麼好寫的,網路上很多。不過,網路上多數都是用 PC 當作管理的工具。然而,我主要的生產力工具是 iPad,所以官方教學不適合我。這邊記錄一下我與教學不同的地方。
iPad 的限制
首先,iPad最大的限制來自 Node.js,也就是說在 iPad 上要編譯靜態頁面是很困難的,這也是我選擇 Netlify 的原因,他可以從 Github 取得 Code 直接 Deploy。並且,每一次有 Pull 更新,他都會自動的在做一次 Depoly 的動作。這樣的結果就是,我只需要在 iPad 對 GitHub 修改然後 Commit,Netlify就會開始自動部署產生更新!
建立流程
- 安裝 hexo-cli(需要 Node.js、Git),參考官方教學
- 然後用 hexo init 建立 Blog
- 執行 Hexo server,確認可以部落格是正常可以執行的
- 把整個 Blog 的資料夾傳到 GitHub(不要用 Hexo deploy!上傳 Sources Code)
- 在 Netlify 中選擇 “Import an existing project from a Git repository”
- 選擇剛剛的 GitHub repository,注意 Build command 要設定成 hexo generate(如圖)
- 依照需要設定自己要的 Domain
自定義
首先,先找一個喜歡的 Theme,我是用 hexo-theme-butterfly 這個。然後他有很多很多的自定義選項可以設定。建議新建檔_config.butterfly.yml,然後複製它的_config.yml內容到裏面,這樣就有所有的設定,以後可以慢慢的修改。下面我記錄一些比較重要的。
設定
- 設定首頁文章顯示摘要 index_post_content:
- 設定版權的網址顯示中文 post_copyright: decode: true
- 設定首頁圖片 index_img:
- 設定首頁的打字效果 subtitle:
- 設定中文字形 font: font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, “Helvetica Neue”, Lato, Roboto, “PingFang TC”, “Microsoft JhengHei”, sans-serif
後記
本來想直接匯入 Wordpress 的文章,結果強迫症犯了,轉移會在整理媒體庫的同時慢慢進行。畢竟免費的 Netlify 是有 100G 的頻寬限制。所以後面打算好好的用我的 OneDrive 當作圖床,他可是有 1T 的空間啊!
同時,轉移的順序會參考 Google Search Console 中的點擊率,優先將大家有興趣的文章轉移。初步看了一下,原來大家都需要翻牆啊!