Hexo + Github Pages搭建的我的博客

這個不算是新手的搭建流程，若是你恰巧看見這篇文章，但願你已經安裝好node、git等軟件，由於第一步的環境搭建準備並無詳寫，默認都會了。但願能解決你的問題。

步驟：

1、 搭建環境準備
2、安裝hexo
3、配置hexo，將其與github page 聯繫起來
4、發佈文章
5、更換主題及簡單配置

1、 搭建環境準備

這裏包括node.js的安裝、git的安裝、git帳號註冊和新建git項目
注意： 新建項目的時候，項目名稱也就是Repository name的格式必須是：yourgithbuName.github.io，這裏的yourgithbuName必須和你的github名稱保持一致

這個問題下面會說到，由於我沒注意，也踩了這個坑了。

2、 安裝hexo

cnpm install hexo -g

安裝完畢後，不肯定是否安裝成功，能夠經過 hexo -v查詢，會出現下面信息：

以後新建一個空的文件夾，暫且叫mjblog吧，在mjblog文件夾下使用gitbash初始化項目 hexo init。
過程當中，若是遇到網絡很差，可能會出現超時的問題，問是否要嘗試刪除你新建的文件夾，填n(NO)就行了。

Start blogging with Hexo! 成功，而且文件夾裏多了hexo相關文件.

scaffolds            # 模板文件
source               # 文章的集放點。裏面有個一篇默認的hello-world.md
node_modules         # 相關模塊包
themes               # 主題包。站點的最終樣子會根據主題來生成頁面
_config.yml          # 站點配置，例如和github pages相關的配置都在這裏填寫

執行 hexo s(hexo server)，啓動本地服務，會出現下面這句提示：

瀏覽器打開http://localhost:4000/，就會看到hexo的默認主題頁面了。

3、 配置hexo，將其與github page 聯繫起來

在mjblog文件夾的下有個_config.yml的文件。打開找到Deployment這個字段(在文末),添加這句的git pages信息。例以下面是個人對應配置。

deploy:
  type: git
  repo: git@github.com:mjtomato/mjliublog.github.io.git
  branch: master

repo這個地址去項目上覆制黏貼就好了。
想知道有沒有成功，生成部署一下就好了。但這以前，先了解hexo幾個經常使用命令行：

1. hexo generate (hexo g)   #生成靜態文件，會在當前目錄下生成一個新的叫作public的文件夾
2. hexo server (hexo s)     #啓動本地web服務，用於博客的預覽
3. hexo deploy (hexo d)     #部署播客到遠(好比github, heroku等平臺)
4. hexo new "postName"      #新建文章
5. hexo new page "pageName" #新建頁面
6. hexo clean               #刪除已經生成的靜態頁面(即public文件夾)

ok,如今就能夠執行命令了。
第一步：生成靜態資源

hexo g

第二步：部署

hexo d

但不少時候，這兩個步驟是能夠一塊的。

hexo d -g

若是不出意外，這樣就能夠正常生成部署了。
可是我這邊卻出現問題：deployer not found: git

解決問題：安裝一個拓展

cnpm install hexo-deployer-git --save

以後從新生成部署hexo d -g，按道理來講應該是成功了。但我這裏發生一個小插曲。我在部署過程當中，也在執行着本地服務:hexo server，因此它一直提示下面這個錯誤。關閉本地服務那個進程就行了。

正常狀況下會提示：
Deploy done: git

而後按着git提示的網址訪問，發現東西是出來的，可是css樣式，js代碼引入路徑都錯誤了...

奇了怪了，都是按着教程走，怎麼到我這就不行了呢。
剛開始想着是否是個人_config.yml文件配置錯了，又從新走了一遍，仍是不行。又去翻個人git項目，是否是我哪裏寫錯了，始終沒發現問題。
最後對比了好幾篇搭建文章，終於發現，個人博客地址格式跟別人的是不同的，開始覺得是改版了沒留意到這個問題。別人都是 https://xxx.github.io/， 而個人是這樣的：

原來在建項目的時候，要注意一點：
項目名稱也就是Repository name的格式必須是：yourgithbuName.github.io，這裏的yourgithbuName必須和你的github名稱保持一致

最終會出現這句話：

Your site is ready to be published at https://mjtomato.github.io/.

打開上面的網址，出現Welcome to GitHub Pages，說明成功了，主題是和你在GitHub Pages選的是同樣的。

接着更新_config.yml裏面的配置repo,把以前錯誤的項目地址改爲如今的，再從新生成部署一次，刷新頁面，發現變成hexo默認主題了。

成功。https://mjtomato.github.io/

4、 發佈文章

其實發布文章和上面部署的步驟基本一致了，這裏就從零新建文章到部署到git上走一次。

順序是：新建文章>本地web查看>刪除以前的靜態資源 hexo clean>生成新的靜態資源 hexo g>部署到git上git d(後面兩步能夠合併成：生成部署資源 hexo d -g)

