使用GitHub+Hexo搭建個人博客

 本篇文章主要是針對在校大學生的，小雷我也是剛剛從學校的懷抱脫離，我對大學生在學校的學習、生活情況還是有發言權的。

 能自律的大學生很少，多少都有某個導火索促使你去做某件事，比如英語四六級、全國計算機等級，學校硬性要求學生考。我所在的大學外賣情況很嚴重，校外的外賣，學校食堂的外賣，送到宿舍的外賣，很瘋狂。這是懶癌的福音，也是懶癌的再生父母；只要沒課，可以呆在宿舍一整天，如果不斷網我還可以24小時擁抱我的手機。但如果你有了自己想要維持的東西，可能你就能戰勝你的懶癌，本文會教大家如何動手去搭建自己的個人博客。

一、前期準備

1.1 相關網站

 在搭建個人博客的過程中，你可能會使用到下面幾個網站。在這幾個網站中都有相應的官方文檔及教程。如果官方文檔不能滿足你，那麼請Google。

• Github 官網
• Github Pages
• Hexo 官網
• Node.js 官網
• Git 官網

二、搭建Git環境

2.1 註冊Github

 進入Github 網站，按照提示進行註冊，然後登錄。

 登錄完成之後，在你的主頁點擊圖標 New Repository 創建一個新的版本庫，因爲我們是使用 Github Pages 去搭建我們的靜態博客，所以版本庫的名稱應該是你的用戶名+.github.io。如：我的用戶名是：griabcrh，那麼版本庫的名字應該是： griabcrh.github.io ，這個是一定不能出錯的。因爲之後你將要訪問的你的博客地址就是： https://griabcrh.github.io 。

 至此，Github賬號創建完成，GIthub Pages 所需要的版本庫也創建好了。

2.2 本地安裝Git

 進入 Git 官網，下載相應的 Git 版本，下載完成之後按照引導安裝 Git 。安裝完成之後在開始菜單中會有一個 Git Bash 。這是一個類似於Liunx的終端，在裏面可以模擬Linux下的終端進行操作。

2.3 配置SSH

 打開 Git Bash ，執行下面的命令生成 SSH 訪問私鑰及公鑰。

$ ssh-keygen -t rsa -C "[email protected]"

 輸入命令回車之後會提示你輸入一些東西，不用管。一直回車到底就好了。然後你的 ~/.ssh 文件下就會生成兩個文件 id_rsa 和 id_rsa.pub 。

 打開你的 Github -> setting -> SSH Keys 。然後點擊 New SSH Key 創建一個新的SSH Key。Title 可以用你的計算機名，可以用以區分。將文件 id_rsa.pub 中的所以內容複製粘貼到 Key 下面。然後使用下面的命令測試是否可以連接上 Github 。

$ ssh -T [e-mail]

 如果出現下圖所示內容則證明連接成功。

三、安裝Hexo

 Hexo的安裝在其官方文檔中有很詳細的說明。下面將簡單介紹Hexo的安裝。

3.1 安裝前提

 安裝 Node.js ，請進入Node.js 的官網下載安裝。
 安裝 Git ，前面已經說明，不再贅述。

3.2 安裝Hexo

 上面兩個工具安裝完整之後，打開 Git Bash ，只需要使用npm即可完成Hexo的安裝。

$ npm install -g hexo-cli

 安裝Hexo完成之後，執行下面的命令，Hexo將會在你制定的文件夾中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

 新建完成後，文件夾下的目錄如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

• _config.yml 文件是網站的配置文件，可以在其中配置網站的大部分參數。
• package.json 文件是應用程序的信息。
• source 是資源文件夾，是用來存放用戶資源的地方。
• themes 是主題文件夾，Hexo會根據主題來生成不同的靜態頁面。
• scaffolds是模板件夾，當新建文章的時候，Hexo會根據模板來建立文件。

3.3 修改主題

 我使用的是NexT主題，下面只介紹怎麼安裝這種主題，其他主題可以在Hexo Themes、github裏面尋找。

 先進入你的Hexo文件夾。然後使用下面的命令clone下NexT主題。

$ git clone https://github.com/iissnan/hexo-theme-next.git themes/next

 然後打開Hexo主文件夾下的_config.yml，修改其中的theme 屬性。theme: 後面要加空格。

theme: next

3.4 本地查看調試

 $ hexo g #生成靜態頁面，生成的內容在public文件夾下。

 $ hexo s #啓動本地服務，進行文章預覽調試。hexo s –debug 命令可以用來調試

3.5 部署到Github Pages

 先使用下面的命令對Git進行初始配置。

$ git config --global user.name "your name"
$ git config --global user.email "[email protected]"

 然後打開Hexo主文件夾下的_config.yml，設置其中的deploy 參數，詳細請查看Hexo官方文檔中部署部分。

 我的設置如下所示：

deploy:
  type: git 
  repo: [e-mail]:griabcrh/griabcrh.github.io.git
  branch: master

 git地址建議使用SSH地址。在上面的參數設置好了之後，使用下面的命令安裝 hexo-deployer-git 插件，只有安裝了插件之後纔可以部署到Github Pages。

$ npm install hexo-deployer-git --save

 安裝完插件之後使用下面的命令進行部署：

$ hexo g #生成靜態文件
$ hexo d #部署到github

 還有一個更快捷的命令：

$ hexo d -g #在部署前先生成

3.6 NexT 主題拓展
 NexT 文檔 - NexT的詳細配置可以在這裏查看。

 NexT Github 地址 - 想要二次開發，可以Fork一下。

四、Hexo常用命令

 下面僅列出幾種常用的命令。更詳細的命令請查看Hexo官方文檔。

$ hexo clean #清理之前生成的內容，即public文件
$ hexo g #生成靜態文件
$ hexo d #部署
$ hexo s #啓動本地服務，可以通過http://localhost:4000查看
$ hexo s --debug #使用debug模式啓動服務

五 、Hexo集成百度統計

5.1 登錄 百度統計， 定位到站點的代碼獲取頁面

5.2 複製 hm.js? 後面那串統計腳本 id，如：

5.3 編輯 主題配置文件_config.yml， 修改字段 baidu_analytics 字段，值設置成你的百度統計腳本 id。

5.4 next主題設置首頁不顯示全文(只顯示預覽)

 進入hexo博客項目的themes/next目錄
 用文本編輯器打開_config.yml文件
 搜索”auto_excerpt”,把enable改爲對應的false改爲true，然後hexo d -g，再進主頁，問題就解決了！

5.5 將統計結果顯示在博客中

在\Hexo\themes\next\layout_partials中找到footer.swig,在結尾寫上

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
|<span id="busuanzi_container_site_uv">
  本站訪客數<span id="busuanzi_value_site_uv"></span>人次
</span>
|<span id="busuanzi_container_site_pv">
    本站總訪問量<span id="busuanzi_value_site_pv"></span>次
</span>

 更多關於統計的三方服務請自行去HEXO或NEXT官網查詢。

 版權聲明：本文爲博主原創文章，未經博主允許不得轉載

---

關注公衆號：猿小雷
獲取更多文章，第一之間掌握技術。
有問題請在公衆號內回覆，小雷會一一回答。