節能省碳救荷包

  一直以來都是用 Wordpress 寫部落格,也沒有什麼不好,一切都很方便。不過最近在出清一些家裏的 3C 產品時,原本當作伺服器的 Mac mini 被我賣掉了!就在轉移 Wordpress 的過程中,忽然覺得是該嘗試一下靜態部落格了,節能省碳救荷包!

優點

  1. 免費
  2. 簡單
  3. 備份維護方便
  4. 可以從 Wordpress 匯入
  5. Theme 很多
  6. 發起人是臺灣人

架設教學

  基本上沒什麼好寫的,網路上很多。不過,網路上多數都是用 PC 當作管理的工具。然而,我主要的生產力工具是 iPad,所以官方教學不適合我。這邊記錄一下我與教學不同的地方。

iPad 的限制

  首先,iPad最大的限制來自 Node.js,也就是說在 iPad 上要編譯靜態頁面是很困難的,這也是我選擇 Netlify 的原因,他可以從 Github 取得 Code 直接 Deploy。並且,每一次有 Pull 更新,他都會自動的在做一次 Depoly 的動作。這樣的結果就是,我只需要在 iPad 對 GitHub 修改然後 Commit,Netlify就會開始自動部署產生更新!

建立流程

  1. 安裝 hexo-cli(需要 Node.js、Git),參考官方教學
  2. 然後用 hexo init 建立 Blog
  3. 執行 Hexo server,確認可以部落格是正常可以執行的
  4. 把整個 Blog 的資料夾傳到 GitHub(不要用 Hexo deploy!上傳 Sources Code)
  5. Netlify 中選擇 “Import an existing project from a Git repository”
  6. 選擇剛剛的 GitHub repository,注意 Build command 要設定成 hexo generate(如圖)Netlify Deploy
  7. 依照需要設定自己要的 Domain

自定義

  首先,先找一個喜歡的 Theme,我是用 hexo-theme-butterfly 這個。然後他有很多很多的自定義選項可以設定。建議新建檔_config.butterfly.yml,然後複製它的_config.yml內容到裏面,這樣就有所有的設定,以後可以慢慢的修改。下面我記錄一些比較重要的。

設定

  1. 設定首頁文章顯示摘要 index_post_content:
  2. 設定版權的網址顯示中文 post_copyright: decode: true
  3. 設定首頁圖片 index_img:
  4. 設定首頁的打字效果 subtitle:
  5. 設定中文字形 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 中的點擊率,優先將大家有興趣的文章轉移。初步看了一下,原來大家都需要翻牆啊!