hexo在GitHub上搭建我的博客（詳細教程）

搭建免費我的博客並進行自定義配置，打造屬於本身的我的世界。本系列文章在 github.com/freestylefl… 持(huan)續(ying)更(jia)新(入)中，歡迎有興趣的童鞋們關注。

1、前言

一、歡迎訪問最新版博客：freestylefly.github.io//

二、主要含：搭建我的博客詳細步驟，hexo的next的個性化設置 目前個人博客含有的效果： 標籤、分類、留言、評論，在線24小時客服，卡通動漫人物、音樂自動播放、讚揚、字數統計、訪問統計，自動更換背景圖片、閱讀量統計、linkes、歸檔、搜索、自定義動畫、公益40四、RSS、我的信息欄展現、文章目錄、自定義菜單欄。。。等等，更多精彩等你發現。

三、使用github pages服務搭建博客的好處有：

全是靜態文件，訪問速度快；
免費方便，不用花一分錢就能夠搭建一個自由的我的博客，不須要服務器不須要後臺；
能夠隨意綁定本身的域名，不仔細看的話根本看不出來你的網站是基於github的；
數據絕對安全，基於github的版本管理，想恢復到哪一個歷史版本都行；
博客內容能夠輕鬆打包、轉移、發佈到其它平臺；
等等；
複製代碼

2、準備工做

在開始一切以前，你必須已經：

• 有一個github帳號，沒有的話去註冊一個；
• 安裝了node.js、npm，並瞭解相關基礎知識；
• 安裝了git for windows（或者其它git客戶端）

本文所使用的環境：

• Windows10
• node.js@10.16.0
• git@1.9.2
• hexo@6.4.0

2.一、安裝Node.js

node -v
複製代碼

2.二、安裝Git和配置好Git環境

安裝成功的象徵就是在電腦上任何位置鼠標右鍵可以出現以下兩個選擇Git GUI Here和Git Bash Here。查看git是否安裝成功，在cmd命令行中輸入：

git --version
複製代碼

3、在GitHub上搭建博客

3.一、建立倉庫

新建一個名爲你的用戶名.github.io的倉庫，好比說，若是你的github用戶名是test，那麼你就新建test.github.io的倉庫（必須是你的用戶名，其它名稱無效），未來你的網站訪問地址就是 test.github.io 了，是否是很方便？

因而可知，每個github帳戶最多隻能建立一個這樣能夠直接使用域名訪問的倉庫。

幾個注意的地方：

註冊的郵箱必定要驗證，不然不會成功；
倉庫名字必須是：username.github.io，其中username是你的用戶名；
倉庫建立成功不會當即生效，須要過一段時間，大概10-30分鐘，或者更久，個人等了半個小時才生效；
複製代碼

3.二、綁定域名

固然，你不綁定域名確定也是能夠的，就用默認的 xxx.github.io 來訪問，若是你想更個性一點，想擁有一個屬於本身的域名，那也是OK的。

首先你要註冊一個域名，域名註冊之前老是推薦去godaddy，如今以爲其實國內的阿里雲也挺不錯的，價格也不貴，畢竟是大公司，放心！

綁定域名分2種狀況：帶www和不帶www的。

域名配置最多見有2種方式，CNAME和A記錄，CNAME填寫域名，A記錄填寫IP，因爲不帶www方式只能採用A記錄，因此必須先ping一下你的用戶名.github.io的IP，而後到你的域名DNS設置頁，將A記錄指向你ping出來的IP，將CNAME指向你的用戶名.github.io，這樣能夠保證不管是否添加www均可以訪問，以下：

而後到你的github項目根目錄新建一個名爲CNAME的文件（無後綴），裏面填寫你的域名，加不加www看你本身喜愛，由於經測試：

