Hexo + Github 建立部落格

為什麼想要架設 Blog

身為一個工程師，不知不覺也工作了四年，工作上使用的套件不管是前端、後端、框架都越來越多，所以想記錄自己曾使用過的套件，要用的時候可以很快的查到。

建立自己的工具箱
累積屬於自己在技術專業知識品牌
可以作為作品集展示
另外想紀錄什麼都可以寫上去

為什麼選 Hexo

可以免費放在Github 上
可以選好看的主題
支援 Markdown (因為之前有在用 hackmd 紀錄文件)

查找到感覺最完整的架設教學文章是這篇

https://chanchandev.com/note/Hexo/hexo-introduction/2335841689/#%E7%82%BA%E4%BB%80%E9%BA%BC%E8%A6%81%E6%9E%B6%E8%A8%AD-Blog

所以就決定跟著來一起嘗試架設Blog

環境設定

NodeJs

https://nodejs.org/en

:::info
有用Node js 推薦也一起使用 nvm，因為有時候常常會遇到版本問題

https://github.com/coreybutler/nvm-windows/releases

選擇 nvm-setup 開始下載
:::

Git

https://git-scm.com/

Visual Studio Code (vs code)

https://code.visualstudio.com/

Hexo 設定

安裝 Hexo

1	npm install -g hexo-cli

建立 Hexo 專案

1 2	hexo init hexoblog

會產生一個 hexoblog 資料夾

1	cd hexoblog

啓動 Hexo 的伺服器

1	hexo server

接下來用瀏覽器打開 http://localhost:4000 就可以看到Hexo 的效果

要怎麼在在文章上放圖片呢

查看了各種教學後來決定先把文章圖片放在 HackMD上，再採用設定公開表的方式分享照片

選擇主題樣式

使用 Butterfly 主題樣式

另外可以選擇其他樣式

https://hexo.io/themes/

因為是我參考 ChanChanDev 圈圈工程師寫的這篇文章實作的，比較起來我也感覺 Butterfly 這個主題最好看

方法一

下載 Butterfly 主題及配件

1
2
3

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
npm install cheerio@0.22.0 --save
npm install hexo-renderer-pug hexo-renderer-stylus --save

下載完成後，在 .\Desktop\mywebsite\githubBlog\themes 裡，會看見多了個名叫 Butterfly 的 folder。

更改主題:開啓這個文件 .\githubBlog_config.yml，把主題改為 Butterfly

1	theme: Butterfly

參考官方教學:https://butterfly.js.org/posts/21cfbf15/#%E5%AE%89%E8%A3%9D

另外這個方式會遇到以下問題

這個警告表示你正在將另一個 git 儲存庫添加到當前的 git 儲存庫中。也就是說在我們原本的部落格git專案裡面還有別的git專案

可以用以下方式解決

1 2	git rm -f --cached themes/Butterfly git submodule add https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

第一個命令會從索引中刪除 themes/Butterfly，第二個命令則將其重新添加為子模組。這樣做後，Git 應該能正確處理 themes/Butterfly。

方法二 (這方法有個問題就是在 themes/ 底下沒有Butterfly 會沒辦法調整設置)

安裝 Butterfly 主題樣式

1 2	npm i hexo-theme-butterfly

安裝 Butterfly 所需的套件

1 2	npm install hexo-renderer-pug hexo-renderer-stylus --save

開啓 _config.yml 檔，更改 theme 設定

1	theme: butterfly

在本機端啓動 Hexo 的伺服器，就可以看到套用了 Butterfly 主題樣式的網站囉！

1	hexo server

應用 Butterfly 主題

Front-matter 設定

Front-matter 是 markdown 文件最上方以 — 分隔的區域，用於指定個別檔案的變數。

Page Front-matter 用於頁面配置
Post Front-matter 用於文章頁配置

如果標注可選的參數，可根據自己需要添加，不用全部都寫在 markdown 裏

調整頁面配置: Page Front-matter

開啓這個文件 .\githubBlog\scaffolds\page.md，改成下面這樣子：

---
title:
date:
type: （tags,link,categories這三個頁面需要配置）
comments: (是否需要顯示評論，默認true)
description:
top_img: (設置頂部圖)
mathjax:
katex:
---

