hexo史上最全搭建教程

阿新 • • 發佈：2020-08-29

原文連結

現在市面上的部落格很多，如CSDN，部落格園，簡書等平臺，可以直接在上面發表，使用者互動做的好，寫的文章百度也能搜尋的到。缺點是比較不自由，會受到平臺的各種限制和噁心的廣告。

而自己購買域名和伺服器，搭建部落格的成本實在是太高了，不光是說這些購買成本，單單是花力氣去自己搭這麼一個網站，還要定期的維護它，對於我們大多數人來說，實在是沒有這樣的精力和時間。

那麼就有第三種選擇，直接在github page平臺上託管我們的部落格。這樣就可以安心的來寫作，又不需要定期維護，而且hexo作為一個快速簡潔的部落格框架，用它來搭建部落格真的非常容易。

Hexo簡介

Hexo是一款基於Node.js的靜態部落格框架，依賴少易於安裝使用，可以方便的生成靜態網頁託管在GitHub和Coding上，是搭建部落格的首選框架。大家可以進入

hexo官網進行詳細檢視，因為Hexo的建立者是臺灣人，對中文的支援很友好，可以選擇中文進行檢視。

教程分三個部分，

第一部分：hexo的初級搭建還有部署到github page上，以及個人域名的繫結。
第二部分：hexo的基本配置，更換主題，實現多終端工作，以及在coding page部署實現國內外分流
第三部分：hexo新增各種功能，包括搜尋的SEO，閱讀量統計，訪問量統計和評論系統等。

第一部分

hexo的初級搭建還有部署到github page上，以及個人域名的繫結。

Hexo簡介

Hexo是一款基於Node.js的靜態部落格框架，依賴少易於安裝使用，可以方便的生成靜態網頁託管在GitHub和Coding上，是搭建部落格的首選框架。大家可以進入

hexo官網進行詳細檢視，因為Hexo的建立者是臺灣人，對中文的支援很友好，可以選擇中文進行檢視。

Hexo搭建步驟

安裝Git
安裝Node.js
安裝Hexo
GitHub建立個人倉庫
生成SSH新增到GitHub
將hexo部署到GitHub
設定個人域名
釋出文章

1. 安裝Git

Git是目前世界上最先進的分散式版本控制系統，可以有效、高速的處理從很小到非常大的專案版本管理。也就是用來管理你的hexo部落格文章，上傳到GitHub的工具。Git非常強大，我覺得建議每個人都去了解一下。廖雪峰老師的Git教程寫的非常好，大家可以瞭解一下。Git教程

windows：到git官網上下載,

Download git,下載後會有一個Git Bash的命令列工具，以後就用這個工具來使用git。

linux：對linux來說實在是太簡單了，因為最早的git就是在linux上編寫的，只需要一行程式碼

sudo apt-get install git

安裝好後，用git --version 來檢視一下版本

2. 安裝nodejs

Hexo是基於nodeJS編寫的，所以需要安裝一下nodeJs和裡面的npm工具。

windows：nodejs選擇LTS版本就行了。

linux：

sudo apt-get install nodejs
sudo apt-get install npm

安裝完後，開啟命令列

node -v
npm -v

檢查一下有沒有安裝成功

順便說一下，windows在git安裝完後，就可以直接使用git bash來敲命令行了，不用自帶的cmd，cmd有點難用。

3. 安裝hexo

前面git和nodejs安裝好後，就可以安裝hexo了，你可以先建立一個資料夾blog，然後cd到這個資料夾下（或者在這個資料夾下直接右鍵git bash開啟）。

輸入命令

npm install -g hexo-cli

依舊用hexo -v檢視一下版本

至此就全部安裝完了。

接下來初始化一下hexo

hexo init myblog

這個myblog可以自己取什麼名字都行，然後

cd myblog //進入這個myblog資料夾
npm install

新建完成後，指定資料夾目錄下有：

node_modules: 依賴包
public：存放生成的頁面
scaffolds：生成文章的一些模板
source：用來存放你的文章
themes：主題
** _config.yml: 部落格的配置檔案**

