---
# System prepended metadata

title: Hexo + Github 建立部落格
tags: [更新上部落格]

---


# 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://hackmd.io/_uploads/Hygizoop62.png)
>https://nodejs.org/en

:::info
有用Node js 推薦也一起使用 nvm，因為有時候常常會遇到版本問題
![](https://hackmd.io/_uploads/ryAznjaT3.png)
>https://github.com/coreybutler/nvm-windows/releases

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

### Git
![](https://hackmd.io/_uploads/H1vIss66n.png)
>https://git-scm.com/

### Visual Studio Code (vs code)
![](https://hackmd.io/_uploads/HJ4toipph.png)
>https://code.visualstudio.com/

## Hexo 設定

安裝 Hexo
```
npm install -g hexo-cli
```

建立 Hexo 專案
```
hexo init hexoblog

```
會產生一個 hexoblog 資料夾
```
cd hexoblog
```

啓動 Hexo 的伺服器
```
hexo server
```

接下來用瀏覽器打開 http://localhost:4000 就可以看到Hexo 的效果
![](https://hackmd.io/_uploads/HkTGRjap3.png)

## 要怎麼在在文章上放圖片呢
查看了各種教學後來決定先把文章圖片放在 HackMD上，再採用設定公開表的方式分享照片
![](https://hackmd.io/_uploads/SyLWU7JR3.png)


## 選擇主題樣式

### 使用 Butterfly 主題樣式
另外可以選擇其他樣式

![](https://hackmd.io/_uploads/SydzvSNCn.png)
> https://hexo.io/themes/

因為是我參考 ChanChanDev 圈圈工程師 寫的[這篇文章](https://chanchandev.com/note/Hexo/hexo-introduction/2335841689/#%E9%81%B8%E6%93%87%E4%B8%BB%E9%A1%8C%E6%A8%A3%E5%BC%8F) 實作的，比較起來我也感覺 Butterfly 這個主題最好看

#### 方法一 
下載 Butterfly 主題及配件
```
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
```
theme: Butterfly
```

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

另外這個方式會遇到以下問題
![image](https://hackmd.io/_uploads/HkxXDItSC.png)

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

可以用以下方式解決
```
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 主題樣式
```
npm i hexo-theme-butterfly

```
安裝 Butterfly 所需的套件
```
npm install hexo-renderer-pug hexo-renderer-stylus --save

```

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

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

```
hexo server
```

![](https://hackmd.io/_uploads/By-YOrEC3.png)

### 應用 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

#### 創建標籤頁
輸入以下命令：
```
hexo new page tags

```
開啓這個文件 .\githubBlog\source\tags\index.md，把 type 設定為 "tags"
```
---
title: 標籤
date: 2024-06-12 00:00:00
type: "tags"
---

```

這邊是產生的標籤頁效果 https://<username>.github.io/tags/
![image](https://hackmd.io/_uploads/S1uihFLH0.png)

#### 創建分類頁

輸入以下命令：
```
hexo new page categories

```
開啓這個文件 .\githubBlog\source\categories\index.md，把 type 設定為 "categories"
```
---
title: 分類
date: 2024-06-12 00:00:00
type: "categories"
---
```

#### 創建友情連結頁
輸入以下命令：
```
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 常用指令

初始化專案 / 建立專案資料夾
```
hexo init [資料夾名稱]
```
建立一篇新的文章，若標題包括空格，請用引號括起來
```
hexo new [layout] <文章標題>
```
在本機端啓動伺服器，預設是 http://localhost:4000/
```
hexo server
```

## 指令新增第一篇文章
```
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://hackmd.io/_uploads/rk0N6SV0h.png)
>https://github.com

### 設定 repository

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

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

### 安裝部署外掛

```
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 

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

![](https://hackmd.io/_uploads/rk5SyU40n.png)


## 常用的 Hexo 命令
### 清理快取文件（db.json）和生成的文件（public）
```
hexo clean
```

### 生成靜態文件
```
hexo g
```

### 啟動本地伺服器
```
hexo s       
```

### 部屬到github上
```
hexo d
```

### 生成完成後再部署

```
hexo g -d
```

### 生成完成後再部署時提交的訊息
```
hexo g -d -m "message"
```

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

### 建立新的文章
```
hexo new <post-title>
```

### 建立新的頁面
```
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>  # 建立新的頁面
```

###### tags: `更新上部落格`