[Hexo] 使用 Hexo + GitHub Pages 架設個人 Blog

發表於 更新於

什麼是 Hexo？

Hexo 是一款基於 Node.js 的靜態網站生成器，以簡單、快速且強大的設計聞名。它特別適合用於建立技術部落格或個人網站，透過支援 Markdown 語法，讓使用者可以輕鬆撰寫並發佈內容。此外，Hexo 提供了大量的佈景主題和外掛，讓網站能快速打造個性化的外觀與功能。

什麼是 Github？

GitHub 只要是工程師就一定不陌生，它是是目前全球最受歡迎的程式碼託管與版本控制平台，主要用於儲存和管理軟體開發專案。它結合了 Git 的版本控制功能與社群協作工具，讓開發者可以輕鬆管理程式碼、追蹤變更，並與其他開發者合作完成專案。

為什麼選擇 Github 搭配 Hexo 來建立個人網站？

選擇 GitHub 搭配 Hexo 來建立個人網站是一個非常受歡迎的組合，因為它具備多項優勢，特別適合技術 Blog 或簡單的個人網站。以下是主要原因和優勢：

  1. 免費的網站託管服務

    GitHub Pages 提供免費的網站託管，特別適合靜態網站（如 Hexo 生成的網站）。

    • 成本低：不用支付伺服器費用，只需擁有一個 GitHub 帳號即可啟用。
    • 簡單易用：只需將網站的靜態檔案部署到 GitHub Pages，系統會自動生成並上線網站。

  2. Hexo 使用簡單

    Hexo 是一款輕量級、速度快的靜態網站生成器

    • 支援 Markdown：用戶可以用簡單的 Markdown 語法撰寫文章，大幅提高寫作效率。
    • 生成速度快：即使是大量的文章，Hexo 也能快速生成靜態檔案。
    • 可擴展性強：提供多種佈景主題與外掛，可以輕鬆定製網站功能和外觀。

  3. GitHub 與 Hexo 的完美結合

    Git 的版本控制功能

    • 在開發網站時，Git 的版本控制可以幫助管理每次變更。
    • 如果不小心修改錯誤，Git 可以讓你快速恢復到之前的版本，降低風險。

    部署流程簡單

    • Hexo 提供 hexo deploy 指令，搭配 Hexo 的 Git 部署外掛，網站的靜態檔案可以一鍵部署到 GitHub Pages，非常方便。

  4. 穩定與安全

    GitHub Pages 的穩定性和安全性是許多其他託管平台無法比擬的：

    • 高可靠性：GitHub 使用全球分佈的伺服器，確保網站在全球各地的訪問速度與穩定性。
    • 自動 SSL 憑證：所有 GitHub Pages 網站都自動配置了 HTTPS，確保網站的安全性。

  5. 擁有專屬的域名與作品展示

    • GitHub Pages 支援自定義域名，讓你擁有一個專屬的網站地址（如 yourname.com）。不過需要另外購買。
    • 透過 Hexo，能輕鬆建立作品集、技術部落格或個人品牌網站，展示技能與成果，特別對求職和建立專業形象非常有幫助。

安裝前的準備工具

在開始安裝 Hexo 之前，需要先準備以下工具：
1. Git：版本控制工具，用於管理專案代碼並進行部署。
2. NVM（Node Version Manager）：一個 Node.js 的版本管理工具，方便切換不同版本的 Node.js。
3. Node.js：Hexo 是基於 Node.js 的，因此需要安裝這個環境。建議使用 NVM 安裝，確保可以輕鬆切換 Node.js 的版本。
4. Visual Studio Code：一款熱門的編輯器，用於編輯和管理 Hexo 專案中的檔案。可安裝 Markdown 也可以使用其他的文字編輯工具取代

安裝 Hexo

準備好上述工具後，開啟終端機，透過 npm 安裝 Hexo：

1
$ npm install hexo-cli -g

安裝完成後，你可以透過使用以下指令確認 Hexo 是否已正確安裝。

1
$ hexo -v

建立 GitHub 專案

Hexo 預設支援將靜態網站部署到 GitHub Pages，因此你需要先建立一個 GitHub Repository：

  1. 登入 GitHub。
  2. 點擊右上角的「+」按鈕，選擇 New repository。
  3. 輸入專案名稱（例如：username.github.io），一定要是 .github.io 結尾
  4. 選擇「Public」，並點擊 Create repository。

建立 Hexo 專案

在 GitHub Repository 建立好後，按照以下步驟建立並初始化 Hexo 專案：

  1. 使用 Git 將 repository clone 到本機：

    1
    $ git clone git@github.com:sshdennis/sshdennis.github.io.git
    • sshdennis 記得替換掉

  2. 初始化 Hexo 專案：

    1
    2
    $ hexo init sshdennis.github.io
    $ cd sshdennis.github.io

  3. 安裝所需的套件：

    1
    $ npm install

  4. 啟動 Hexo server 並預覽網站：

    1
    $ hexo server

  5. 安裝 Hexo 部署外掛，方便將網站內容推送到 GitHub Pages：

    1
    $ npm install hexo-deployer-git --save

  6. 清理 cache 並 deploy 網站到 GitHub Pages：

    1
    $ hexo clean && hexo deploy

Hexo 資料夾與檔案

Hexo 的專案資料夾包含多個重要目錄與檔案：

  • _config.yml
    • 主配置檔案，用於設定網站資訊、路徑與外掛等。
  • source/
    • 存放網站內容，如文章與頁面。
  • public/
    • 網站的靜態檔案，部署時會生成此目錄內容。

Hexo theme 佈景主題

Hexo 提供了多種佈景主題，讓你的網站可以有不同的風格與功能。以下是兩個熱門的選擇：

  • Butterfly
    • 設計精美且功能強大，適合用於技術部落格。
    • 提供詳細的安裝與配置文件，適合新手快速上手。
  • NexT
    • 簡約大方的設計，功能模組化，方便進行客製化調整。
    • 支援多種社群分享按鈕與外掛。

結語

Hexo 是一款高效又靈活的靜態網站生成器，不論你是想建立一個技術部落格，還是個人作品集，Hexo 都能滿足需求。希望這篇教學能幫助你快速上手，打造屬於自己的網站！如果你還有其他問題或需求，歡迎在留言區分享你的想法！