hexo g
hexo server

開啟hexo的服務，在瀏覽器輸入localhost:4000就可以看到你生成的部落格了。

大概長這樣：

使用ctrl+c可以把服務關掉。

4. GitHub建立個人倉庫

首先，你先要有一個GitHub賬戶，去註冊一個吧。

註冊完登入後，在GitHub.com中看到一個New repository，新建倉庫

建立一個和你使用者名稱相同的倉庫，後面加.github.io，只有這樣，將來要部署到GitHub page的時候，才會被識別，也就是xxxx.github.io，其中xxx就是你註冊GitHub的使用者名稱。我這裡是已經建過了。

點選create repository。

5. 生成SSH新增到GitHub

回到你的git bash中，

git config --global user.name "yourname"
git config --global user.email "youremail"

這裡的yourname輸入你的GitHub使用者名稱，youremail輸入你GitHub的郵箱。這樣GitHub才能知道你是不是對應它的賬戶。

可以用以下兩條，檢查一下你有沒有輸對

git config user.name
git config user.email

然後建立SSH,一路回車

ssh-keygen -t rsa -C "youremail"

這個時候它會告訴你已經生成了.ssh的資料夾。在你的電腦中找到這個資料夾。

ssh，簡單來講，就是一個祕鑰，其中，id_rsa是你這臺電腦的私人祕鑰，不能給別人看的，id_rsa.pub是公共祕鑰，可以隨便給別人看。把這個公鑰放在GitHub上，這樣當你連結GitHub自己的賬戶時，它就會根據公鑰匹配你的私鑰，當能夠相互匹配時，才能夠順利的通過git上傳你的檔案到GitHub上。

而後在GitHub的setting中，找到SSH keys的設定選項，點選New SSH key
把你的id_rsa.pub裡面的資訊複製進去。

在gitbash中，檢視是否成功

ssh -T [email protected]

6. 將hexo部署到GitHub

這一步，我們就可以將hexo和GitHub關聯起來，也就是將hexo生成的文章部署到GitHub上，開啟站點配置檔案 _config.yml，翻到最後，修改為
YourgithubName就是你的GitHub賬戶

deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

這個時候需要先安裝deploy-git ，也就是部署的命令,這樣你才能用命令部署到GitHub。

npm install hexo-deployer-git --save

然後

hexo clean
hexo generate
hexo deploy

其中 hexo clean清除了你之前生成的東西，也可以不加。
hexo generate 顧名思義，生成靜態文章，可以用 hexo g縮寫
hexo deploy 部署文章，可以用hexo d縮寫

注意deploy時可能要你輸入username和password。

得到下圖就說明部署成功了，過一會兒就可以在http://yourname.github.io 這個網站看到你的部落格了！！

7. 設定個人域名

現在你的個人網站的地址是 yourname.github.io，如果覺得這個網址逼格不太夠，這就需要你設定個人域名了。但是需要花錢。

註冊一個阿里雲賬戶,在阿里雲上買一個域名，我買的是 fangzh.top，各個字尾的價格不太一樣，比如最廣泛的.com就比較貴，看個人喜好咯。

你需要先去進行實名認證,然後在域名控制檯中，看到你購買的域名。

點解析進去，新增解析。

其中，192.30.252.153 和 192.30.252.154 是GitHub的伺服器地址。
注意，解析線路選擇預設，不要像我一樣選境外。這個境外是後面來做國內外分流用的,在後面的部落格中會講到。記得現在選擇預設！！

登入GitHub，進入之前建立的倉庫，點選settings，設定Custom domain，輸入你的域名fangzh.top

然後在你的部落格檔案source中建立一個名為CNAME檔案，不要字尾。寫上你的域名。

最後，在gitbash中，輸入

hexo clean
hexo g
hexo d

過不了多久，再開啟你的瀏覽器，輸入你自己的域名，就可以看到搭建的網站啦！

接下來你就可以正式開始寫文章了。

hexo new newpapername