• 若是你填寫的是沒有www的，好比 mygit.me，那麼不管是訪問 www.mygit.me 仍是 mygit.me ，都會自動跳轉到 mygit.me
• 若是你填寫的是帶www的，好比 www.mygit.me ，那麼不管是訪問 www.mygit.me 仍是 mygit.me ，都會自動跳轉到 www.mygit.me
• 若是你填寫的是其它子域名，好比 abc.mygit.me，那麼訪問 abc.mygit.me 沒問題，可是訪問 mygit.me ，不會自動跳轉到 abc.mygit.me

另外說一句，在你綁定了新域名以後，原來的你的用戶名.github.io並無失效，而是會自動跳轉到你的新域名。

3.3 、配置SSH key

爲何要配置這個呢？由於你提交代碼確定要擁有你的github權限才能夠，可是直接使用用戶名和密碼太不安全了，因此咱們使用ssh key來解決本地和服務器的鏈接問題。

$ cd ~/. ssh #檢查本機已存在的ssh密鑰
複製代碼

若是提示：No such file or directory 說明你是第一次使用git。

ssh-keygen -t rsa -C "郵件地址"
複製代碼

而後連續3次回車，最終會生成一個文件在用戶目錄下，打開用戶目錄，找到.ssh\id_rsa.pub文件，記事本打開並複製裏面的內容，打開你的github主頁，進入我的設置 -> SSH and GPG keys -> New SSH key：

將剛複製的內容粘貼到key那裏，title隨便填，保存。

3.四、測試是否成功

$ ssh -T git@github.com # 注意郵箱地址不用改
複製代碼

若是提示Are you sure you want to continue connecting (yes/no)?，輸入yes，而後會看到：

Hi liuxianan! You've successfully authenticated, but GitHub does not provide shell access.

看到這個信息說明SSH已配置成功！

此時你還須要配置：

在博客blog目錄下，右鍵選Git Baes Here,命令行中輸入，其中的name和email替換成你本身的用戶名和郵箱

$ git config --global user.name "liuxianan"// 你的github用戶名，非暱稱
$ git config --global user.email  "xxx@qq.com"// 填寫你的github註冊郵箱
複製代碼

設置全局的簽名，每次提交的時候都會有對應簽名

4、使用hexo寫博客

4.1. hexo簡介

Hexo是一個簡單、快速、強大的基於 Github Pages 的博客發佈工具，支持Markdown格式，有衆多優秀插件和主題。

官網： hexo.io github: github.com/hexojs/hexo

4.2. 原理

因爲github pages存放的都是靜態文件，博客存放的不僅是文章內容，還有文章列表、分類、標籤、翻頁等動態內容，假如每次寫完一篇文章都要手動更新博文目錄和相關連接信息，相信誰都會瘋掉，因此hexo所作的就是將這些md文件都放在本地，每次寫完文章後調用寫好的命令來批量完成相關頁面的生成，而後再將有改動的頁面提交到github。

4.3. 注意事項

安裝以前先來講幾個注意事項：

1. 不少命令既能夠用Windows的cmd來完成，也可使用git bash來完成，可是部分命令會有一些問題，爲避免沒必要要的問題，建議所有使用git bash來執行；
2. hexo不一樣版本差異比較大，網上不少文章的配置信息都是基於2.x的，因此注意不要被誤導；
3. hexo有2種_config.yml文件，一個是根目錄下的全局的_config.yml，一個是各個theme下的；

4.四、安裝Hexo

在本身認爲合適的地方創個文件夾，我是在D盤建了一個blog文件夾。而後經過命令行進入到該文件夾裏面

$ npm install -g hexo

複製代碼

4.5. 初始化

在電腦的某個地方新建一個名爲hexo的文件夾（名字能夠隨便取），好比個人是F:\Workspaces\hexo，因爲這個文件夾未來就做爲你存放代碼的地方，因此最好不要隨便放。

$ cd /f/Workspaces/hexo/
$ hexo init

複製代碼

hexo會自動下載一些文件到這個目錄，包括node_modules，目錄結構以下圖：

$ hexo g # 生成
$ hexo s # 啓動服務

複製代碼

執行以上命令以後，hexo就會在public文件夾生成相關html文件，這些文件未來都是要提交到github去的：

