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

作者從繁瑣的Wordpress轉向利用Notion和Markdown編輯部落格，並發現Hexo這個工具相當便利。透過Hexo，作者輕鬆架設了靜態網站，還結合了Github Pages以及自動化流程工具CI/CD來減少工作量。此外，文章提供了詳細的教學步驟，讓讀者能快速跟進，並介紹了如何選擇和修改主題，使部落格訪客視覺上更愉悅。

話說在前

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

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

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

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

使用Github Page免費架站
使用客製化的網址
使用Google Ads和Google Analysis，做廣告獎勵與追蹤
使用Notion編輯，加速部落格文章管理與撰寫
利用Github action自動完成CI/CD，減少不必要動作

什麼是Hexo

Hexo是一個快速、簡單且強大的靜態部落格框架
支援使用Markdown（或其他模板語言）來編寫內容
支援一鍵佈屬

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

設定開發環境

Node.js
Git
Visual Studio Code

Hexo初始設定

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

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

在你的本地計算機上安裝Hexo，你可以通過運行以下命令安裝：
創建一個新的Hexo Blog，運行以下命令：

設定基本內容

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

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

_config.yml: Hexo的主要配置文件，包含了部落格的設定信息，如標題、語言、主題等。
scaffolds: 存放預設的文章範本，當你創建新文章時可以使用這些範本。
source: 存放所有的文章內容，包括草稿(_drafts)和已發佈(_posts)的文章。
themes: 存放部落格的主題文件，可以根據需求選擇不同的主題來美化部落格的外觀。

設定步驟

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

# 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)為主：

1 2	`cd blog\\themes`

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

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

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

# 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/#关于指南
用以下指令確定，在本地端測試是否成功

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

設定Github Page並上線

在 Github官網上建立一個新的 Repository，Repository 名稱為 <你的使用者名稱>.github.io，例如 johnsmith.github.io。
在本地端，進入 Hexo Blog 資料夾，修改 _config.yml 檔案。
安裝部署相關的套件，執行以下指令。
部署 Hexo Blog 到 GitHub Page，執行以下指令。
在瀏覽器中開啟 <你的使用者名稱>.github.io，你應該能夠看到你的 Hexo Blog 網站了。

部落格建置

#hexo #notion #blog

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

https://codinglu.tw/2021/12/seo-friendly-url-name-for-blog-post-=-'how-to-set-up-hexo-blog-with-github-page-for-beginners-notion-hexo-blog'/

作者

阿盧

發布於

2021年12月20日

許可協議

📌 本文瀏覽量： 0 次

使用Hexo架設部落格 (2) 熱力圖發文貢獻日誌上一篇