hexo的搭建、設置與部分優化

原文連接: Alliot's blog
　　hexo是一個「快速、簡潔且高效的博客框架」。其最大的特色是在本地直接生成靜態文件，將靜態文件上傳到服務器端，這樣服務器端只有靜態的文件，給網站的SEO優化帶來了極大的便利，同時，網站的安全性也有了很大的提升，因爲靜態的網頁對環境要求很是小，在流量較小的狀況下，甚至能夠不須要獨立的服務器而直接丟於GitHub或虛擬主機上，對我的博主來講，可以有效的節省服務器開支；markdown的支持讓寫做更加方便快捷；同時，hexo擁有強大的插件系統與優質的主題（Alliot就是由於NexT這個主題才知道的hexo），高度可定製。官網：hexo.io <!--more-->
　　文章面向的是不熟悉的新手朋友，因此篇幅較長，難免有些囉嗦，還望各位大佬朋友繞道勿噴。
　　![hexo從搭建到優化詳解內容圖](https://static.iots.vip/hexo%...
)
注意：
在hexo的配置文件中註釋符號爲'#'，本文爲了方便查看(實際上是我本身的習慣)，在下文中將使用'//'作註釋，實際中，爲避免發生報錯，請使用'#'註釋，望悉知。

安裝(以windows中爲例)

　　hexo能夠安裝在PC上，也能夠直接安裝在網站服務器上，區別在於：安裝在PC上，等於在PC上生成靜態文件後，再將其靜態文件上傳至服務器的網站根目錄，用戶只能在該PC上寫做；而安裝在服務器上則等於在服務器上生成靜態文件(也能夠直接監聽4000端口實現)，用戶能夠經過shell或者FTP來實如今不一樣的PC上寫做併發布。你們能夠自行選擇，Alliot推薦前者，緣由有三：一是因爲文章使用的是markdown語法，在PC上寫做，有更多的優秀的編輯器能夠選擇，如markdownPad、notepad++(可參考notepad++中實現markdown語法高亮與實時預覽)； 二是hexo提供了快速方便的一鍵部署功能，只需一條命令就能將網站部署到服務器上；最好的作法是，在PC上生成靜態文件，經過git直接將網頁部署在免費的GitHub或CodingPages上，省去購買服務器的費用。

安裝git

　　衆所周知的緣由，某天朝下載須要代理，因此這裏以及下文用到的工具，Alliot將其上傳到度盤，這裏只提供了Windows x64下的安裝包，其餘環境下的朋友可自行搜索。
(Git-2.11.0.3-64-bit)連接：http://pan.baidu.com/s/1cfa5VC 密碼：rng9
安裝是一路下一步，不作過多說明。

安裝node.js

　　(node-v6.9.4-x64)連接：http://pan.baidu.com/s/1jIdytQQ 密碼：4gsc 同上。

安裝hexo

　　安裝完node.js後，會在開始菜單-全部程序中生成一個"nodejs"文件夾，展開將「Node.js command prompt」發送到桌面快捷方式(稍後有用) 雙擊打開進入命令提示符窗口。
如圖， 輸入

npm install -g hexo-cli

（這裏天朝因爲衆所周知的緣由，下載可能較(很是)爲緩慢，建議掛上代理操做。）
出現下圖所示， 而後執行

hexo init <folder>        //初始化hexo,<folder>爲須要安裝到的路徑

出現下圖所示， 則右鍵桌面的「Node.js command prompt」快捷方式，屬性，將"起始位置"中的路徑改成剛纔初始化hexo的路徑。
雙擊打開「Node.js command prompt」，執行

npm install

安裝完成後的目錄結構是這樣的：

.
├── _config.yml            //配置文件，包括博客信息、主題設置等。配置文件中默認有註釋。
├── package.json        //應用程序(插件等)信息。
├── scaffolds            //模板文件夾，新建文章或頁面後，會自動生成一個非空文件，該文件的內容就是這個文件夾下的文件內容。
├── source                //用戶資源文件夾，如文章的markdown就應該在_post中修改。
|   ├── _drafts
|   └── _posts
└── themes                //主題資源文件夾，下載安裝後的主題文件在這個文件夾中。

部分引用於官方文檔：hexo.io/docs/setup.html

---

使用命令

　　命令能夠經過node.js的命令提示符窗口輸入：

新建文章

hexo new "title"