1. 新建文章
能夠在source>_posts直接右鍵新建一個markdown格式的文件，也能夠經過命令行方式新建。

hexo new "testName"

就會發現_post文件夾裏多了一個testName文件。
裏面默認有三個屬性:

---
title: testName                 #testName 就是new時候的名字
date: 2018-07-15 14:41:17       #默認帶上新建文件夾的時間
tags:                           #文章的標籤，可本身添加分類
---
這裏就是寫文章內容的地方了。

2. 刪除以前的靜態資源 hexo clean
通常這一步正常狀況下不執行也能夠，可是當 hexo d -g 執行完，發現有問題的時候或者是不成功時，就頗有必要先清除一下不完整public文件或者是清除一下緩存了，這裏是會刪除整個public文件的。而後再從新執行一次 hexo d -g ，直至成功。

3. 生成部署 hexo d -g
執行完hexo d -g ， 沒問題的話，刷新本身的頁面，就會看見新添加的文章了。

5、更換主題及簡單配置

1. 安裝主題
主題選擇裏有不少不一樣風格選擇，我選的是比較冷淡風的next主題
在目錄下打開gitbash，輸入下面命令行

git clone git@github.com:theme-next/hexo-theme-next.git themes/next

下載完畢以後會在themes文件夾下看見多了一個next文件，這個就是next主題包了。

2. 啓用next主題
打開目錄下的_config.yml文件，找到theme字段，將原來的landscape換成next。
再重啓下本地服務 hexo s 就能夠看到新的主題已經更換了。

ps: 沒錯，這裏你會發現個人名稱、描述、做者都改爲本身的了，這個是在站點配置文件_config.yml裏修改的。(就在文件開頭)

# Site
title: MJBlog                    # 你的博客名字
subtitle:                        # 副標題
description: 慢慢嘗試，總會有的！  # 描述
author: jiaminLiu                # 做者名稱
language: zh-Hans                # 站點語言
timezone:                        # 時區

修改更新、重啓本地服務就好啦~~

3. 更改next主題配置
每一個主題包下面都有個和站點目錄下同名的_config.yml文件，修改主題包下的配置會對應修改主題展現。包括了主題設計、站點語言、站點菜單等等。
下面我按本身的須要對應修改：(如下說的_config.yml文件都是指主題包下面的)

1. 主題設計
   搜索Schemes，在下面發現有四種選擇，每一個都看了一下，最後我選的是Gemini，其實Gemini和Pisces好像沒差。

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

可是呢，這裏有個問題，選擇這個主題設計以後，你會發現頁面上的菜單都變成德語了？？

查了下緣由，原來是Hexo 在生成主題的時候將使用你選擇的主題設計去查找對應的語言翻譯，並提取顯示文本。這些翻譯包在主題包下的language文件夾裏。
像我選的Gemini對應的語言翻譯是de.yml。因而，我將de.yml中德語都改爲中文了(最簡單作法，找到zh-CN.yml那份，而後複製過去覆蓋原來的，就搞定了，耶！)

1. 站點語言
   上一步完成以後，發現整個頁面又變成英文了。這個又爲啥啊？？並且個人站點配置裏也已說明是中文了。
   原來這個主題默認翻譯是英文的，不信能夠看看default.yml這個文件，裏面就只寫着en.yml。因此咱們還須要把主題包下面的language字段的值改成zh-Hans

2. 設置頭像
   搜索Sidebar Avatar，找到avatar，下面有個url字段，默認是這樣的

url: # /images/avatar.gif

須要將它打開，就是去掉#號。默認是個灰色的頭像，能夠找個本身喜歡的圖片放到source/images/下面
個人改爲這樣

url: /images/avatar.jpg

暫時我須要修改的就這麼多了，更多配置，能夠查看官方文檔

以上就是Hexo + Github Pages搭建的我的博客簡單版。暫時使用是沒問題的啦。其餘的功能，例如站點統計，閱讀次數統計等以後再添加。

---

添加百度統計

1. 註冊一個 百度統計 帳號
2. 新增本身的網站
   
   例如個人：
   網站域名: mjtomato.github.io
   網站首頁：https://mjtomato.github.io/
   填完這兩個點肯定就能夠了
3. 獲取百度統計id
   在代碼管理 > 代碼獲取頁面有段統計代碼
   
   複製我用紅色覆蓋那個統計id
4. 修改baidu_analytics字段
   在主題包下的配置文件裏找到baidu_analytics字段，將複製的統計id設置成它的值。

搞定~~~

閱讀數統計
next主題做爲github上星數最多的hexo主題，固然已經有人造好輪子了。並且next主題已經合併這個功能了，因此咱們只須要配置_config.yml就能夠了，請參考配置LeanCloud

照着上面步驟完成以後，刷新本身的頁面，發現文章內的閱讀數出錯了

點擊控制檯的連接進去，按着提示完成便可傳送門