為什麼想要架設 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
npm install -g hexo-cli建立 Hexo 專案
hexo init hexoblog會產生一個 hexoblog 資料夾
cd hexoblog啓動 Hexo 的伺服器
hexo server接下來用瀏覽器打開 http://localhost:4000 就可以看到Hexo 的效果
要怎麼在在文章上放圖片呢
查看了各種教學後來決定先把文章圖片放在 HackMD上，再採用設定公開表的方式分享照片
選擇主題樣式
使用 Butterfly 主題樣式
另外可以選擇其他樣式
https://hexo.io/themes/
因為是我參考 ChanChanDev 圈圈工程師 寫的這篇文章 實作的，比較起來我也感覺 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
另外這個方式會遇到以下問題
這個警告表示你正在將另一個 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
應用 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://.github.io/tags/
創建分類頁
輸入以下命令：
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://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 上了
常用的 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> # 建立新的頁面