Mac+hexo+butterfly個人博客搭建完全指南

關于博客的一點想法

首先，一定有非常多的小伙伴（尤其是計算機專業的大學生）對于搭建個人博客或者是鉆研技術有著極大的興趣，我個人也是在今年疫情期間對博客開始有了一定的鉆研和探索，因此這邊有一些小小的個人心得想要分享給大家，

打鐵還需自身硬，我自己在這一方面也還算是剛剛入門吧，因此可能會有部分講的不夠完善的地方，也歡迎大家在評論區留言與我交流，我個人使用上述幾個組件搭建的博客鏈接在這里，供大家參考借鑒

我的博客

系統方面

首先我的csdn博客主打的內容就是分享mac相關的，因此也廢話不多說，直接開始我們mac系統搭建方案，

Node下載

首先點進node下載地址這個鏈接地址
選擇LTS（長期支持版）進行下載，安裝的程序只需要一直點擊繼續和同意即可，如沒有特殊要求的話不需要對相關的下載磁盤進行修改，
下載完成后首先先和下圖一樣打開你的終端，輸入sudo su（也就是獲取root用戶權限，這一步非常重要，因為如果沒有權限很多寫入操作是無法完成的，同時確認自己是否是在最外層的檔案位置進行root用戶的申請，如果不確定可以輸入“cd”讓自己回到最開始的檔案夾下）

進去root用戶模式以后，在終端中繼續輸入：

node -v

查看node的版本號，如果已經下載完成則應該回傳下載的node版本

npm -v

查看npm的版本號

接下來我們使用國內的淘寶鏡像源來下載一個叫cnpm的組件

npm install -g cnpm --registry=http://registry.npm.taobao.org

完成下載后可以繼續在終端輸入

cnpm -v

查看cnpm的版本號，如果有相應的版本號出現說明下載完成

接下來在終端繼續輸入以下內容，完成對hexo的全域安裝

cnpm install -g hexo-cli

中途如果出現一些warn的欄位不用著急，warn說明并不是出現了比較大的問題，基本上忽略即可

安裝完成后，同樣可以輸入

hexo -v

查看hexo的下載版本，如果已經出現了相關的版本號，說明hexo已經安裝完成啦，接下來就是創建檔案包了

保持root用戶模式，在終端輸入

mkdir blog

這樣我們就創建了一個名字叫blog的檔案夾，接下來進入到blog檔案夾下并對hexo進行初始操作

cd blog
sudo hexo init

初始化完成后最后一行應該是

INFO Start blogging with Hexo!

那么我們就已經完成了blog本地的hexo搭建，要確認自己的hexo是否已經搭建完成，可以繼續在終端輸入:

hexo s

s相當于server，輸入完成后會獲得一個本地的頁面地址:
http://localhost:4000

點擊進入便可以發現hexo已經在本地搭建完成，并且會有一篇hello world的系統自動生成的文章，此時已經完成本地搭建作業，

然后我們先按control+c退出hexo s這個內容，接下來可以使用

hexo n "我的第一篇博客文章"

那么此時系統就會生成一個名字叫做"我的第一篇博客文章.md"的markdown檔案格式的檔案

像上圖所示那樣進入到_posts檔案夾下，你應該可以找到"我的第一篇博客文章.md"這個檔案，考慮到可能有部分小伙伴在此時可能并有沒很好的markdown編輯器，這邊先推薦大家使用mac系統自帶的vim來編輯里面的內容，當然在今后我會向大家具體介紹我個人使用的一款名字叫做typora的markdown編輯器，這邊先不過多介紹

在終端輸入

cd source/_posts/
vim 我的第一篇博客文章.md

此時會進入到終端的vim界面，你可以在里面隨意的輸入一些內容，可以是一些英文的單詞，也可以是純中文的內容，如果大家不知道應該寫什么，可以跟著我來做，首先需要點擊鍵盤上的i鍵，這是insert的意思，按完才可以往里面輸入內容，然后輸入以下內容

