Hexo部落格（Snail主題）搭建回顧概覽

Hexo部落格（Snail主題）搭建回顧概覽

筆者搭建部落格地址：https://saltyfishyjk.github.io

目錄

• Hexo部落格（Snail主題）搭建回顧概覽
  • Part 0 前言
    • 寫作背景
    • 定位
      • 您在這裡可以期望獲得：
      • 您在這裡無法期望獲得：
    • 對讀者前置知識的期望
  • Part 1 筆者參考的其他部落格
  • Part 2 筆者踩過的坑
    • 設定GitHub預設分支為master
    • 直接按照Snail主題官方倉庫（給出了重要基本指導）的README.md搭建部落格
    • 執行hexo g -d時關閉代理
  • Part 3 個性化設定部落格介面
    • 在Snail主題官方倉庫（給出了重要基本指導）已經給出的設定
    • 官方指導未給出的設定配置
      • 更改右上角導航欄
    • 寫部落格
      • 插入圖片
  • 後記

Part 0 前言

該Part記錄一些背景資訊，有助於讀者瞭解這篇部落格的寫作背景、定位、對讀者的前置知識期望。建議腦海中只有”想像大家一樣搭建hexo部落格“的同學閱讀本部分，其他同學可直接跳至Part 1開始閱讀。

---

寫作背景

筆者在6系第一學期的祭祖中閱讀參考了大量的學長學姐和同屆大神的部落格，受益匪淺，csdn和cnblog都是很不錯的適合部落格小白的平臺，同時易於在百度檢索中出現；除此之外，基於github page的hexo部落格吸引了我的興趣，雖不易於百度檢索，但是利於對個人部落格收集整理，這便是搭建本部落格的初衷。

筆者的裝置是Windows 10家庭版。

定位

基於這篇部落格提供的其他搭建部落格詳細指導連結和筆者自己的補充，預期讀者可以依此搭建屬於自己的Snail主題hexo部落格。

您在這裡可以期望獲得：

1. 筆者在搭建部落格中踩過的坑
2. 一些較詳細的指導搭建部落格連結
3. 基於第2條中的搭建部落格連結的一些補充
4. 包括連結部落格內容在內的搭建部落格所需的充分知識
5. 依照本部落格給出的方法搭建出類似本部落格的個人部落格

您在這裡無法期望獲得：

1. 應用到的技術的深層原理
2. Snail主題之外的其他hexo主題部落格搭建方法

對讀者前置知識的期望

我們希望讀者最好可以擁有以下知識，或在閱讀本部落格時及時查閱學習。

1. 瞭解Git和GitHub基礎知識
2. 能夠應用編輯器（如visual studio code）檢視各種非常規型別配置檔案
3. 能夠訪問GitHub或能夠使用VPN
4. 命令列的使用與Linux基本命令

Part 1 筆者參考的其他部落格

1. Hexo+GitHub Page搭建技術部落格（重要參考）
2. Snail主題官方倉庫（給出了重要基本指導）
3. hexo官網（可以獲得hexo基本知識如hexo命令等）
4. [hexo+github搭建部落格(超級詳細版，精細入微)
5. 解決npm install安裝慢的問題
6. 利用vscode開啟.styl檔案的辦法
7. 解決hexo中文部落格打不開的問題
8. 解決部落格中插入圖片的問題

以上為筆者在搭建部落格的過程中所參考過的其他部落格，前兩個最為重要，讀者可以將本部落格與它們結合閱讀。

Part 2 筆者踩過的坑

設定GitHub預設分支為master

由於美國的一些政治因素，GitHub在2020年將預設分支由多年來一直使用的master改為了main，這導致了學習2020年10月之前的部落格教程時，現在的使用者需要考慮預設分支不同導致的潛在問題。因此，直接將自己GitHub賬戶的預設分支改為master即可與大家保持一致，避免無謂的bug。

直接按照Snail主題官方倉庫（給出了重要基本指導）的README.md搭建部落格

筆者曾嘗試先應用預設主題，再更換為snail主題的方法，但是由於未知原因一直失敗，但直接按照snail主題給出的指令操作即可。因此，建議讀者直接按此操作。

執行hexo g -d時關閉代理

在此先推薦一款訪問GitHub的工具DevSideCar，傻瓜式操作非常易用。

在使用DevSideCar時，可能會遇到執行hexo g -d命令時上傳失敗，這並非因為操作錯誤，而是因為網路原因，只需要關閉代理即可。

Part 3 個性化設定部落格介面

如果你完全按照上文及相關連結的操作進行，那麼下面的操作對你應當是適用的。

在Snail主題官方倉庫（給出了重要基本指導）已經給出的設定

1. 修改Site，按照官方指導即可。
2. 修改Site Settings，其中的img資料夾的相對地址是blog\source\img，其中blog是官方指導最開始的hexo init blog命令生成的blog資料夾。在該img資料夾下放入你所想要的圖片並修改配置檔案中相應程式碼。
3. 修改SNS Settings，按照官方指導即可。
   1. 修改Sidebar Settings，對於不需要的Sidebar，直接註釋掉或刪掉對應欄目即可；friends連結的title是在你的部落格介面顯示的文字，點選會跳轉到href指向的連結。
4. theme部分應該無需自己修改。
5. Deployment部分依照官方指導修改即可，其具體格式可進一步參考Hexo+GitHub Page搭建技術部落格（重要參考）。
6. Background effects部分按照官方指導修改即可，也可以關閉以減少CPU消耗，其中content部分可以修改為自己喜歡的emoji或語句，做個小彩蛋（比如本部落格[doge]）。

官方指導未給出的設定配置

更改右上角導航欄

例子：如想刪去下圖右上角的TAGS欄目，只需要在blog\source目錄下山區tags資料夾即可。

如果想增加欄目，可以查閱hexo命令hexo new page使用方法，此處不詳述。

寫部落格

可以使用hexo new 'title'的命令生成.md部落格原始檔，在其中使用markdown語法書寫即可。

插入圖片

參考解決部落格中插入圖片的問題中的方案，其中前兩種方法筆者已經親測可用，最後的typora的方法沒有嘗試。

後記

感謝您閱讀至此，這篇部落格到此也就告一段落了，後續筆者若有新的心得會更新本部落格。

這篇部落格遠非盡善盡美，筆者也只是提供了若干其他部落格資源和自己親歷的坑，若有不足之處還望批評指正。