然後在source/_post中開啟markdown檔案，就可以開始編輯了。當你寫完的時候，再

hexo clean
hexo g
hexo d

就可以看到更新了。

第二部分

hexo的基本配置，更換主題，實現多終端工作，以及在coding page部署實現國內外分流。

1. hexo基本配置

在檔案根目錄下的_config.yml，就是整個hexo框架的配置檔案了。可以在裡面修改大部分的配置。詳細可參考官方的配置描述。

網站

引數	描述
`title`	網站標題
`subtitle`	網站副標題
`description`	網站描述
`author`	您的名字
`language`	網站使用的語言
`timezone`	網站時區。Hexo 預設使用您電腦的時區。時區列表。比如說：`America/New_York`, `Japan`, 和 `UTC` 。

其中，description主要用於SEO，告訴搜尋引擎一個關於您站點的簡單描述，通常建議在其中包含您網站的關鍵詞。author引數用於主題顯示文章的作者。

網址

引數	描述
`url`	網址
`root`	網站根目錄
`permalink`	文章的永久連結格式
`permalink_defaults`	永久連結中各部分的預設值

在這裡，你需要把url改成你的網站域名。

permalink，也就是你生成某個文章時的那個連結格式。

比如我新建一個文章叫temp.md，那麼這個時候他自動生成的地址就是http://yoursite.com/2018/09/05/temp。

以下是官方給出的示例，關於連結的變數還有很多，需要的可以去官網上查詢永久連結。

引數	結果
`:year/:month/:day/:title/`	2013/07/14/hello-world
`:year-:month-:day-:title.html`	2013-07-14-hello-world.html
`:category/:title`	foo/bar/hello-world

再往下翻，中間這些都預設就好了。

theme: landscape

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: <repository url>
  branch: [branch]

theme就是選擇什麼主題，也就是在theme這個資料夾下，在官網上有很多個主題，預設給你安裝的是lanscape這個主題。當你需要更換主題時，在官網上下載，把主題的檔案放在theme資料夾下，再修改這個引數就可以了。

接下來這個deploy就是網站的部署的，repo就是倉庫(Repository)的簡寫。branch選擇倉庫的哪個分支。這個在之前進行github page部署的時候已經修改過了，不再贅述。而這個在後面進行雙平臺部署的時候會再次用到。

Front-matter

Front-matter 是檔案最上方以 --- 分隔的區域，用於指定個別檔案的變數，舉例來說：

title: Hello World
date: 2013/7/13 20:46:25
---

下是預先定義的引數，您可在模板中使用這些引數值並加以利用。

引數	描述
`layout`	佈局
`title`	標題
`date`	建立日期
`updated`	更新日期
`comments`	開啟文章的評論功能
`tags`	標籤（不適用於分頁）
`categories`	分類（不適用於分頁）
`permalink`	覆蓋文章網址

其中，分類和標籤需要區別一下，分類具有順序性和層次性，也就是說 Foo, Bar 不等於 Bar, Foo；而標籤沒有順序和層次。

categories:
- Diary
tags:
- PS3
- Games

layout（佈局）

當你每一次使用程式碼

hexo new paper

它其實預設使用的是post這個佈局，也就是在source資料夾下的_post裡面。

Hexo 有三種預設佈局：post、page 和 draft，它們分別對應不同的路徑，而您自定義的其他佈局和 post 相同，都將儲存到 source/_posts 資料夾。

佈局	路徑
`post`	`source/_posts`
`page`	`source`
`draft`	`source/_drafts`

而new這個命令其實是：

hexo new [layout] <title>

只不過這個layout預設是post罷了。

page

如果你想另起一頁，那麼可以使用

hexo new page board

系統會自動給你在source資料夾下建立一個board資料夾，以及board資料夾中的index.md，這樣你訪問的board對應的連結就是http://xxx.xxx/board

draft

draft是草稿的意思，也就是你如果想寫文章，又不希望被看到，那麼可以

hexo new draft newpage

