基于HEXO+Github+Git搭建的博客終于大功告成了,在我搭建這個博客的過程中,走了很多彎路,其中也看了很多的博文和教程,但眾說紛紜,所以有必要盡快把我搭建博客的整個過程記錄下來(免得忘記),一方面是為了讓瀏覽到此篇文章的小伙伴少走一些彎路,另一方面是希望把整個過程記錄下來,以至于下一次搭建博客,會節省一些時間。補充一下,整個搭建過程都是基于windows的。下面我們就開始吧!
1、環境搭建
1.1安裝node框架
HEXO是基于node框架的,所以我們首先要下載安裝node,下載地址[node.js官網]< https://nodejs.org/en/ >
推薦下載長期支持版(即LTS版),因為當前發布版雖然含新功能但不穩定,而且奇數版在當前版本發布之后六個月將變為不支持狀態(node.js版本不得低于8.6建議10.0及以上版本)
安裝完成后win+R啟動命令行,輸入node -v,來檢測安裝是否成功。如果返回如下圖所示,證明你安裝成功了
1.2注冊Github賬號
Github推出的Github Pages服務可以很方便的建立一個屬于我們自己的個人博客
進入[Github 網站],按照提示進行注冊然后登陸(已經注冊過的大佬繞過)
點擊右上角加號--->new repository,新建一個倉庫,這個倉庫就是用來存放博客的地方
接著進入到創建倉庫界面,Repository name就是使用瀏覽器訪問你的博客的地址
1.3安裝Git
為了能夠把自己所寫的博客上傳到github上面去,我們使用分布式版本控制工具——[git官網]< https://git-scm.com/ > 進入官網后,直接下載安裝最新版就可以了。安裝完成之后在桌面右鍵會有一個Git Bash。類似于Linux終端,可以模擬Linux下的終端進行操作。可以在命令提示符中輸入git --version打開之后,像下圖這樣
1.4安裝HEXO
HEXO的安裝在它的[官方文檔]< https://hexo.io/zh-cn/docs/ >中說的很詳細,下面我就簡單的介紹一下HEXO的安裝
1.4.1新建一個用來存放博客的文件夾
在合適的位置新建一個用來存放今后所寫博客的文件夾,比如我的存放在E:\my blog\目錄下
創建成功后進入該文件夾,在該目錄下右鍵打開Git Bash Here,啟動Git控制臺(后面所有的命令行操作都用Git,不用windows自帶的命令提示符,即CMD),輸入npm i hexo-cli-g安裝HEXO,會出現幾個報錯,但是不用理會
安裝完成后輸入hexo -v,出現下圖界面,表示安裝成功
隨后,初始化文件夾,仍然在該命令行窗口執行hexo init 新建的文件夾名
接著,輸入npm install安裝所需要的組件。在剛剛新創建的文件夾下就會產生文件目錄
_config.yml文件是網站的配置文件,可以配置大部分參數,也是最重要的文件
package.json文件是應用程序的信息
source是資源文件夾,是用來存放用戶的資源,如用戶每次編寫的博客、標簽頁面、分類頁面
themes是主題文件夾,HEXO會根據主題生成不同的靜態頁面
scaffolds是模板文件夾,新建的文章會根據模板來建立文件
2、開始搭建
2.1部署到本地
其實在環境配置完成之后,就已經在本地生成了博客主頁。仍然是在剛剛的Git命令行中執行hexo g(hexo generation,生成靜態頁面),然后執行hexo s(hexo server 啟動本地服務,進行文章預覽調試)。然后瀏覽器輸入 http://localhost:4000 就可以看到你博客的效果啦,不過這是本地調試用,其他人是看不到的。(調試完畢后記得 control + C 關閉本地端口,不然下次是進不去的)? 看下圖:
這是安裝HEXO的默認主題,在之后的博文中,我會分享如何更改主題
2.2部署到Github
2.2.1部署簽名
先使用下面的命令對Git進行初始化配置,即設置簽名,作用是區別不同開發人員身份。這里郵箱地址不一定非得是注冊Github的郵箱地址,任意郵箱即可,作用不是很大。
$ git config --global user.name "your name"
$ git config --global user.email "your e-mail address"
2.2.2配置SSH
? 打開Git Bash,執行下面的命令生成SSH訪問私鑰及公鑰?
$ ssh-keygen -t rsa -C "email@email.com"
當提示輸入的時候,不用管,一直回車就可以。
然后/c/users/你的電腦賬戶名/.ssh文件下會生成兩個文件
然后打開你的Github,點擊右上角頭像-->Setting-->SSH keys。
然后點擊New SSH Key新建一個SSH key。Tittle可以自己起。然后將id_rsa.pub
文件中的內容復制粘貼到Key下面。然后用下面的命令測試是否連接到Github
$ ssh -T git@github.com
如果出現下圖所示內容則證明連接成功
2.2.3設置deploy參數
打開HEXO主文件夾下的_config.yml(鼠標移動到該文件上右鍵,選擇opendlg打開),設置底部的deply參數,下面是我的設置。type和branch和我設置的一樣就行
其中repo在Github中進行復制,如下圖:
deploy:
? type: git
? repo: git@github.com:Jerenliu/jerenliu.github.io.git
? branch: master
? 注意:配置的時候要嚴格注意格式,不然后面會出錯(type,repo,branch后面的冒號統一用英文的,冒號后面必須有一個空格。type,repo,branch前面要有兩個空格,并對齊)。后面進行配置文件都需要遵循這種格式?
2.3驗證
? 以上配置完成后保存 然后回到終端執行npm install hexo-deployer-git --save安裝一個插件,這樣才能將你寫好的文章部署到github服務器上并讓別人瀏覽到。安裝完成后在終端中依次執行如下代碼
? hexo clean? ? 作用:清理緩存
? hexo generate? ? 作用:進行渲染? 簡寫: hexo g
調試完畢后使用? hexo deploy? ? 作用:部署到git服務器? 簡寫: hexo d?
然后就能在瀏覽器輸入地址訪問博客頁面了
2.4問題
? 當執行hexo d可能會出現如下錯誤
類似這樣的錯誤,這個錯誤的原因是因為本地的博客版本與遠程版本不一致
第一種解釋:.deploy_git這個文件的內容是用于將自己所寫的博客部署到github倉庫中的內容
第二種解釋:這個應該是git部署用的文件。比如你寫好的博客想部署到 GitHub Pages上去的話,可以用git部署插件,那個插件會創建這個目錄
那么如何解決這個問題呢?
第一步,刪除自己博客目錄下的.deploy_git文件
第二步,進入git,輸入:hexo clean 清除緩存hexo g -d 渲染部署?
? 執行完以上操作后打開瀏覽器地址欄輸入你的博客地址,就可以看到效果了