新建會在source/_posts/ 中生成對應的.md文件，編輯該文件便可。默認支持markdown與HTML語言
刪除文章，則只須要刪除對應的.md文檔便可。

啓動服務器

要可以在本地預覽本身的博客，須要本地啓動服務器。這裏應先安裝hexo server模塊（hexo 3.0後版本，server變成了獨立的模塊) 在命令提示符窗口執行:

npm install hexo-server --save

安裝完畢後執行:

hexo s

瀏覽器輸入: http://localhost:4000 (IE瀏覽器必須須要http前綴纔可打開) 便可實時預覽（注意是實時，修改文章與修改配置，保存後刷新網頁都能看到效果）。Ctrl+C關閉服務器。

生成靜態文件

hexo g

這裏生成靜態文件在根目錄的public下，將此目錄內的文件上傳到服務器網站根目錄便可。

清理

hexo clean

清理緩存與public目錄，推薦每次執行hexo s以前都執行一次hexo clean，避免出現一些奇怪的問題(主頁未同步等)。

部署發佈

hexo提供了一鍵部署功能，經過簡單的配置可以一鍵部署到網站服務器上。
開始以前須要修改根目錄下的_config.xml配置文件，這裏只舉例git:
使用git部署須要先安裝hexo-deployer-git插件，執行:

npm install hexo-deployer-git --save

而後修改配置文件_config.xml中的

deploy:
  type: git                //部署類型  
  repo: (Repository地址)
  branch: (分支名稱)
  message: (自定義提交信息,默認爲Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})

這裏以Coding中操做爲例：
{% cq %} Coding Pages 是一個免費的靜態網頁託管和演示服務，您可使用 Coding Pages 託管博客、項目官網等靜態網頁{% endcq %}
(正準備寫而後沒想到好友 Lu尼瑪 同窗已經寫出來了：點這裏，你們能夠參考他的作法)

---

配置基本信息

在根目錄下的_config.xml中修改。(注意區別於themes下主題的_config.xml文件)

網站信息

參數	描述
title	網站標題
subtitle	網站副標題
description	網站描述
author	做者名
language	網站語言
timezone	網站使用的時區
url	網站url
root	網站根目錄

前3個參數主要用於SEO優化。 這裏將Alliot's blog 的這部分配置信息列出以下，各位朋友能夠參照本博客來修改：

#配置文件中註釋符號爲'#'，這裏爲了方便查看，使用'//'作註釋，實際中，請使用'#'註釋，望悉知。  
# Site   
title: Alliot's blog            //注意Alliot's blog前有一個空格，不能省略，不然在檢查時會出錯。以後的配置文件同此，均應該加空格。
subtitle: Maker & Developer
description: IOTS.VIP is a blog in order to record my learning and growth
author: Alliot                    //做者信息在大部分主題中通常顯示在網站底部與文章標題下方。
language: zh-Hans                //中文，漢字
timezone: Asia/Shanghai            //時區：亞洲，上海
# URL
url: https://www.iots.vip        //若是你的網站是放於二級目錄，相似於www.iots.vip/blog則請將URL設置爲https://www.iots.vip/blog 同時root設置爲/blog/
root: /

---

主題設置

　　Alliot's blog 博客用的是「NexT」，具體使用方法能夠參照主題官網 ，(官方文檔已經很清楚、詳細,這裏就很少說)，各位朋友能夠按需求配置。
下面是個人主題配置文件(安全起見，已省略部份內容)，能夠直接拿過去用。點擊下載

搜索功能

　　推薦使用Local Search做爲站內搜索，搜索速度快，同時比較簡潔，啓用方法以下：

一、安裝插件

　　安裝hexo-generator-searchdb插件
　　打開Node.js command prompt，在站點的根目錄下執行如下命令：

npm install hexo-generator-searchdb --save

二、更改配置文件

更改站點配置文件，新增以下內容於任意位置：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

更改NexT主題配置文件，開啓Local Search做爲站內搜索：

# Local search
local_search:
  enable: true

社會化評論

待添加...（以前多說死了，網易雲跟貼出來了，而後接着網易雲跟貼也死了，國內好用一點的剩下暢言，不知道什麼時候GG，so,暫時不更教程，你們可使用國外的DISQUS，不過國內用戶沒法正常使用，有須要的朋友方法參考主題官網）

---

部分Markdown語法注意點

在hexo中，一些Markdown語法與咱們平時所用的有些不一樣。
這裏列舉幾個常見的：