這樣會在source/_draft中新建一個newpage.md檔案，如果你的草稿檔案寫的過程中，想要預覽一下，那麼可以使用

hexo server --draft

在本地埠中開啟服務預覽。

如果你的草稿檔案寫完了，想要發表到post中，

hexo publish draft newpage

就會自動把newpage.md傳送到post中。

2. 更換主題

到這一步，如果你覺得預設的landscape主題不好看，那麼可以在官網的主題中，選擇你喜歡的一個主題進行修改就可以啦。點這裡

這裡有200多個主題可以選。不過最受歡迎的就是那麼幾個，比如NexT主題，非常的簡潔好看，大多數人都選擇這個，關於這個的教程也比較多。不過我選擇的是hueman這個主題，好像是從WordPress移植過來的，展示效果如下：

不管怎麼樣，至少是符合我個人的審美。

直接在github連結上下載下來，然後放到theme資料夾下就行了，然後再在剛才說的配置檔案中把theme換成那個主題資料夾的名字，它就會自動在theme資料夾中搜索你配置的主題。

而後進入hueman這個資料夾，可以看到裡面也有一個配置檔案_config.xml，貌似它預設是_config.xml.example，把它複製一份，重新命名為_config.xml就可以了。這個配置檔案是修改你整個主題的配置檔案。

menu（選單欄）

也就是上面選單欄上的這些東西。

其中，About這個你是找不到網頁的，因為你的文章中沒有about這個東西。如果你想要的話，可以執行命令

hexo new page about

它就會在根目錄下source資料夾中新建了一個about資料夾，以及index.md，在index.md中寫上你想要寫的東西，就可以在網站上展示出來了。

如果你想要自己再自定義一個選單欄的選項，那麼就

hexo new page yourdiy

然後在主題配置檔案的menu選單欄新增一個 Yourdiy : /yourdiy，注意冒號後面要有空格，以及前面的空格要和menu中預設的保持整齊。然後在languages資料夾中，找到zh-CN.yml，在index中新增yourdiy: '中文意思'就可以顯示中文了。

customize(定製)

在這裡可以修改你的個人logo，預設是那個hueman，在source/css/images資料夾中放入自己要的logo，再改一下url的連結名字就可以了。

favicon是網站中出現的那個小圖示的icon，找一張你喜歡的logo，然後轉換成ico格式，放在images資料夾下，配置一下路徑就行。

social_links ，可以顯示你的社交連結，而且是有logo的。

tips:

在這裡可以新增一個rss功能，也就是那個符號像wifi一樣的東西。

新增RSS

1. 什麼是RSS？

RSS也就是訂閱功能，你可以理解為類似與訂閱公眾號的功能，來訂閱各種部落格，雜誌等等。

2. 為什麼要用RSS？

就如同訂閱公眾號一樣，你對某個公眾號感興趣，你總不可能一直時不時搜尋這個公眾號來看它的文章吧。部落格也是一樣，如果你喜歡某個博主，或者某個平臺的內容，你可以通過RSS訂閱它們，然後在RSS閱讀器上可以實時推送這些訊息。現在網上的垃圾訊息太多了，如果你每一天都在看這些訊息中度過，漫無目的的瀏覽，只會讓你的時間一點一點的流逝，太不值得了。如果你關注的博主每次都發的訊息都是精華，而且不是每一天十幾條几十條的轟炸你，那麼這個博主就值得你的關注，你就可以通過RSS訂閱他。

在我的理解中，如果你不想每天都被那些沒有質量的訊息轟炸，只想安安靜靜的關注幾個博主，每天看一些有質量的內容也不用太多，那麼RSS訂閱值得你的擁有。

3. 新增RSS功能

先安裝RSS外掛

npm i hexo-generator-feed

而後在你整個專案的_config.yml中找到Extensions，新增：

# Extensions
## Plugins: https://hexo.io/plugins/
#RSS訂閱
plugin:
- hexo-generator-feed
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

這個時候你的RSS連結就是域名/atom.xml了。