hexo s是開啓本地預覽服務，打開瀏覽器訪問 http://localhost:4000 便可看到內容，不少人會碰到瀏覽器一直在轉圈可是就是加載不出來的問題，通常狀況下是由於端口占用的緣故，由於4000這個端口太常見了，解決端口衝突問題請參考這篇文章：

blog.liuxianan.com/windows-por…

4.6. 修改主題

既然默認主題很醜，那咱們別的不作，首先來替換一個好看點的主題。這是 官方主題。

我的比較喜歡的2個主題：hexo-theme-jekyll 和 hexo-theme-yilia。

首先下載這個主題：

$ cd /f/Workspaces/hexo/
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

複製代碼

下載後的主題都在這裏：

修改_config.yml中的theme: landscape改成theme: yilia，而後從新執行hexo g來從新生成。

若是出現一些莫名其妙的問題，能夠先執行hexo clean來清理一下public的內容，而後再來從新生成和發佈。

4.7. 上傳以前

在上傳代碼到github以前，必定要記得先把你之前全部代碼下載下來（雖然github有版本管理，但備份一下老是好的），由於從hexo提交代碼時會把你之前的全部代碼都刪掉。

4.8. 上傳到github

若是你一切都配置好了，發佈上傳很容易，一句hexo d就搞定，固然關鍵仍是你要把全部東西配置好。

首先，ssh key確定要配置好。

其次，配置_config.yml中有關deploy的部分：

正確寫法：

deploy:
  type: git
  repository: git@github.com:liuxianan/liuxianan.github.io.git
  branch: master

複製代碼

錯誤寫法：

deploy:
  type: github
  repository: https://github.com/liuxianan/liuxianan.github.io.git
  branch: master

複製代碼

後面一種寫法是hexo2.x的寫法，如今已經不行了，不管是哪一種寫法，此時直接執行hexo d的話通常會報以下錯誤：

Deployer not found: github 或者 Deployer not found: git

複製代碼

緣由是還須要安裝一個插件：

npm install hexo-deployer-git --save

複製代碼

其它命令不肯定，部署這個命令必定要用git bash，不然會提示Permission denied (publickey).

打開你的git bash，輸入hexo d就會將本次有改動的代碼所有提交，沒有改動的不會：

4.9. 保留CNAME、README.md等文件

提交以後網頁上一看，發現之前其它代碼都沒了，此時不要慌，一些非md文件能夠把他們放到source文件夾下，這裏的全部文件都會原樣複製（除了md文件）到public目錄的：

因爲hexo默認會把全部md文件都轉換成html，包括README.md，全部須要每次生成以後、上傳以前，手動將README.md複製到public目錄，並刪除README.html。

4.10. 經常使用hexo命令

常見命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面
hexo generate #生成靜態頁面至public目錄
hexo server #開啓預覽訪問端口（默認端口4000，'ctrl + c'關閉server）
hexo deploy #部署到GitHub
hexo help  # 查看幫助
hexo version  #查看Hexo的版本

複製代碼

縮寫：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

複製代碼

組合命令：

hexo s -g #生成並本地預覽
hexo d -g #生成並上傳

複製代碼

4.11. _config.yml

這裏面都是一些全局配置，每一個參數的意思都比較簡單明瞭，因此就不做詳細介紹了。

須要特別注意的地方是，冒號後面必須有一個空格，不然可能會出問題。

4.12. 寫博客

定位到咱們的hexo根目錄，執行命令：

hexo new 'my-first-blog'

複製代碼

hexo會幫咱們在_posts下生成相關md文件：

咱們只須要打開這個文件就能夠開始寫博客了，默認生成以下內容：

固然你也能夠直接本身新建md文件，用這個命令的好處是幫咱們自動生成了時間。

通常完整格式以下：