1.插入代碼語法中的第二個```後面不要加空格  

2.引用語法中使用>，結束使用2個空格加回車  

3.首行縮進可使用 中文全角下的兩個空格  
  
4.使用* 標註後 須要換行。

5.表格前須要換行  

6.{% cq %} （前有一個空格）居中標籤 {% endcq %}

---

部分優化

Nginx開啓Gzip壓縮

　　Nginx的部分優化見此文:連接

取消Google字體庫加載

　　主題調用了Google字體庫，天朝的GFW下，會致使字體庫加載極其緩慢甚至沒法加載。這就致使博客在加載時會有很長的等待時間(F12選擇network能夠查看加載時間)
解決方法： 修改主題配置文件_config.xml中的font字段。將true改成false。(網上有朋友使用360的公共庫，我試了以爲仍是不夠快。。這裏索性改成false反而更快了)
CDN等設置能明顯加速博客的打開速度，同時可以抵禦一些小型攻擊，因爲操做簡單這裏就不過多贅述，須要注意的是，在同時開啓了SSL(Nginx開啓SSL與重定向優化)的時候，應該將回源設置爲HTTPS回源方式。

SEO優化設置

　　雖然說寫博客不是爲了搜索排名來寫，可是，必定的搜索引擎流量或許可以讓博客被更多的人知曉，也就有可能認識到與你志同道合的朋友~ 這裏記錄一些簡單的SEO作法

一、添加robots.txt

　　robots.txt是搜索引擎中訪問網站的時候要查看的第一個文件。robots.txt文件告訴蜘蛛程序在服務器上什麼文件是能夠被查看的。
這裏推薦我這種寫法(固然，hexo的版本不一樣可能文件目錄有所不一樣)

# welcome to : www.iots.vip 
User-agent: *
Allow: /
Allow: /archives/

Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /lib/
Sitemap: https://www.iots.vip/sitemap.xml

這裏會出現一些安全隱患（實際上是360網站檢測提示robots.txt可能泄露站點目錄結構，實際上並沒有大礙），能夠參考此文解決。

二、安裝sitemap插件

　　sitemap在SEO過程當中有着十分重要的地位，同時也能限制蜘蛛對某些特定目錄的爬取。 具體概念很少贅述。 hexo有很方便的自動生成sitemap的插件，打開Node.js command prompt，在站點的根目錄下執行如下命令：

npm install hexo-generator-sitemap --save                #sitemap.xml 提交谷歌搜素引擎
npm install hexo-generator-baidu-sitemap --save            #baidusitemap.xml 提交百度搜索引擎

而後在站點配置文件_config.xml 中添加：

# 自動生成sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

三、安裝nofollow插件

　　減小出站連接可以有效防止權重分散，hexo有很方便的自動爲出站連接添加nofollow的插件。
這裏@liuzhichao 感謝其開源的hexo-autonofollow插件，打開Node.js command prompt，在站點的根目錄下執行如下命令：

npm install hexo-autonofollow --save

該插件會將博客中的出站連接自動加上nofollow屬性，例外請在站點配置文件_config.xml中添加以下字段

nofollow:
    enable: true
    exclude:
    - www.iots.vip
    - 友鏈地址

這樣，例外的連接將不會被加上nofollow屬性。
插件自動添加的屬性爲'external nofollow noopener noreferrer' 通常來講標準的nofollow屬性只須要external nofollow便可，noopener noreferrer估計是新聞上說的釣魚漏洞的補救方法，不過這條屬性會影響站長工具的友鏈檢測，你們若是須要去掉這一條屬性，能夠在/hexo根目錄/node_moduleshexo-autonofollowlib中修改filter.js中

rel: 'external nofollow noopener noreferrer'

將'noopener noreferrer'去掉，從新hexo g便可。

文章密碼

　　2017年11月11日更新: 原文點此 這裏搬運過來作備份 (這種方式是不安全的，詳情請點擊hexo文章密碼訪問的"破解"方法)

第一步

找到themes->next->layout->_partials->head.swig文件。添加以下代碼(推薦加在全部的<meta>標籤以後):

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('請輸入文章密碼','') !== '{{ page.password }}'){
                alert('密碼錯誤！');
                history.back();
            }
        }
    })();
</script>

第二步

寫博文的時候頂部的頁面變量添加"password: 密碼"便可，如:

---
title: '2017-01-01'
permalink: post/111111111.html
tags:
  - 心思隨筆
date: 2017-01-01 00:00:00
password: 123