所以，在主題配置檔案中的這個social links，開啟RSS的頁面功能，這樣你網站上就有那個像wifi一樣符號的RSS logo了，注意空格。

rss: /atom.xml

4. 如何關注RSS？

首先，你需要一個RSS閱讀器，在這裡我推薦inoreader，宇宙第一RSS閱讀器，而且中文支援的挺好。不過它沒有PC端的程式，只有網頁版，chrome上有外掛。在官網上用google賬號或者自己註冊賬號登入，就可以開始你的關注之旅了。

每次需要關注某個博主時，就點開他的RSS連結，把連結複製到inoreader上，就能關注了，當然，如果是比較大眾化的很厲害的博主，你直接搜名字也可以的，比如每個人都非常佩服的阮一峰大師，直接在閱讀器上搜索阮一峰，應該就能出來了。

我關注的比如，阮一峰的網路日誌，月光部落格，知乎精選等，都很不錯。當然，還有我！！趕快關注我吧！你值得擁有：http://fangzh.top/atom.xml

在安卓端，inoreader也有下載，不過因為國內google是登入不了的，你需要在inoreader官網上把你的密碼修改了，然後就可以用賬戶名和密碼登入了。

在IOS端，沒用過，好像是reader 3可以支援inoreader賬戶，還有個readon也不錯，可以去試試。

widgets(側邊欄)

側邊欄的小標籤，如果你想自己增加一個，比如我增加了一個聯絡方式，那麼我把communication寫在上面，在zh-CN.yml中的sidebar，新增communication: '中文'。

然後在hueman/layout/widget中新增一個communicaiton.ejs，填入模板：

<% if (site.posts.length) { %>
    <div class="widget-wrap widget-list">
        <h3 class="widget-title"><%= __('sidebar.communiation') %></h3>
        <div class="widget">
            <!--這裡新增你要寫的內容-->
        </div>
    </div>
<% } %>

search(搜尋框)

預設搜尋框是不能夠用的，

you need to install hexo-generator-json-content before using Insight Search

它已經告訴你了，如果想要使用，就安裝這個外掛。

comment(評論系統)

這裡的多數都是國外的，基本用不了。這個valine好像不錯，還能統計文章閱讀量，可以自己試一試，連結。

miscellaneous(其他)

這裡我就改了一個links，可以新增友鏈。注意空格要對！不然會報錯！

總結：

整個主題看起來好像很複雜的樣子，但是仔細捋一捋其實也比較流暢，

languages: 顧名思義
layout：佈局檔案，其實後期想要修改自定義網站上的東西，新增各種各樣的資訊，主要是在這裡修改，其中comment是評論系統，common是常規的佈局，最常修改的在這裡面，比如修改頁面head和footer的內容。
scripts：js指令碼，暫時沒什麼用
source：裡面放了一些css的樣式，以及圖片

3. git分支進行多終端工作

問題來了，如果你現在在自己的筆記本上寫的部落格，部署在了網站上，那麼你在家裡用桌上型電腦，或者實驗室的桌上型電腦，發現你電腦裡面沒有部落格的檔案，或者要換電腦了，最後不知道怎麼移動檔案，怎麼辦？

在這裡我們就可以利用git的分支系統進行多終端工作了，這樣每次開啟不一樣的電腦，只需要進行簡單的配置和在github上把檔案同步下來，就可以無縫操作了。

機制

機制是這樣的，由於hexo d上傳部署到github的其實是hexo編譯後的檔案，是用來生成網頁的，不包含原始檔。

也就是上傳的是在本地目錄裡自動生成的.deploy_git裡面。

其他檔案，包括我們寫在source 裡面的，和配置檔案，主題檔案，都沒有上傳到github

所以可以利用git的分支管理，將原始檔上傳到github的另一個分支即可。

上傳分支

首先，先在github上新建一個hexo分支，如圖：

然後在這個倉庫的settings中，選擇預設分支為hexo分支（這樣每次同步的時候就不用指定分支，比較方便）。

然後在本地的任意目錄下，開啟git bash，

git clone [email protected]:ZJUFangzh/ZJUFangzh.github.io.git

