輕量級Hexo部落格搭建指南
準備工作
這裡不多贅述，直接去B站參照up主CodeSheep的視訊操作就行，學習到部署到GitHub即可。
連結：https://www.bilibili.com/video/BV1Yb411a7ty?share_source=copy_web
配置
Hexo基本配置
建議做一部分就執行一下
hexo s來檢視效果，檢查是否有報錯。
開啟部落格根目錄資料夾下的_config.yml配置好title、subtitle、author、language、timezone、url即可。
# Site title: 東方迷津築 subtitle: 幻想鄉一角 description: keywords: author: 狛楓 language: zh-CN timezone: Asia/Shanghai # URL # 如果你是用GitHub Page，那麼這裡寫https://username.github.io url: https://komaeka.fun
Butterfly主題配置
由於本文屬於輕量級指南，沒提到的部分就是預設配置，如果有興趣也可以自己鑽研。
-
進入Butterfly 安裝文件(一) 快速開始 | Butterfly學習安裝、應用主題、安裝外掛、升級建議。
-
進入Butterfly 安裝文件(二) 主題頁面 | Butterfly學習Front-matter、標籤頁、分類頁、友情連結、相簿、404頁面。
- 有些萌新不知道Front-matter是什麼，我簡單介紹一下。因為Hexo部落格的頁面主要由source資料夾裡邊的Markdown檔案渲染而來，而Front-matter就能在這個Markdown檔案裡邊進行一些設定，比如文章標題、標籤、分類、釋出時間等等。
- 標籤頁、分類頁和友情連結頁面除了新增type還可以把top_img加上，這樣就有頂部圖了。
- 相簿標籤採用的是相對地址，比如
/Gallery/wallpaper指的是部落格根目錄/source/Gallery/wallpaper。
-
進入Butterfly 安裝文件(三) 主題配置-1 | Butterfly學習導航選單、社交圖示、主頁文章節選、頂部圖、文章頁相關配置、頭像、Footer 設定、右下角按鈕、側邊欄設定、標籤外掛。
2. 頂部圖配置index_img、archive_img、tag_img、category_img即可，其他部分後續有需要再考慮修改。
3. 如果你想用GitHub徽標，Footer設定部分可以把copyright改為false，後面可以用外掛設定GitHub Badge。
4. 標籤外掛要熟悉，寫文章的時候使用起來效果會很好。 -
進入Butterfly 安裝文件(四) 主題配置-2 | Butterfly學習評論、線上聊天、搜尋系統、美化/特效、字數統計。
-
關於評論系統，我看一些大佬喜歡用Twikoo，我就也跟著用Twikoo。我找到了一篇大佬的配置教程，寫得十分詳細，親測可用：Twikoo評論系統配置教程。
-
線上聊天其實可以不用新增，不過添加了真的很酷就是了，我用的是Tidio，效果如圖：
添加了之後記得在_config.butterfly.yml改rightside-bottom，不然聊天視窗會擋住側邊設定欄目，我改為了130px。
-
搜尋系統我用的是本地搜尋，開啟之後右上角的導航欄最左邊就會自動出現一個放大鏡的標誌，那就是搜尋。
-
美化/特效部分，我把footer背景改為了true，打開了beautify，改了字型為Microsoft YaHei，將字型大小調為了16px，添加了網站副標題，打開了頁面載入動畫。
-
-
在頁底新增GitHub Badge，效果演示：
-
至此，你的Hexo部落格基本上已經搭建完畢，如果你還想繼續美化或者提高訪問效能等，去Akilarの糖果屋，那裡會有你想要的！
附錄
教程連結
- Hexo官網
- Butterfly官網
- Akilarの糖果屋（裡邊有很多魔改和美化教程哦！）
工具資源
涉及的外掛
npm install hexo-deployer-git --save # 部署外掛
npm install hexo-renderer-pug hexo-renderer-stylus --save # 渲染器外掛
npm install hexo-generator-search --save # 本地搜尋外掛
npm install hexo-wordcount --save # 字數統計外掛
npm install hexo-butterfly-footer-beautify --save #頁底GitHub徽標外掛
本人水平很菜，如果文章有差錯，還望指正。
謝謝§ԾᴗԾ§