基於 Hexo + GitHub Pages 搭建我的博客（一）

前言：個人博客寫做之路

• 15 年剛上大學，第一次接觸公衆號，就萌生了建立一個公衆號寫點東西，但最終不了了之。

• 很快到了 16 年，開始接觸網上各大博客網站，接觸最多的當屬 CSDN，萌生了註冊一個博客，寫一點本身在學習上遇到的問題，分享一些本身的解決辦法，但最終仍是不了了之。

• 16 年暑假，自媒體橫行在全國各地，本身眼裏彷佛看到不少機會有彷佛異常模糊。一個偶然的機會讓我意識到必須開始弄個博客寫點東西了，當時的想法是，先註冊個頭條號，16年下半年開學再弄博客寫東西，這種事情不着急，時間一每天過，但這兩件事最終都沒作，不了了之。

• 時間一分一秒地到了17年，上半年這種註冊博客，寫博客的心態依然縈繞耳邊，但並無什麼實際行動。

• 終於到了17年6月份左右，去了一個地方回來後，我手忙腳亂，馬上在網上的平臺註冊了一個博客，然後開始寫本身學習上的東西。然後有急忙地註冊了一個微信公衆號，第一次開始使用鍵盤記錄本身的學生和生活，而我拖延了2年半的博客與寫做之路，也就今後開始。

• 網上的某博客平臺廣告不少，開始時我無從適應，不知道如何排版，加之打字速度與龜速相差不大，誇張點說就是，寫一篇幾百字的文章要一兩個小時，開不知道本身寫了什麼東西，但也第一次知道了寫做的收穫如此之大，具體能夠說上個三天三夜，這裏略。

• 慢慢地開始有了搭建一個屬於本身的我的博客，因而急功近利，淺藏輒止各類編程語言，最終無功而返，一事無成。

• 帶着那門基礎不紮實的 Java 語言，開始學習框架，搭建博客，儘管各類異常報錯，亂碼問題，還有點想放棄，卻又不甘，所以目前也還在學習。

• 慢慢開始了 WordPress ，cnblogs ，簡書，掘金等五花八門的信息篩選之中，最終仍是選擇了搭建一個 Hexo + GitHub Pages 的博客框架。

基於 Hexo + GitHub Page 搭建我的博客

1、搭建前準備

一、安裝 Git：Git 是目前世界上最早進的分佈式版本控制系統，能夠有效、高速的處理從很小到很是大的項目版本管理。

<!--more-->

（1）下載 Git：官網下載地址 （各大系統版本都有 Git，這裏以 Windows 版本爲例）

（2）雙擊下載的 Git 安裝包開始安裝

（3）一直點 Next，繼續安裝

​

​

​（4）點擊 Install ，完成安裝 ​

​（5）打開 cmd 命令窗口，執行如下命令，結果顯示 Git 版本，安裝成功

git --version

​（6）、推薦兩個學習 Git 的網站：

• 官方文檔：點擊這裏前往
• 廖雪峯網站教程：點擊這裏前往

二、安裝 Node.js：是一個基於 Chrome V8 引擎的 JavaScript 運行環境，輕量高效，Node.js 的包管理器 npm 是全球最大的開源庫生態系統。

（1）下載 Node.js：官網下載地址 （各大系統版本都有，這裏以 Windows 爲例）

（2）雙擊下載的 Node.js 安裝包開始安裝

（3）一直點 Next ，選擇安裝路徑，繼續安裝 ​

​（4）點擊 Install ，完成安裝 ​

​（5）打開 cmd 命令窗口，執行如下命令，顯示 Node.js 版本，安裝成功

node -v

2、搭建 Hexo 博客

一、安裝 Hexo，在電腦中新建一個 compassblog 文件夾存放本身的博客，在文件夾內右鍵點擊 Git Bash 進入命令窗口，執行如下代碼：

npm install -g hexo-cli

結果以下圖： ​

