前言

看到 Butterfly 這個主題好美，最吸引的是右下角還有 繁簡轉換、字號縮放 和 黑夜模式 的功能！感謝製作這個主題的作者 JerryC

Hexo 支持用 markdown 來寫文章，很方便展示 code，所以決定這裡以後就用來放置 code 相關的筆記吧。

以下，記錄一下搭建的過程：

搭建步驟

我是跟著以下這兩篇文章搭建的，一步一步跟著做就成功~ 特此萬分感激這兩位作者詳盡易懂的教學/文檔

Step 1 : 首先，按照以下這篇文章的第【一】至【四】部份準備及連接 Hexo 和 Github
Hexo+github搭建博客(超级详细版，精细入微) | 过客~励む

Step 2 : 然後，按照以下這篇文章安裝 Butterfly 主題
hexo-theme-butterfly安裝文檔 | JerryC

這樣就完成啦！

以下用自己的文字記錄一下我的搭建過程。

1. 下載及安裝 node.js

如果你的電腦沒有安裝 node.js，請到官網下載並安裝 (全部默認選項，不斷按 next 最後 install 就可以了)。
如果你的電腦已安裝 node.js，可以跳過這步驟。

如何檢查自己的電腦安裝了 node.js 沒？
開啟 Window CMD 或 Mac Terminal，輸入以下第1行及第3行，如果結果是類似第2行及第4行那樣顯示出代表 version 的數字，即表示你的電腦已安裝 node.js 了。
cmd
node -v
v.12.15.0
npm -v
6.13.4

2. 下載及安裝 Git

如果你的電腦沒有安裝 Git，請到官網下載並安裝 (全部默認/選recommended的選項，不斷按 next 最後 install 就可以了)。
如果你的電腦已安裝 Git，可以跳過這步驟。

如何檢查自己的電腦安裝了 Git 沒？
開啓 Window CMD 或 Mac Terminal，輸入下面兩個命令，如果有東西出來、沒有error、並顯示出代表 version 的數字，即代表你的電腦已安裝Git了。
cmd
git
git --version
如你已安裝 Git，在桌面 right-click，會看到有 Git GUI Here 和 Git Bash Here 選項。

3. 在 Github 建新 repo

如果還沒有 Github account，請到官網註冊。

創建一個新的 repository。 >> Create a new repository
Repository name 欄裡必須輸入成這樣子的格式： <username>.github.io

例如我的 username 是 ouoholly，那 Repository name 欄裡就輸入 ouoholly.github.io

4. 用 Git 把本機連接至 Github

如果你已曾經執行過以下steps，可以跳過這步驟。

在桌面 right-click 點選 Git Bash Here，然後一個界面（以下簡稱此界面為 GitBash界面）會彈出來。

在 GitBash界面中輸入以下兩行命令：

bash

git config --global user.name <username>        #輸入你的 github username
git config --global user.email xxxxx@xxxx.com   #輸入你註冊 github 時用的 email

然後，在 C:\Users\[username] folder中，你會找到一個叫 .gitconfig 的檔案。打開它確認裡面的內容，裡面應該是你剛才輸入的資料，.gitconfig的內容如下例子：
bash
[user]
    email = xxxxx@xxxx.com   #這裡顯示的是你註冊 github 時用的 email
    name = <username>        #這裡顯示的是你的 github username

在 GitBash界面中輸入以下命令，不斷按 enter 就可以了：
bash
ssh-keygen -t rsa -C xxxxx@xxxx.com #輸入你註冊 github 時用的 email
然後在 C:\Users\[username] 裡，你會看到一個叫 .ssh 的 folder。
打開裡面的那個叫 id_rsa.pub 的檔案，複製裡面的內容。
Add New SSH key 到你的 github account :
到 github.com > settings > SSH and GPG keys 這頁，粘貼在上一步中 id_rsa.pub 檔案中的內容到 “Key” 框中。
回到 GitBash界面，輸入以下命令：
bash
ssh -T git@github.com
然後會出現 Hi <username>! You've successfully authenticated, but GitHub does not provide shell access.，即代表連接成功。以後就可以經運用 GitBash界面發佈本地文件到線上 github 的 repo 了。

5. 安裝 Hexo 框架建博客

選擇一個地方放置你的 blog 相關的文件。
舉例來說，我想把這個blog的所有文件放置在 .\Desktop\githubBlog 裡，那麼打開這個 folder後，right-click 點擊 Git Bash Here。

以後有關 blog 的行動都是這樣，在 .\Desktop\githubBlog 裡執行 GitBash

在彈出來的 GitBash界面中，依次輸入以下五個命令，待一個命令運行完畢後才再輸入下一個命令：

bash

npm install -g hexo-cli  # 安裝Hexo
hexo init                # 在目前所在的folder下載搭建網站所需的文件
npm install              # 安裝依賴包
hexo g                   # generate - 根據配置文件 “__config.yml” 渲染生成靜態頁面
hexo s                   # server   - starts a local server

運行完畢後，以我的例子，githubBlog 這個folder裡會多了很多文件，所有必要文件已準備就緒。
到這裡瀏覽 http://localhost:4000/，就會看到類似以下畫面，看到即表示 Hexo Blog 在本地運行成功。

點進站根目錄（以我上面舉的例子來說，就是 double-click 開啓 githubBlog folder），你會看見一個叫 _config.yml 的檔案，開啓它，並修改/填寫以下幾行的參數如下：

yml

url: https://<username>.github.io #<username>填寫你的github username

deploy:
    type: git
    repo: git@github.com:<username>/<username>.github.io.git #<username>填寫你的github username
    branch: master

6. 把本地 Hexo blog 發佈至 Github