將其克隆到本地，因為預設分支已經設成了hexo，所以clone時只clone了hexo。

接下來在克隆到本地的ZJUFangzh.github.io中，把除了.git 資料夾外的所有檔案都刪掉

把之前我們寫的部落格原始檔全部複製過來，除了.deploy_git。這裡應該說一句，複製過來的原始檔應該有一個.gitignore，用來忽略一些不需要的檔案，如果沒有的話，自己新建一個，在裡面寫上如下，表示這些型別檔案不需要git：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

注意，如果你之前克隆過theme中的主題檔案，那麼應該把主題檔案中的.git資料夾刪掉，因為git不能巢狀上傳，最好是顯示隱藏檔案，檢查一下有沒有，否則上傳的時候會出錯，導致你的主題檔案無法上傳，這樣你的配置在別的電腦上就用不了了。

而後

git add .
git commit –m "add branch"
git push

這樣就上傳完了，可以去你的github上看一看hexo分支有沒有上傳上去，其中node_modules、public、db.json已經被忽略掉了，沒有關係，不需要上傳的，因為在別的電腦上需要重新輸入命令安裝。

這樣就上傳完了。

更換電腦操作

一樣的，跟之前的環境搭建一樣，

安裝git

sudo apt-get install git

設定git全域性郵箱和使用者名稱

git config --global user.name "yourgithubname"
git config --global user.email "yourgithubemail"

設定ssh key

ssh-keygen -t rsa -C "youremail"
#生成後填到github和coding上（有coding平臺的話）
#驗證是否成功
ssh -T [email protected]
ssh -T [email protected] #(有coding平臺的話)

安裝nodejs

sudo apt-get install nodejs
sudo apt-get install npm

安裝hexo

sudo npm install hexo-cli -g

但是已經不需要初始化了，

直接在任意資料夾下，

git clone git@………………

然後進入克隆到的資料夾：

cd xxx.github.io
npm install
npm install hexo-deployer-git --save

生成，部署：

hexo g
hexo d

然後就可以開始寫你的新部落格了

hexo new newpage

Tips:

不要忘了，每次寫完最好都把原始檔上傳一下

git add .
git commit –m "xxxx"
git push

如果是在已經編輯過的電腦上，已經有clone檔案夾了，那麼，每次只要和遠端同步一下就行了

git pull

4. coding page上部署實現國內外分流

之前我們已經把hexo託管在github了，但是github是國外的，而且百度的爬蟲是不能夠爬取github的，所以如果你希望你做的部落格能夠在百度引擎上被收錄，而且想要更快的訪問，那麼可以在國內的coding page做一個託管，這樣在國內訪問就是coding page，國外就走github page。

1. 申請coding賬戶，新建專案

先申請一個賬戶，然後建立新的專案，這一步專案名稱應該是隨意的。

2. 新增ssh key

這一步跟github一樣。

新增後，檢查一下是不是新增成功

ssh -T [email protected]

3. 修改_config.yml

hexo官方文件是這樣的：

deploy:
  type: git
  message: [message]
  repo:
    github: <repository url>,[branch]
    coding: <repository url>,[branch]

那麼，我們只需要：

deploy:
  type: git
  repo: 
    coding: [email protected]:ZJUFangzh/ZJUFangzh.git,master
    github: [email protected]:ZJUFangzh/ZJUFangzh.github.io.git,master

4. 部署

儲存一下，直接

hexo g
hexo d

這樣就可以在coding的專案上看到你部署的檔案了。

5. 開啟coding pages服務，繫結域名

如圖：

6. 阿里雲新增解析

這個時候就可以把之前github的解析改成境外，把coding的解析設為默認了。

7. 去除coding page的跳轉廣告

coding page的一個比較噁心人的地方就是，你只是銀牌會員的話，訪問會先跳轉到一個廣告，再到你自己的域名。那麼它也給出了消除的辦法。右上角切換到coding的舊版介面，預設新版是不行的。然後再來到pages服務這裡。

這裡：