二、初始化 Hexo，獲得 hexo 文件夾，用於存放 Hexo 博客全部的文件，包括下面會講到的主題文件，Git Bash 窗口執行如下代碼：（無特別提示，如下代碼基本都在 Git Bash 命令窗口執行）

hexo init hexo

結果以下圖： ​

三、配置 Hexo，進入 hexo 文件夾安裝依賴，部署造成的文件，分別執行如下代碼：

cd hexo
npm install
hexo generate

結果以下圖： ​

四、啓動服務器：執行如下代碼，能夠看到服務器端口號是 4000

hexo server

結果以下圖：按 Ctrl + C 能夠中止服務器

五、打開瀏覽器，地址欄輸入http://localhost:4000/ ，結果以下圖，能夠看到，初始化的 Hexo 博客搭建成功，能夠訪問

3、將初始化的 Hexo 博客部署到 GitHub Pages

一、註冊一個 Github 賬號，新建一個倉庫，倉庫名爲：compassblog.github.io ，以下圖所示：（因爲個人倉庫已經建立，因此會顯示倉庫已經存在，而且這個倉庫的名稱必須嚴格按照 username.github.io 的格式來命名）

二、進入已經建好的倉庫，點擊 settings ，找到 GitHub Pages 選項，點擊 Choose a theme 選擇一個主題，而後點擊 select theme 選擇主題，以下圖所示：（到這一步其實已經能夠在地址欄訪問本身選擇的主題了，選擇主題這一步其實能夠忽略，但我以爲 GitHub 提供的主題仍是蠻酷的，因此就附上這一步吧）

三、配置 Git 我的信息：在 compassblog 目錄打開一個 Git Bash 窗口，輸入下面的命令

git config --global user.name " GitHub 用戶名 "
git config --global user.email " GitHub 郵箱 "

如個人是以下圖這樣輸入：

四、生成 SSH KEY，其實就是生成一個公鑰和密鑰，由於 GitHub 須要一個密鑰才能與本地相鏈接。執行如下命令，並連續按 3 次回車生成密鑰：

ssh-keygen -t rsa -C " 郵箱地址 "

我電腦是以下圖這樣：

五、SSH KEY 生成以後會默認保存在 C:/Users/電腦名用戶名/.ssh 目錄中，打開這個目錄，打開 id_rsa.pub 文件，複製所有內容，即複製密鑰。

六、打開 GitHub ，依次點擊 頭像-->Settings-->SSH and GPG keys-->New SSH key，將複製的密鑰粘貼到 key 輸入框，最後點擊 Add Key ，SSH KEY 配置成功，以下圖所示：

七、修改 hexo 文件夾下的 _config.yml 全局配置文件，修改 deploy 屬性代碼，將本地 hexo 項目託管到 GitHub 上，以下圖所示：

deploy:
  type: git		#部署的類型
  repository: git@github.com:compassblog/compassblog.github.io.git # 倉庫地址
  branch: master		#分支名稱
  message: hexo deploy	#提交信息

八、執行下面的命令，安裝 hexo-deployer-git 插件，快速把代碼託管到 GitHub 上

npm install hexo-deployer-git --sava

結果如圖所示：

九、執行下面的代碼命令，將 hexo 項目託管到 GitHub 上

hexo clean && hexo generate && hexo deploy

注：hexo generate 可縮寫爲 hexo g ， hexo deploy 可縮寫爲 hexo d

結果如圖所示：

十、瀏覽器地址欄輸入 https://username.github.io/ 訪問，能夠看到博客已經部署到 GitHub 上，正常訪問，以下圖所示：

最後寫幾句

我原本想一次把這個基於 Hexo + GitHub Pages 搭建我的博客流程發佈在一篇文章上面發佈出來的，但實在是太長了，很難一篇文章寫完。關於博客如何更換主題，如何進行個性更換，具體的配置等等不少的配置，後面找時間再持續的發佈出來，歡迎關注，Thanks 。

掃描二維碼關注微信公衆號，瞭解更多