更多細節可以參考官方文件:https://butterfly.js.org/posts/dc584b87/#Post-Front-matter

調整文章頁配置: Post Front-matter

開啓這個文件 .\githubBlog\scaffolds\post.md，改成下面這樣子：

---
title:
date:
tags:
categories:
keywords:
description:
top_img: （除非特定需要，可以不寫）
comments  是否顯示評論（除非設置false,可以不寫）
cover:  縮略圖
toc:  是否顯示toc （除非特定文章設置，可以不寫）
toc_number: 是否顯示toc數字 （除非特定文章設置，可以不寫）
copyright: 是否顯示版權 （除非特定文章設置，可以不寫）
mathjax:
katex:
hide:
---

更多細節可以參考官方文件:https://butterfly.js.org/posts/dc584b87/#Post-Front-matter

創建標籤頁

輸入以下命令：

1 2	hexo new page tags

開啓這個文件 .\githubBlog\source\tags\index.md，把 type 設定為 “tags”

---
title: 標籤
date: 2024-06-12 00:00:00
type: "tags"
---

這邊是產生的標籤頁效果 https://.github.io/tags/

創建分類頁

輸入以下命令：

1 2	hexo new page categories

開啓這個文件 .\githubBlog\source\categories\index.md，把 type 設定為 “categories”

---
title: 分類
date: 2024-06-12 00:00:00
type: "categories"
---

創建友情連結頁

輸入以下命令：

1	hexo new page link

開啓這個文件 .\githubBlog\source\link\index.md，把 type 設定為 “link”

---
title: 友情連結
date: 2024-06-12 00:00:00
type: "link"
---

開啓這個文件（如沒有就自己新增）.\githubBlog\source_data\link.yml，內容如下：

Hexo 常用指令

初始化專案 / 建立專案資料夾

1	hexo init [資料夾名稱]

建立一篇新的文章，若標題包括空格，請用引號括起來

1	hexo new [layout] <文章標題>

在本機端啓動伺服器，預設是 http://localhost:4000/

1	hexo server

指令新增第一篇文章

1	hexo new post "我的第一篇文章 By Hexo"

會發現在 source 的 _posts 的資料夾多了一個我的第一篇文章-By-Hexo.md 的檔案。

---
title: 我的第一篇文章 By Hexo
date: 2021-03-07 17:15:57
tags:
---

# 我的第一篇文章的標題
hihihi ~ 你好～ 我是第一篇文章的內容～
在這裏可以用 `Markdown` 語法撰寫

部署 Deploy 設定

申請 Github 帳號

https://github.com

設定 repository

新增一個public 的 repository，並且命名爲 githubusername.github.io

例如：你的 github 使用者帳號爲 abc_xyz 那麼這個 repository 的名稱就會是 abc_xyz.github.io

安裝部署外掛

1	npm install hexo-deployer-git --save

調整_config.yml 設定

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:abc_xyz/abc_xyz.github.io.git # 貼上剛剛複製的 Github Repository 網址
  branch: master # 預設分支名稱
  message:

執行以下指令將 Hexo 產生的網站內容上傳到 Github

1	hexo clean && hexo deploy

用瀏覽器在網址輸入上述的網址 https://<username>.github.io，就可以看到 Hexo 的網站順利地架在 Github 的 Page 上了

常用的 Hexo 命令

清理快取文件（db.json）和生成的文件（public）

1	hexo clean

生成靜態文件

hexo g

啟動本地伺服器

hexo s

部屬到github上

hexo d

生成完成後再部署

hexo g -d

生成完成後再部署時提交的訊息

1	hexo g -d -m "message"

-m “message”: 在部署時提交的訊息（通常用於版本控制系統，如 Git）。

建立新的文章

1	hexo new <post-title>

建立新的頁面

1	hexo new page <page-title>

總攬

hexo clean   # 清理快取文件（db.json）和生成的文件（public）
hexo g       # 生成靜態文件
hexo s       # 啟動本地伺服器
hexo d       # 部屬到github上
hexo g -d    # 生成完成後再部署
hexo g -d -m "message"      # 生成完成後再部署時提交的訊息
hexo new <post-title>       # 建立新的文章
hexo new page <page-title>  # 建立新的頁面