### 我的第一篇文章
這是我的第一篇hexo的文章，請大家多多指教

輸入完成后，先按鍵盤上的esc鍵退出insert模式，再輸入

:wq

完成這篇文章的寫入保存和退出

接下來退回到剛剛的blog目錄下，可以輸入以下命令

cd ../..

退出到blog檔案夾下后，分別輸入

hexo clean
hexo g

在hexo生成完成后，再輸入剛剛的hexo s指令，可以回到剛剛的本地鏈接打開查看這篇新增加的文章內容，檢查完成后同樣使用control+c退出hexo s的模式

其實到這里我們整個本地的hexo博客搭建流程已經完成啦，接下來就到了我們的github遠端部署環節了（請注意這邊終端務必保留當前內容，不要退出或者進行別的操作），因為基于github下的hexo博客是免費的，因此我們才考慮在github創建倉庫來完成一系列的遠端部署作業，如果你還不清楚github的使用的話你可以參考我的前兩篇文章來學習有關的倉庫創建和密鑰鏈接作業

github使用心得（一）
github使用心得（二）

接下來的操作步驟我默認大家已經是對于github有了一定的了解了，我這邊還是會比較詳細的講述操作的流程：

1. 在github的個人主頁中選擇新建一個repository
   
   這里一定要注意，創建的倉庫名字一定是自己的昵稱，我的昵稱是tyfann，也就是左邊owner的名稱,加上".github.io"，描述的話看個人需不需要加了，我這邊就不多做贅述，然后點擊最底下的create repository即可
   
2. 回到剛剛的終端，在命令列中輸入

cnpm install --save hexo-deployer-git

安裝一個hexo部署的插件

安裝完成后，需要去修改"_config.yml"這個檔案，同樣的我們在終端用vim命令來編輯它

vim _config.yml

打開以后找到檔案的最底部，你會找到和下面類似的文欄位落

這時先點擊鍵盤上的i進入insert模式，除了repo:后面的那個網頁鏈接修改為自己的鏈接以外，別的內容和下圖保持一致即可

關于repo:后面的網頁鏈接，我們需要回到剛剛的github界面
復制https://這一段鏈接的內容放到repo后面即可（注意冒號后面需要一個空格，不能直接把鏈接貼著冒號，這樣會報錯）

然后和上面講的vim操作一樣，按esc退出insert模式，并且輸入

:wq

保存并退出

此時在命令列輸入

hexo d

就可以進入到hexo的遠端部署程序了，這一程序中可能會遇到需要輸入github用戶名和密碼的地方，按照指令一步步輸入即可，如果遇到如下界面，不要著急，點擊還原為默認，點擊重設，并且輸入你的mac的賬號密碼即可

此時回到github的網頁重繪一下，就會發現我們的github倉庫里多了很多的東西

這時候我們可以打開一個新的網頁，輸入"username.github.io"

這里請記得把username這部分替換成你的昵稱，我的昵稱是tyfann，因此就輸入tyfann.github.io，初次打開可能會顯示無法訪問該網站，不要著急，重繪一下頁面或者等幾秒鐘基本都會出現相關的頁面，就和剛剛本地hexo s生成的網頁一樣啦，

如果小伙伴做到了這一步，那么我要恭喜你，你基本上已經完成了整個hexo博客的搭建和部署，當然我也知道很多小伙伴很好奇為什么那些大牛或者大佬們的博客都非常的酷炫，這里就需要我們自己去下載現成的hexo主題風格并且自己修改內部的內容啦

你可以在官網找到許許多多的主題風格

hexo主題

這里我向大家推薦一款我近期在使用的主題風格，名字叫butterfly，大致整體的style你們可以參考文章開頭我給出的我的博客的鏈接，看看自己是否喜歡這一風格，如果感興趣的話，就繼續看下去吧

Butterfly主題風格創建

首先大家需要到butterfly的github倉庫，

butterfly倉庫

未完待續…