只要你在頁面上新增一行文字，寫Hosted by Coding Pages，然後點下面的小勾勾，兩個工作日內它就會稽核通過了。

<p>Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a></p>

我的選擇是把這一行程式碼放在主題資料夾/layout/common/footer.ejs裡面，也就是本來在頁面中看到的頁尾部分。

當然，為了統一，我又在後面加上了and Github哈哈，可以不加。

<p><span>Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a></span> and <span><a href="https://github.com" style="font-weight: bold">Github</a></span></p>

這是最終加上去的程式碼。

第三部分

hexo新增各種功能，包括搜尋的SEO，閱讀量統計，訪問量統計和評論系統等。

本文參考了: visugar.com這裡面說的很詳細了。

1. SEO優化

推廣是很麻煩的事情，怎麼樣別人才能知道我們呢，首先需要讓搜尋引擎收錄你的這個網站，別人才能搜尋的到。那麼這就需要SEO優化了。

SEO是由英文Search Engine Optimization縮寫而來，中文意譯為“搜尋引擎優化”。SEO是指通過站內優化比如網站結構調整、網站內容建設、網站程式碼優化等以及站外優化。

百度seo

剛建站的時候是沒有搜尋引擎收錄我們的網站的。可以在搜尋引擎中輸入site:<域名>

來檢視一下。

1. 登入百度站長平臺新增網站

登入百度站長平臺，在站點管理中新增你自己的網站。

驗證網站有三種方式：檔案驗證、HTML標籤驗證、CNAME驗證。

第三種方式最簡單，只要將它提供給你的那個xxxxx使用CNAME解析到xxx.baidu.com就可以了。也就是登入你的阿里雲，把這個解析填進去就OK了。

2. 提交連結

我們需要使用npm自動生成網站的sitemap，然後將生成的sitemap提交到百度和其他搜尋引擎

npm install hexo-generator-sitemap --save     
npm install hexo-generator-baidu-sitemap --save

這時候你需要在你的根目錄下_config.xml中看看url有沒有改成你自己的：

重新部署後，就可以在public資料夾下看到生成的sitemap.xml和baidusitemap.xml了。

然後就可以向百度提交你的站點地圖了。

這裡建議使用自動提交。

自動提交又分為三種：主動推送、自動推送、sitemap。

可以三個一起提交不要緊，我選擇的是後兩種。

自動推送：把百度生成的自動推送程式碼，放在主題檔案/layout/common/head.ejs的適當位置，然後驗證一下就可以了。
sitemap：把兩個sitemap地址，提交上去，看到狀態正常就OK了。

ps: 百度收錄比較慢，慢慢等個十天半個月再去site:<域名>看看有沒有被收錄。

google的SEO

流程一樣，google更簡單，而且收錄更快，進入google站點地圖，提交網站和sitemap.xml，就可以了。

如果你這個域名在google這裡出了問題，那你就提交 yourname.github.io，這個連結，效果是一樣的。

不出意外的話一天內google就能收錄你的網站了。

其他的搜尋，如搜狗搜尋，360搜尋，流程是一樣的，這裡就不再贅述。

2. 評論系統

評論系統有很多，但是很多都是牆外的用不了，之前說過這個valine好像整合在hueman和next主題裡面了，但是我還沒有研究過，我看的是visugar這個博主用的來比力評論系統，感覺也還不錯。

來比力官網，註冊好後，點選管理頁面，在程式碼管理中找到安裝程式碼：

獲取安裝程式碼後，在主題的comment下新建一個檔案放入剛剛那段程式碼，再找到article檔案，找到如下程式碼，若沒有則直接在footer後面新增即可。livebe即為剛剛所創檔名稱。

<%- partial('comment/livebe') %>

然後可以自己設定一些東西：

還可以設定評論提醒，這樣別人評論你的時候就可以及時知道了。

3. 新增百度統計

百度統計可以在後臺上看到你網站的訪問數，瀏覽量，瀏覽連結分佈等很重要的資訊。所以新增百度統計能更有效的讓你掌握你的網站情況。

