這個部落格主要用來記錄技術相關的內容，這次也順便記錄一下安裝 Hexo 的過程。很多人會直接部署到 GitHub Pages，但我不太喜歡，因為需要把倉庫公開。為了避免這個問題，我們使用 GitHub 進行 Hexo 的版控，並設定 Vercel 自動監測倉庫分支。當 master 分支有更新時，Vercel 會自動構建靜態網頁並部署，這樣就能在不公開倉庫的情況下使用免費空間。

至於圖片上傳，我們選擇了 PicList 搭配 Cloudflare R2。PicList 是個免費工具，用起來挺方便，而 R2 是 Cloudflare 提供的物件儲存服務，低用量的情況基本免費，正好解決了圖片管理的麻煩事。這樣的組合讓整個流程更加流暢，不用再為圖片存放而頭疼。

安裝平台

  • 版控：GitHub
  • 部屬：Vercel 免費靜態網頁平台，分支進master後，自動從GitHub部屬
  • 圖片平台：Cloudflare R2
  • 圖片上傳工具：PicList
  • 購買網域：namecheap

Hexo簡介

好吧，來聊聊 Hexo。這是一個快速、簡單的靜態部落格框架，適合那些不想被繁瑣設定搞瘋的人。你只需要 Node.js 就能搞定，然後用 Markdown 寫文章，Hexo 會幫你生成靜態頁面。簡單來說，它就是讓你專注寫作，而不是被技術細節拖累。當然，想折騰的話，還有一堆插件和主題可以玩，讓你部落格不再千篇一律。

Hexo安裝紀錄

確保有安裝node.js

Node.js 為大多數平台提供了官方的 安裝程序。

其它的安裝方法：

Windows：通過 nvs（推薦）或者nvm 安裝。
Mac：使用 Homebrew 或 MacPorts 安裝。
Linux（DEB/RPM-based）：從 NodeSource 安裝。

官方安裝連結
https://nodejs.org/en/download/package-manager

安裝 Hexo

一旦所有的必備軟體都安裝完畢後，即可透過 npm 安裝 Hexo：

安裝CLI

1
$ npm install -g hexo-cli

下指令CD，移動到你想要放傳案的目錄，使用以下指令建立專案。

1
$ hexo init 專案名稱

專案建立完成後就可以使用Visual Studio Code開啟。

安裝需要的npm套件。

1
$ npm install

設定 Hexo

在專案目錄中，找到 _config.yml 檔案，並進行以下設定：

  1. 網站基本設定

    1
    2
    3
    4
    5
    title: Your Blog Title
    subtitle: Your Blog Subtitle
    description: A brief description of your blog
    author: Your Name
    language: zh-Hant

  2. 生成靜態檔案
    完成設定後，使用以下指令生成靜態檔案：

    1
    $ hexo generate

  3. 啟動本地伺服器
    使用以下指令啟動本地伺服器以預覽網站：

    1
    $ hexo server

  4. 訪問本地網站
    打開瀏覽器，訪問 http://localhost:4000 以查看您的網站。

主題安裝及設定 Butterfly

主題選擇就見仁見智，個人偏好Butterfly。

使用npm安裝

1
$ npm install hexo-theme-butterfly --save

更改主題
更改 _config.yml 檔案中的主題設定：

1
theme: butterfly

到以下路徑 

1
node_modules/hexo-theme-butterfly/_config.yml

把_config.yml檔複製到根目錄，重新命名為_config.butterfly.yml
之後主題的設定調整，一律調整_config.butterfly.yml

自定義主題設定

在 _config.butterfly.yml 檔案中，您可以進行以下自定義設定：

  1. 顏色主題 
    1
    2
    3
    colors:
      primary: '#ff5733'
      secondary: '#33c1ff'
  2. 字體設定 
    1
    2
    3
    font:
      family: 'Arial, sans-serif'
      size: '16px'
  3. 社交媒體連結 
    1
    2
    3
    social:
      github: 'https://github.com/yourusername'
      twitter: 'https://twitter.com/yourusername'
  4. 自定義頁面
    您可以新增自定義頁面，例如關於我、聯絡我等： 
    1
    2
    3
    pages:
      about: 'about.md'
      contact: 'contact.md'
    完成設定後，記得重新生成靜態檔案並啟動伺服器以查看變更：
    1
    2
    $ hexo generate
    $ hexo server
    設定詳情參考官網說明
    https://butterfly.js.org/posts/4aa8abbe/

