紀錄學習-使用Hexo架設部落格 (1) 使用Github Page從無到有

話說在前

以前一直都用Wordpress來紀錄，但功能實在太多了，有時想要一個簡潔的版面、程式碼的呈現設定等等都蠻麻煩的（抱頭）。

後來發現Notion後，編輯排版都用markdown來做，非常方便。加上現在Notion AI 在編輯上如虎添翼，連要打的字都變少了。

身為教師，還是希望自己的學能轉成教，能放上網路上就有機會幫助到人，又不用花自己太多時間的前提下，剛好看到了Hexo這個工具，跳進來使用看看。

網路教學很多，幾個目標先在開始前做個文章主要總整：

使用Github Page免費架站

使用客製化的網址

使用Google Ads和Google Analysis，做廣告獎勵與追蹤

使用Notion編輯，加速部落格文章管理與撰寫

利用Github action自動完成CI/CD，減少不必要動作

什麼是Hexo

Hexo是一個快速、簡單且強大的靜態部落格框架

支援使用Markdown（或其他模板語言）來編寫內容

支援一鍵佈屬

基本流程如下：設定開發環境→在本地端設定Hexo→設定基本內容→客製主題→上線

設定開發環境

Node.js

Visual Studio Code

Hexo初始設定

Node.js 是一個開源的 JavaScript 執行環境，它包含了 npm（Node Package Manager）這個套件管理工具。

所以下載安裝Node.js完後可以使用 npm 來安裝和管理你的 JavaScript 套件了。

在你的本地計算機上安裝Hexo，你可以通過運行以下命令安裝：
shell
```
npm install -g hexo-cli
```

創建一個新的Hexo Blog，運行以下命令：

shell

hexo init blog //當前路徑，建立blog這個資料夾，初始化hexo

cd blog // 移動至資料夾

設定基本內容

先記錄一下初始化後的幾個後修改的，資料夾架構：

.
├── _config.yml
├── scaffolds
├── source
|   ├── _posts
|   └── .gitkeep
└── themes

_config.yml: Hexo的主要配置文件，包含了部落格的設定信息，如標題、語言、主題等。

scaffolds: 存放預設的文章範本，當你創建新文章時可以使用這些範本。

source: 存放所有的文章內容，包括草稿(_drafts)和已發佈(_posts)的文章。

themes: 存放部落格的主題文件，可以根據需求選擇不同的主題來美化部落格的外觀。

設定步驟

打開 _config.yml (為最外層總網站的配置)，修改網站基本資訊

shell

# Site
title: 阿盧老師Coding嚕
subtitle: 程式、新興科技、教育
description: '' #用於SEO
keywords: #用於SEO
author: 阿盧
language: zh-TW
timezone: 'Asia/Taipei'

挑選想要的主題-以Fluid為例（可以未來再處理）

主題(Themes)在官方，可從此處挑選： https://hexo.io/themes/index.html

有人整理了比較紅的主題，比較多建置教學，也比較多中文教學

https://github.com/FoxerLee/awesome-hexo-themes

挑選完後，我以fluid(https://github.com/fluid-dev/hexo-theme-fluid)為主：

shell

cd blog\\themes

透過clone的方式將主題複製到資料夾中

shell

git clone <https://github.com/fluid-dev/hexo-theme-fluid.git>

<aside> 💡 themes/fluid/_config.yml:設定主題相關，在剛開始不要和最外層的_config.yml搞混了

</aside>

修改總站的_config.yml，對應到fluid這個主題

shell

# Extensions
## Plugins: <https://hexo.io/plugins/>
## Themes: <https://hexo.io/themes/>
theme: fluid

修改themes/fluid/_config.yml，可參考用戶手冊： https://fluid-dev.github.io/hexo-fluid-docs/guide/#关于指南

用以下指令確定，在本地端測試是否成功

shell

hexo clean //清除快取
hexo g //生成靜態檔案
hexo s //啟動local端伺服器

設定Github Page並上線

在 Github官網上建立一個新的 Repository，Repository 名稱為 <你的使用者名稱>.github.io，例如 johnsmith.github.io。

在本地端，進入 Hexo Blog 資料夾，修改 _config.yml 檔案。
yaml
```
deploy:
  type: git
  repo: git@github.com:<你的使用者名稱>/<你的使用者名稱>.github.io.git
  branch: master
```
確認 repo 的連結正確，將 <你的使用者名稱> 替換成你的 GitHub 使用者名稱。

安裝部署相關的套件，執行以下指令。
shell
```
npm install hexo-deployer-git --save
```

部署 Hexo Blog 到 GitHub Page，執行以下指令。
shell
```
hexo deploy
```
等待部署完成後，你的 GitHub Page 就已經建立完成了。

在瀏覽器中開啟 <你的使用者名稱>.github.io，你應該能夠看到你的 Hexo Blog 網站了。

話說在前

什麼是Hexo

設定開發環境

Hexo初始設定

設定基本內容

挑選想要的主題-以Fluid為例（可以未來再處理）

設定Github Page並上線

版權聲明