接著，可以把這個本地運行得好好的 Hexo Blog 發佈至 Github，以達至線上觀看的效果。
在 GitBash界面中輸入以下三個命令：

bash

npm install hexo-deployer-git --save
hexo g
hexo d # deploy - 部署，上傳

然後，在瀏覽器輸入你的網址 https://<username>.github.io ，就可以看到剛剛在本地運行的畫面，即是你的網站已成功發佈至線上可以讓其他人瀏覽啦

7. 更換成 Hexo Butterfly 主題

7.1 下載 Butterfly 主題及配件

在站根目錄（以我上面舉的例子來說，就是 githubBlog folder）裡 right-click 開啓 GitBash，輸入以下命令：

bash

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。

PS：在 theme folder 裡還有個叫 Landscape 的 folder，是 Hexo 的默認主題，就是 6. 那張圖的樣子，由於現在用 Butterfly 主題，所以整個 Landscape folder 沒用了可以把它刪掉。

7.2 應用 Butterfly 主題

【註】我用的是 hexo-theme-butterfly version 2.1.0

7.2.1 更改主題

開啓這個文件 .\githubBlog\_config.yml，把主題改為 Butterfly

yml

theme: Butterfly

7.2.2 Page Front-matter

開啓這個文件 .\githubBlog\scaffolds\page.md (scaffolds內的都是模版)，把內容完全更改成下面這樣子：

Markdown

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

7.2.3 Post Front-matter

開啓這個文件 .\githubBlog\scaffolds\post.md，把內容完全更改成下面這樣子：

Markdown

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

7.2.4 創建標籤頁

在站根目錄開啓 GitBash，輸入以下命令：

bash

hexo new page tags

開啓這個文件 .\githubBlog\source\tags\index.md，把 type 設定為 "tags"，如下：

Markdown

---
title: 標籤
date: 2018-01-05 00:00:00
type: "tags"
---

7.2.4 創建分類頁

在站根目錄開啓 GitBash，輸入以下命令：

bash

hexo new page categories

開啓這個文件 .\githubBlog\source\categories\index.md，把 type 設定為 "categories"，如下：

Markdown

---
title: 分類
date: 2018-01-05 00:00:00
type: "categories"
---

7.2.5 創建友鏈頁

在站根目錄開啓 GitBash，輸入以下命令：

bash

hexo new page link

開啓這個文件 .\githubBlog\source\link\index.md，把 type 設定為 "link"，如下：

Markdown

---
title: 友情鏈接
date: 2018-01-05 00:00:00
type: "link"
---

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

Markdown

class:
  class_name: 友情鏈接
  link_list:
    1:
      name: xxx
      link: https://blog.xxx.com
      avatar: https://cdn.xxxxx.top/avatar.png
      descr: xxxxxxx
    2:
      name: xxxxxx
      link: https://www.xxxxxxcn/
      avatar: https://xxxxx/avatar.png
      descr: xxxxxxx  

 class2:
   class_name: 鏈接無效
   link_list:
     1:
       name: 夢xxx
       link: https://blog.xxx.com
       avatar: https://xxxx/avatar.png
       descr: xxxx
     2:
       name: xx
       link: https://www.axxxx.cn/
       avatar: https://x
       descr: xx

7.2.6 修改網站資料及功能

修改這個檔案裡的資料 .\githubBlog\themes\Butterfly\_config.yml，各項功能的解釋在入面已寫得很清楚，按自己需求修改就可以了，主要都是按自己需求選填 true or false。

可到主題作者 JerryC 的文檔看各種功能的詳細介紹。

這些功能可以稍後慢慢再設定，先到下面進行 step 7.2.7 。

7.2.7 新增文章

同樣在站根目錄開啓 GitBash，輸入以下命令：

bash

hexo new helloworld # 命名新文章名稱為 helloworld 作為例子

然後，你在這個folder .\githubBlog\source\_posts 裡，便會看見多了一個名叫 helloworld.md 的檔案，開啓它，把該篇的文章內容寫進去就可以啦。
例子：

Markdown

---
title: Hello World
date: 2020/02/14 00:00:00
tags:
    - tag1
    - tag2
categories:
    - [1stCategory, sub-category-of-1st]
    - 2ndCategory
keywords:
description:
top_img: （除非特定需要，可以不寫）
comments  是否顯示評論（除非設置false,可以不寫）
cover:  縮略圖
toc:  是否顯示toc （除非特定文章設置，可以不寫）
toc_number: 是否顯示toc數字 （除非特定文章設置，可以不寫）
copyright: 是否顯示版權 （除非特定文章設置，可以不寫）
mathjax:
katex:
hide:
---

# 內容

內容內容內容內容內容內容內容內

如要檢視文章呈現效果，在GitBash，輸入以下命令：

bash

hexo g
hexo s

瀏覽 http://localhost:4000/，就可以看到你的網站已變成 Butterfly 主題，也可以看到剛剛寫的新文章~

7.2.8 把更新上傳至 github

在GitBash，輸入以下命令：

bash

hexo g -d

在瀏覽器輸入你的網址 <username>.github.io，就可以看到你的線上網站也更新了。

大功告成！

然後，我還把這個主題作了很多自定義修改，遲點再另外寫篇文章分享。

常用的 GitBash 命令

筆記一下那些常用的 GitBash 命令

bash

hexo clean   # cleans the cache file (db.json) and generated files (public)
hexo g       # generate static files
hexo s       # starts a local server
hexo d       # deplay to github
hexo g -d    # deploy after generation finishes
hexo g -d -m "message"
hexo new <post-title>       # create new post
hexo new page <page-title>  # create new page