在這個網路發達的時代，擁有一個個人部落格不僅是一種自我表達的方式，更是分享知識和經驗的平臺。本系列的教學文章將使用 Hexo，基於 Node.js 的靜態網站生成器，利用條列式的步驟帶著初學者一步一腳印，從頭開始打造一個屬於自己的部落格。
此次教學要來講解如何設置 Hexo 的開發環境，以及怎麼創建出第一個 Hexo 專案，此教學系列適用於 Windows 系統。

---

[TOC]

---

## 一、Hexo 簡介：
Hexo 是一個基於 Node.js 的快速、簡單且強大的靜態網站產生工具，主要用於創建個人網誌。它以極高的生成速度著稱，短時間內就能將數百篇文章編譯為網頁。透過使用 Markdown 撰寫文章，讓創作者可以專注於文章內容本身，而無需花費過多時間在排版和格式處理上。

此外，Hexo 擁有豐富的插件和主題，允許使用者創建出屬於自己獨一無二風格的網站。並且 Hexo 生成的靜態網站可以輕鬆部署到各種平台，如 GitHub Pages、Netlify 或其他任何支援靜態網站托管的服務。

更多 Hexo 相關資訊可以查看 [Hexo 官方文件](https://hexo.io/zh-tw/docs/)。

## 二、Hexo 開發環境設置：
### 文字編輯器
挑選一個順手的文字編輯器即可，比如 Vim、Visual Studio Code、Notepad++、Windows 內建記事本等等。筆者常用的文字編輯器是 Visual Studio Code。

### Node.js
1. 前往 [Node.js](https://nodejs.org/en) 官網，點擊首頁下載 LTS 長期支援版本，Hexo 官網建議選擇 Node.js 10.0 及以上版本。

2. 開啟 Node.js 的安裝檔，點擊 Next 按鈕，接著勾選同意選項，點擊 Next 按鈕。

3. 選擇 Node.js 要安裝的位置，使用預設安裝位置即可，點擊 Next 按鈕。

4. 使用預設設定即可，接著點擊 Next 按鈕。

5. 不勾選安裝必要的工具選項，直接點擊 Next 按鈕。

6. 確認安裝設定都沒問題的話，點擊 Install 按鈕開始 Node.js 的安裝作業。

7. Node.js 安裝成功後，點擊 Finish 按鈕結束安裝檔。

8. 開啟終端機之後，執行 `node -v` 或 `node --version` 指令，正常顯示 Node.js 版本的話，代表安裝成功，如果沒有顯示，可以重新開機電腦再試試看。

### Git
1. 前往 [Git](https://git-scm.com/) 官網，點擊首頁 Download for Windows 按鈕前往下載頁面，點擊 Click here to download 下載最新版的安裝檔。

2. 開啟 Git 的安裝檔，點擊 Next 按鈕。

3. 選擇 Git 要安裝的位置，使用預設安裝位置即可，點擊 Next 按鈕。

4. 根據自己的需求勾選設定選項，如果沒有特別需求的話，使用預設安裝設定即可，點擊 Next 按鈕。

5. 根據自己的需求更改 Git 資料夾在 Windows 開始選單顯示的名稱，點擊 Next 按鈕。

6. 根據自己的習慣選擇文字編輯器，這邊選擇筆者常用的 Visual Studio Code，點擊 Next 按鈕。

7. 建議選擇下面的選項，因為目前的開發者、社群和開發平臺逐漸使用 main 取代 master 當作初始分支名的名稱，改名的原因可以[閱讀此篇文章](https://www.theserverside.com/feature/Why-GitHub-renamed-its-master-branch-to-main)，接著點擊 Next 按鈕。

8. Git 的 Path 路徑設定，選擇中間的建議選項即可，點擊 Next 按鈕。

9. 除非自己有特殊的需求，接下來使用預設的設定即可，重複點擊 Next 按鈕。

10. 確認安裝設定都沒問題的話，點擊 Install 按鈕開始 Git 的安裝作業。

11. Git 安裝成功後，點擊 Finish 按鈕結束安裝檔。

12. 開啟終端機之後，執行 `git -v` 或 `git --version` 指令，正常顯示 Git 版本的話，代表安裝成功，如果沒有顯示，可以重新開機電腦再試試看。

## 三、Hexo 安裝：
1. 開啟終端機之後，輸入下面指令來安裝 Hexo。

    npm install -g hexo-cli


2. 執行 `hexo -v` 或 `hexo version` 指令，正常跑出 Hexo 相關資訊的話，代表安裝成功。

## 四、Hexo 初始專案：
:::info
:bell: **知識補給**
在終端機中，想要更改資料夾的位置時，需使用 `cd` 指令。
終端機開啟預設會是 `C:\Users\username` 用戶資料夾，也就是存放檔案總管中常見的桌面、下載、圖片、影片等等資料夾的地方。

# 【相對路徑】更改位置到 Downloads 資料夾
cd Downloads
# 【絕對路徑】更改位置到 Program Files 資料夾
cd C:\Program Files

:::

1. 選擇一個要來儲存 Hexo 專案的資料夾，執行下面的指令創建 Hexo 專案。

    hexo init [folder name]


2. 使用 `cd` 指令進入到剛創建好的專案資料夾。

    cd [folder name]


3. 執行下面的指令安裝 Hexo 所需要的套件。

    npm install


## 五、Hexo 運行伺服器：
1. 執行下面的指令，運行 Hexo 伺服器，如果要終止運行按 `Ctrl + C` 組合鍵。

    hexo server


2. 開啟瀏覽器前往 [http://localhost:4000/](http://localhost:4000/)，就能看到 Hexo 運行成功而顯示的首頁囉。

---

此篇教學到此告一個段落，讓我們一起為 Hexo 能夠正常運行感到快樂！但目前我們的部落格只能自己的電腦本地瀏覽，因此下次的教學將會講解如何將 Hexo 上架到 GitHub Pages 運行，讓世界各地的人們都能瀏覽您的部落格。
如果在學習過程中遇到什麼問題，歡迎加入 Discord 伺服器來討論、詢問問題。

---

:::info
📢 **歡迎加入我的 Discord 伺服器**
https://discord.gg/Jtd3eVrFJs
:::
*Copyright © 2024 SmallShawn95. All rights reserved.*