版控及部屬

推送到GitHub

在完成Hexo的設定後，您可以將專案推送到GitHub。請按照以下步驟操作：

  1. 初始化Git倉庫
    在專案目錄中，使用以下指令初始化Git倉庫：

    1
    $ git init

  2. 添加遠端倉庫
    將您的GitHub倉庫添加為遠端倉庫：

    1
    $ git remote add origin https://github.com/yourusername/your-repo.git

  3. 添加檔案到暫存區
    將所有檔案添加到Git的暫存區：

    1
    $ git add .

  4. 提交變更
    提交您的變更並添加提交訊息：

    1
    $ git commit -m "Initial commit"

  5. 推送到GitHub
    將您的變更推送到GitHub的主分支：

    1
    $ git push -u origin master

完成以上步驟後，您的Hexo專案將成功推送到GitHub上。

自動部屬至 Vercel

在將專案推送到GitHub後，您可以設定Vercel自動部屬。請按照以下步驟操作：

  1. 註冊 Vercel 帳號
    前往 Vercel 官網 註冊一個帳號。

  2. 連接 GitHub
    登入後，點擊「New Project」，然後選擇「Import Git Repository」。連接您的GitHub帳號，並選擇您剛剛推送的Hexo專案。

  3. 設定專案
    在專案設定頁面，您可以選擇要使用的分支（通常是 master 或 main），並設定環境變數（如需要）。

  4. 部署設定
    Vercel會自動檢測您的專案並提供預設的部署設定。確認設定無誤後，點擊「Deploy」按鈕。

  5. 自動部屬
    每當您將變更推送到指定的GitHub分支時，Vercel將自動重新部署您的網站。您可以在Vercel的儀表板上查看部署狀態和日誌。

完成以上步驟後，您的Hexo專案將自動部屬至Vercel，並隨時保持最新狀態。

圖片上傳方案

讓我們談談圖片上傳。PicList 是個方便的工具，支援多種圖床上傳，還能搞定 S3 的上傳。這就讓我們的圖片管理變得不再麻煩。至於 Cloudflare R2，它是一個相容 S3 的物件儲存服務，搭配 PicList 使用，圖片上傳和管理都變得輕鬆簡單。

想知道更多？看看這些連結：

PicList GitHub 頁面
Cloudflare R2

PicList + Cloudflare R2 整合

使用 PicList 進行圖片上傳時，您可以將 Cloudflare R2 作為存儲後端。以下是整合的步驟：

1. 註冊 Cloudflare 帳號

前往 Cloudflare 官網 註冊一個帳號。

2. 創建 R2 存儲桶

在 Cloudflare 儀表板中，選擇 R2，然後創建一個新的存儲桶，設為公開。

3. 獲取 API 金鑰

在 Cloudflare 的 API 設定中，生成一個 API 金鑰，並記下您的帳號 ID 和存儲桶名稱。

4. 配置 PicList

打開 PicList 的 GUI 設定，選擇 AWS S3 作為提供者，然後填入您的 Cloudflare R2 資訊：

  • 圖床配置名：隨意
  • AccessKeyId：從 Cloudflare R2 建立 API 權杖中找到設定值
  • SecretAccessKeyId：從 Cloudflare R2 建立 API 權杖中找到設定值
  • Bucket：從 Cloudflare R2 建立的存儲桶名稱
  • 上傳路徑：{year}/{month}/{md5}.{extName}
  • 自定義節點：輸入 R2 S3 API
  • 自定義網址：輸入公用 R2.dev 存儲桶 URL

這樣就可以輕鬆搞定上傳設定！
就可透過GUI輕鬆上傳圖檔。

5. 上傳圖片

使用 PicList 的 CLI 工具或GUI介面上傳圖片，這些圖片將自動存儲到 Cloudflare R2。

6. 訪問圖片

上傳後，您可以通過 Cloudflare R2 提供的 URL 訪問您的圖片。

通過上述步驟，您就可以利用 PicList 和 Cloudflare R2 進行高效的圖片上傳和管理。