---
title: postName #文章頁面上的顯示名稱，通常是中文
date: 2013-12-02 15:30:16 #文章生成時間，通常不改，固然也能夠任意修改
categories: 默認分類 #分類
tags: [tag1,tag2,tag3] #文章標籤，可空，多標籤請用格式，注意:後面有個空格
description: 附加一段文章摘要，字數最好在140字之內，會出如今meta的description裏面
---

如下是正文

複製代碼

那麼hexo new page 'postName'命令和hexo new 'postName'有什麼區別呢？

hexo new page "my-second-blog"

複製代碼

生成以下：

最終部署時生成：hexo\public\my-second-blog\index.html，可是它不會做爲文章出如今博文目錄。

4.12.1. 寫博客工具

能夠用typora來進行博客的編寫或者用CSDN的編輯器也是很不錯的選擇，用VScode的Markdown-toc插件來爲咱們的文章自動生成目錄。

5、利用hexo的next主題搭建博客

next主題搭建博客很帥，能夠看我博客效果。

5.1 、next主題安裝

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

複製代碼

5.二、啓用主題

與全部 Hexo 主題啓用的模式同樣。 當 克隆/下載 完成後，打開 站點配置文件， 找到 theme 字段，並將其值更改成 next。

5.三、 驗證主題

首先啓動 Hexo 本地站點，並開啓調試模式（即加上 --debug），整個命令是 hexo s --debug。 在服務啓動的過程，注意觀察命令行輸出是否有任何異常信息，若是你碰到問題，這些信息將幫助他人更好的定位錯誤。 當命令行輸出中提示出：

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop. 此時便可使用瀏覽器訪問 http://localhost:4000，檢查站點是否正確運行。

5.四、主題的配置

在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml。 其中，一份位於站點根目錄下，主要包含 Hexo 自己的配置；另外一份位於主題目錄下，這份配置由主題做者提供，主要用於配置主題相關的選項。

爲了描述方便，在如下說明中，將前者稱爲 站點配置文件， 後者稱爲 主題配置文件。 你能夠訪問 Hexo 的文檔 瞭解如何安裝 Hexo病進行 站點配置文件的配置 簡單的設置能夠參考： NEXT中文文檔 NEXT主題詳細配置

5.五、添加博客評論功能

採用leancloud進行博客評論，具體怎麼設置往下看

5.六、 添加閱讀量統計

請看此文

5.七、爲博客添加音樂並自動播放

APlayer能夠實現，其中音樂外鏈能夠在這裏找到： www.ytmp3.cn/ 在這裏能夠找到不少歌曲的外鏈，而後替換成本身喜歡的歌就能夠了。

5.八、添加在線聯繫功能

當有用戶在網頁上給你留言後會經過郵件或者微信通知你，能夠及時的解答用戶的疑問。 最終的效果能夠參考我博客的右下角,有個聊天的按鈕,效果以下所示:

配置方法以下: 首先到DaoVoice上註冊一個帳號,註冊完成後會獲得一個app_id，獲取appid的步驟以下圖所示:

以next主題爲例,打開/themes/next/layout/_partials/head.swig文件添加以下

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

複製代碼

接着打開主題配置文件_config.yml，添加以下代碼：

# Online contact 
daovoice: true
daovoice_app_id: 這裏輸入前面獲取的app_id

複製代碼

最後執行hexo clean && hexo g && hexo s就能看到效果了。

須要注意的是,next主題下聊天的按鈕會和其餘按鈕重疊到一塊兒，能夠到聊天設置，修改下按鈕的位置:

最後到右上角選擇管理員，微信綁定,能夠綁定你的微信號，關注公衆號後打開小程序，就能夠實時收發消息，有新的消息也會經過微信通知，設置頁面以下:

當有人在你的博客留言，微信和郵箱就能夠收到相應的提示

6、參考文章

一、next個性化主題配置 二、Hexo的Next主題詳細配置 三、爲NexT主題添加文章閱讀量統計功能 四、Hexo的NexT主題：添加來必力評論 五、使用hexo+github搭建免費我的博客詳細教程 六、Hexo添加不蒜子和LeanCloud統計無標題文章