百度統計，註冊一下，這裡的賬號好像和百度賬號不是一起的。

照樣把程式碼複製到head.ejs檔案中，然後再進行一下安裝檢查，半小時左右就可以在百度統計裡面看到自己的網站資訊了。

4. 文章閱讀量統計leanCloud

leanCloud，進去後註冊一下，進入後建立一個應用：

在儲存中建立Class，命名為Counter,

然後在設定頁面看到你的應用Key，在主題的配置檔案中：

leancloud_visitors:
  enable: true
  app_id: 你的id
  app_key: 你的key

在article.ejs中適當的位置新增如下，這要看你讓文章的閱讀量統計顯示在哪個地方了，

閱讀數量:<span id="<%= url_for(post.path) %>" class="leancloud_visitors" data-flag-title="<%- post.title %>"></span>次

然後在footer.ejs的最後，新增：

<script src="//cdn1.lncld.net/static/js/2.5.0/av-min.js"></script>
<script>
    var APP_ID = '你的app id';
    var APP_KEY = '你的app key';
    AV.init({
        appId: APP_ID,
        appKey: APP_KEY
    });
    // 顯示次數
    function showTime(Counter) {
        var query = new AV.Query("Counter");
        if($(".leancloud_visitors").length > 0){
            var url = $(".leancloud_visitors").attr('id').trim();
            // where field
            query.equalTo("words", url);
            // count
            query.count().then(function (number) {
                // There are number instances of MyClass where words equals url.
                $(document.getElementById(url)).text(number?  number : '--');
            }, function (error) {
                // error is an instance of AVError.
            });
        }
    }
    // 追加pv
    function addCount(Counter) {
        var url = $(".leancloud_visitors").length > 0 ? $(".leancloud_visitors").attr('id').trim() : 'icafebolger.com';
        var Counter = AV.Object.extend("Counter");
        var query = new Counter;
        query.save({
            words: url
        }).then(function (object) {
        })
    }
    $(function () {
        var Counter = AV.Object.extend("Counter");
        addCount(Counter);
        showTime(Counter);
    });
</script>

重新部署後就可以了。

5. 引入不蒜子訪問量和訪問人次統計

不蒜子的新增非常非常方便，不蒜子

在footer.ejs中的合適位置，看你要顯示在哪個地方，新增：

<!--這一段是不蒜子的訪問量統計程式碼-->
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站總訪問量<span id="busuanzi_value_site_pv"></span>次 &nbsp;   </span>
<span id="busuanzi_container_site_uv">訪客數<span id="busuanzi_value_site_uv"></span>人次</span>

就可以了。

總結

到這裡就基本做完了。其實都是參考別的博主的設定的，不一定僅限於hueman主題，其他主題的設定也是大體相同的，所以如果你希望設定別的主題，那麼仔細看一下這個主題的程式碼結構，也能夠把上邊的功能新增進去。

多看看別的博主的那些功能，如果有你能找到自己喜歡的功能，那麼好好發動搜尋技能，很快就能找到怎麼做了。加油吧！

hexo史上最全搭建教程

Hexo簡介

第一部分

Hexo簡介

Hexo搭建步驟

1. 安裝Git

2. 安裝nodejs

3. 安裝hexo

4. GitHub建立個人倉庫

5. 生成SSH新增到GitHub

6. 將hexo部署到GitHub

7. 設定個人域名

第二部分

1. hexo基本配置

網站

網址

Front-matter

layout（佈局）

page

draft

2. 更換主題

menu（選單欄）

customize(定製)

新增RSS

widgets(側邊欄)

search(搜尋框)

comment(評論系統)

miscellaneous(其他)

總結：

3. git分支進行多終端工作

機制

上傳分支

更換電腦操作

4. coding page上部署實現國內外分流

第三部分

1. SEO優化

百度seo

google的SEO

2. 評論系統

3. 新增百度統計

4. 文章閱讀量統計leanCloud

5. 引入不蒜子訪問量和訪問人次統計

總結

相關推薦