使用 Github 和 Hexo 搭建個人部落格
- 開篇先給大家放一張我的部落格的效果圖吧
-
- 準備篇
- 1. Github 的簡介及配置
- 2. 安裝 Node.js
- 3. 安裝 Hexo
- 4. 搭建部落格開始
開篇先給大家放一張我的部落格的效果圖吧
準備篇
要安裝的環境及使用的軟體
git、 node.js、 Hexo
這裡我使用的是 Visual Studio Code(下面簡稱 vscode)，不得不說這是一款十分強大的編輯器。當然了，采用什麼編寫不限制，我這裡的話隻介紹 vscode 的用法。
1. Github 的簡介及配置
在 前一篇文章 中也介紹了 Github 是全球最大的同性交友網站，具體請看前一篇介紹。
在這裡呢，我們采用了 Github 來作為我們的代碼管理倉庫，不僅因為他是免費的，而且因為其有 Github Page 這個特别牛叉的功能，就是給每個人都提供了一個域名。在這個特定的倉庫裡，我們可以使用特定的域名來通路此項目，為本篇文章的實作打下了基礎。
首先，我們得先注冊一個 Github 的賬号。 點選前往
Github 的注冊頁面如下圖所示。
然後就是填寫使用者名，密碼了。這裡的使用者名千萬不要随便填，以後的域名就是以它開頭的，并且它是唯一的，不能與其他的重複。
這裡有注意點，注冊填完使用者名後，會讓你選擇賬戶類型，就是選擇是否收費，選擇 ￥0 就好了。然後郵箱一定要真實，要驗證的。第三步的選擇随便選選就行了。注冊完成後就進入到了首頁面，樣式如下圖所示。
選擇最中間的 Start a Project，然後就會進入如下界面。
項目的格式為 使用者名.github.io ，就是之前讓你們好好起的使用者名。這個倉庫是規定的，隻能這樣。然後就是配置 SSH 公鑰了，具體的話參照簡書的這篇 Git安裝及SSH Key管理之Windows篇 進行配置。
到此， Github 的配置就到這了。
2. 安裝 Node.js
那麼什麼是 Node.js 呢？
Node.js 是一個基于Chrome V8 引擎的JavaScript 運作環境。Node.js 使用了一個事件驅動、非阻塞式I/O 的模型，使其輕量又高效。
安裝的話就是直接去 官網 下載下傳，或者直接 點選下載下傳 ，這裡下載下傳的是 10.16.0長期支援版，最新版是 12.6.0，之是以不選擇最新版，就是因為最新版不一定會有什麼樣的問題，用長期支援版比較省心。安裝也十分簡單，隻要輕按兩下即可安裝。
安裝完需要檢驗是否安裝完成，隻需要打開 Git Bash，然後輸入
node --version
即可校驗，安裝成功即會顯示其版本号，如下圖所示。
到這裡 node.js 就安裝成功了。
3. 安裝 Hexo
打開 Git Bash ，輸入指令
npm install -g hexo-cli
,然後等待安裝結果即可。最後就是校驗 Hexo 是否安裝成功，在 Git Bash 中輸入指令
hexo --version
，安裝成功就會顯示如下界面。
Hexo 的安裝到此為止了。
4. 搭建部落格開始
建立一個檔案夾，名字随便了（我這裡就叫 kbxmn），然後進入，右鍵選擇 Git Bash Here，如下圖。
然後使用
hexo init
指令，進行初始化 hexo 項目，然後使用
ls
來檢視檔案裡有什麼東西，效果如下圖所示。
這裡邊隻需要在主目錄下的 _config.yml ，具體如下
# Site
title: 苦逼小碼農的部落格 // 網站名稱
author: 苦逼小碼農 // 作者
deploy:
type: git // 部署的類型為 git
repo: [email protected]:kbxmn/kbxmn.github.io.git //位址
這樣簡單的部署就完成了。然後安裝 hexo-deployer-git 自動部署釋出工具，使用指令
npm install hexo-deployer-git --save
。
使用
hexo clean && hexo g && hexo s
，可以使用
localhost:4000
即可在浏覽器中預覽。然後想要推送到 Github 倉庫，需要使用
hexo clean && hexo g && hexo d
。
最後，可以在浏覽器中使用 GitHub 倉庫的名稱通路了，即我的就是
kbxmn.github.io
。
如果覺得文章寫的還行，請關注我的微信公衆号，微信搜尋 苦逼小碼農 或者掃描下方二維碼。