原文 http://blog.csdn.net/tonydandelion2014/article/details/61615898

?

http://www.joryhe.com/2016-06-06-hexo_wordcount_setting_your_post.html

Hexo是一個(gè)輕量級(jí)的Node.js博客框架，由一位臺(tái)灣的在校大學(xué)生開發(fā)完成！

Hexo的配置文件_config.yml分為兩種，一種是站點(diǎn)配置文件，也就是站點(diǎn)根目錄下的_config.yml配置文件，另一個(gè)是主題配置文件，位于theme文件夾中對應(yīng)主題的文件夾下的_config.yml。

在后續(xù)的網(wǎng)站配置中需要多次使用站點(diǎn)配置文件和主題配置文件，需要注意辨析。

另外，需要注意的是本文部署hexo的服務(wù)器是騰訊云服務(wù)器，Ubuntu16.04系統(tǒng)。

---

安裝node.js

Windows下安裝

在nodejs官網(wǎng)上下載最新的Windows安裝包，直接安裝即可。

ubuntu下安裝

命令行方式安裝：

sudo apt-get update sudo apt-get install nodejs

• 1
• 2

編譯源碼方式安裝：

在nodejs官網(wǎng)上找到需要下載的源碼（不是二進(jìn)制文件），解壓之后進(jìn)入目錄，執(zhí)行：

$ ./configure $ make && make install

• 1
• 2

注意如果需要sudo的話， make和make install 要分開，因?yàn)閟udo不能傳遞到&&后面的指令。

安裝npm

sudo apt-get update sudo apt-get install npm

• 1
• 2

查看node和npm版本

node -v npm -v

• 1
• 2

安裝cnpm

因?yàn)榉阑饓Φ木壒?#xff0c;很多境外網(wǎng)站被墻了，所以使用node.js的原生工具npm是無法正常安裝模塊的，建議使用淘寶前端組的國內(nèi)鏡像，使用他們定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認(rèn)的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

• 1

使用方法如下：

從registry.npm.taobao.org 安裝所有模塊. 當(dāng)安裝的時(shí)候發(fā)現(xiàn)安裝的模塊還沒有同步過來, 淘寶 NPM 會(huì)自動(dòng)在后臺(tái)進(jìn)行同步, 并且會(huì)讓你從官方 NPM registry.npmjs.org 進(jìn)行安裝. 下次你再安裝這個(gè)模塊的時(shí)候, 就會(huì)直接從 淘寶 NPM 安裝了.

$ cnpm install [name]

• 1

---

Hexo的安裝與使用

安裝Hexo

安轉(zhuǎn)了node之后，就可以使用以下命令來安裝hexo：

$ npm install -g hexo-cli

• 1

使用Hexo

安裝 Hexo 完成后，請執(zhí)行下列命令，Hexo 將會(huì)在指定文件夾中新建所需要的文件。

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

• 1
• 2
• 3

新建完成后，指定文件夾的目錄如下：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7

_config.yml 網(wǎng)站的 配置 信息

您可以在此配置網(wǎng)站大部分的參數(shù)。

package.json 應(yīng)用程序的信息。EJS, Stylus 和 Markdown renderer 已默認(rèn)安裝，您可以自由移除。

package.json {"name": "hexo-site", "version": "0.0.0", "private": true, "hexo": { "version": "" }, "dependencies": { "hexo": "^3.0.0", "hexo-generator-archive": "^0.1.0", "hexo-generator-category": "^0.1.0", "hexo-generator-index": "^0.1.0", "hexo-generator-tag": "^0.1.0", "hexo-renderer-ejs": "^0.1.0", "hexo-renderer-stylus": "^0.2.0", "hexo-renderer-marked": "^0.2.4", "hexo-server": "^0.1.2" } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

scaffolds模版 文件夾。當(dāng)您新建文章時(shí)，Hexo 會(huì)根據(jù) scaffold 來建立文件。

Hexo的模板是指在新建的markdown文件中默認(rèn)填充的內(nèi)容。例如，如果您修改scaffold/post.md中的Front-matter內(nèi)容，那么每次新建一篇文章時(shí)都會(huì)包含這個(gè)修改。

source資源文件夾是存放用戶資源的地方。

除?posts 文件夾之外，開頭命名為?(下劃線)的文件 / 文件夾和隱藏的文件將會(huì)被忽略。Markdown 和 HTML 文件會(huì)被解析并放到 public 文件夾，而其他文件會(huì)被拷貝過去。

themes主題 文件夾。

Hexo 會(huì)根據(jù)主題來生成靜態(tài)頁面。

---

安裝hexo插件

在hexo中實(shí)現(xiàn)可視化編輯博客（hexo-admin）

hexo-admin-github

安裝并使用hexo-admin

npm install --save hexo-admin hexo server -d open http://localhost:4000/admin/

• 1
• 2
• 3

設(shè)置后臺(tái)密碼

修改站點(diǎn)配置文件，就是網(wǎng)站根目錄下的 _config.yml文件:

admin:username: myfavoritenamepassword_hash: be121740bf988b2225a313fa1f107ca1secret: a secret something

• 1
• 2
• 3
• 4

• username是用戶名

• password_hash是密碼的哈希映射值，由于不同版本的node.js的哈希算法是不一樣的，所有用以下方法來產(chǎn)生有效的密碼哈希值。

  $ node > const bcrypt = require('bcrypt-nodejs') > bcrypt.hashSync('your password secret here!') //=> '$2a$10$8f0CO288aEgpb0BQk0mAEOIDwPS.s6nl703xL6PLTVzM.758x8xsi'
  • 1
  • 2
  • 3
  • 4
• secret是用于產(chǎn)生cookie值的。

在站點(diǎn)配置文件中設(shè)置好以下三個(gè)值之后，登錄?http://localhost:4000/admin/?就會(huì)提示輸入賬號(hào)密碼。

在hexo中實(shí)現(xiàn)RRS功能（?hexo-generator-feed?）

安裝

$ npm install hexo-generator-feed --save

• 1

配置

在網(wǎng)站的根目中的_config.yml文件設(shè)置

feed:type: atompath: atom.xmllimit: 20hub:content:

• 1
• 2
• 3
• 4
• 5
• 6

type - Feed type. (atom/rss2)?
path - Feed path. (Default: atom.xml/rss2.xml)?
limit - Maximum number of posts in the feed (Use 0 or false to show all posts)?
hub - URL of the PubSubHubbub hubs (Leave it empty if you don’t use it)?
content - (optional) set to ‘true’ to include the contents of the entire post in the feed.

在hexo中實(shí)現(xiàn)本地搜索功能（hexo-generator-searchdb）

安裝 hexo-generator-searchdb，在站點(diǎn)的根目錄下執(zhí)行以下命令：

$ npm install hexo-generator-searchdb --save

• 1

編輯 站點(diǎn)配置文件，新增以下內(nèi)容到任意位置：

search:path: search.xmlfield: postformat: htmllimit: 10000

• 1
• 2
• 3
• 4
• 5

除了安裝本地搜索，還可以考慮?*?swiftype?*?的搜索。

---

更換hexo主題

Hexo有很多主題，可以在?*?Hexo官網(wǎng)的主題頁面?*選擇自己喜歡。?
以Next為例，本站使用的就是Next主題。

使用Git來獲取主題文件

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

• 1
• 2

直接在Next的?GitHub主頁?下載主題文件

將Next文件夾放到theme文件夾中，修改站點(diǎn)配置文件，也就是網(wǎng)站根目錄下的_config.yml文件中的theme：

# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next

• 1
• 2
• 3
• 4
• 5

重啟hexo的開發(fā)服務(wù)器就能看到新主題的效果了。

$sudo hexo server

• 1

---

為hexo設(shè)置tags、categrories、圖標(biāo)、頭像等

選擇 Scheme

Scheme 是 NexT 提供的一種特性，借助于 Scheme，NexT 為你提供多種不同的外觀。同時(shí)，幾乎所有的配置都可以 在 Scheme 之間共用。目前 NexT 支持三種 Scheme，他們是：

• Muse - 默認(rèn) Scheme，這是 NexT 最初的版本，黑白主調(diào)，大量留白
• Mist - Muse 的緊湊版本，整潔有序的單欄外觀
• Pisces - 雙欄 Scheme，小家碧玉似的清新

Scheme 的切換通過更改 主題配置文件，搜索 scheme 關(guān)鍵字。?
你會(huì)看到有三行 scheme 的配置，將你需用啟用的 scheme 前面注釋 # 即可。

選擇 Pisce Scheme

#scheme: Muse #scheme: Mist scheme: Pisces

• 1
• 2
• 3

設(shè)置主頁的Menu

設(shè)定菜單內(nèi)容，對應(yīng)的字段是 menu。 菜單內(nèi)容的設(shè)置格式是：item name: link。其中 item name 是一個(gè)名稱，這個(gè)名稱并不直接顯示在頁面上，她將用于匹配圖標(biāo)以及翻譯。

菜單示例配置

menu:home: /archives: /archives#about: /about#categories: /categoriestags: /tags#commonweal: /404.html

• 1
• 2
• 3
• 4
• 5
• 6
• 7

若你的站點(diǎn)運(yùn)行在子目錄中，請將鏈接前綴的 / 去掉

NexT 默認(rèn)的菜單項(xiàng)有（標(biāo)注 的項(xiàng)表示需要手動(dòng)創(chuàng)建這個(gè)頁面）：

鍵值設(shè)定值顯示文本（簡體中文）

home	home: /	主頁
archives	archives: /archives	歸檔頁
categories	categories: /categories	分類頁
tags	tags: /tags	標(biāo)簽頁
about	about: /about	關(guān)于頁面
commonweal	commonweal: /404.html	公益 404

設(shè)置菜單項(xiàng)的顯示文本。在第一步中設(shè)置的菜單的名稱并不直接用于界面上的展示。Hexo 在生成的時(shí)候?qū)⑹褂?這個(gè)名稱查找對應(yīng)的語言翻譯，并提取顯示文本。這些翻譯文本放置在 NexT 主題目錄下的

languages/{language}.yml （{language} 為你所使用的語言）。

• 1

以簡體中文為例，若你需要添加一個(gè)菜單項(xiàng)，比如 something。那么就需要修改簡體中文對應(yīng)的翻譯文件 languages/zh-Hans.yml，在 menu 字段下添加一項(xiàng)：

menu:home: 首頁archives: 歸檔categories: 分類tags: 標(biāo)簽about: 關(guān)于search: 搜索commonweal: 公益404something: 有料```設(shè)定菜單項(xiàng)的圖標(biāo)，對應(yīng)的字段是 menu_icons。 此設(shè)定格式是 item name: icon name，其中 item name 與上一步所配置的菜單名字對應(yīng)，icon name 是 Font Awesome 圖標(biāo)的 名字。而 enable 可用于控制是否顯示圖標(biāo)，你可以設(shè)置成 false 來去掉圖標(biāo)。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

菜單圖標(biāo)配置示例

menu_icons:enable: true# Icon Mapping.home: homeabout: usercategories: thtags: tagsarchives: archivecommonweal: heartbeat

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

頭像設(shè)置

編輯 站點(diǎn)配置文件，新增字段 avatar， 值設(shè)置成頭像的鏈接地址。

avatar: http://i5.tietuku.com/0d972d2b106fc7ea.jpg

• 1

網(wǎng)站圖標(biāo)設(shè)置

在主題配置文件中，設(shè)置：

# Put your favicon.ico into `hexo-site/source/` directory. favicon: favicon.ico

• 1
• 2

把你的網(wǎng)站圖標(biāo)放到站點(diǎn)的source下面

設(shè)置站點(diǎn)的名字、介紹、作者、語言、時(shí)區(qū)

在站點(diǎn)配置文件中修改

# Site title: Tony's blog subtitle: description: Everthing will going to be all right. author: Tony Dandelion language: zh-Hans timezone:

• 1
• 2
• 3
• 4
• 5
• 6
• 7

配置categories（目錄云）、tags（標(biāo)簽云）、about（關(guān)于我）

hexo new page "tags" hexo new page "categories" hexo new page "about"

• 1
• 2
• 3

執(zhí)行了這三條命令之后，在站點(diǎn)的source目錄下就會(huì)有tags、categories、about三個(gè)文件夾，里面都對應(yīng)有一個(gè)index.md的文件，在tags文件夾中的index.md中，修改type為tags,如下所示，相應(yīng)的categories和about也把對應(yīng)位置的type值改為categories和about。

--- title: tags date: 2017-01-28 14:34:11 type: "tags" ---

• 1
• 2
• 3
• 4
• 5

在about文件中的index.md文件中可以使用MarkDown語法來寫自我介紹。

修改Next文件的頭部背景圖片

第一步

首先在網(wǎng)上找或者自己PS一張心儀的圖片,取名background.jpg，把它放在

Hexo\source\image路徑下。

第二步

進(jìn)入

Hexo\themes\hexo-theme-next\source\css\_common\components\header

• 1

目錄，找到 header.styl 文件，雙擊打開。

將第一行默認(rèn)的

.header { background: $head-bg; }

• 1

修改為

.header { background: url('../image/background.jpg'); }

• 1

然后重新上傳博客即可

hexo clean hexo generate hexo deploy

• 1
• 2
• 3

大功告成。

修改Next的底部power by圖標(biāo)

并不建議修改這個(gè)，畢竟使用了別人的勞動(dòng)成果，就應(yīng)該說清楚。

參考鏈接

配置第三方功能

使用多說的評論服務(wù)

登錄多說，填寫表單，創(chuàng)建站點(diǎn)

記錄下多說域名，也就是上圖中紅框中的部分，不包括前面的 http:// 和后面的 duoshuo.com

創(chuàng)建站點(diǎn)完成后在 站點(diǎn)配置文件 中新增 duoshuo_shortname 字段，值設(shè)置成上一步中紅色框里的值。

多說設(shè)置示例

duoshuo_shortname: 多說域名內(nèi)容

• 1

---

配合ngix部署hexo

hexo server?命令啟動(dòng)的是一個(gè)測試服務(wù)器，不建議用戶生產(chǎn)環(huán)境，可以使用Apache或者ngix來部署hexo

生成Hexo的靜態(tài)文件用于部署

sudo hexo generate

• 1

在網(wǎng)站根目錄下會(huì)生成一個(gè)public文件夾，這就是我們要發(fā)布的內(nèi)容，記錄下路徑為/home/ubuntu/blog/public

安裝ngix并修改根目錄

sudo apt-get install ngix ngix -v

• 1
• 2

ngix的安裝目錄為/etc/ngix，所有的配置文件都在這里。ngix的默認(rèn)首頁目錄為/usr/share/nginx/html要對其進(jìn)行修改。

修改/etc/nginx/sites-available/default中的/usr/share/nginx/html為/home/ubuntu/blog/public

server {listen 80 default_server;listen [::]:80 default_server ipv6only=on;# root /usr/share/nginx/html;root /home/ubuntu/blog/public; index index.html index.htm; ..... }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

配置防火墻、騰訊云服務(wù)器開放端口

完成上述配置之后需要確保服務(wù)器的端口都開放了，騰訊云服務(wù)器的默認(rèn)安全組是不開發(fā)任何端口的，需要前往騰訊云控制臺(tái)進(jìn)行修改。

然后修改防火墻，開放80端口，ubuntu有一個(gè)易用的防火墻管理工具，名為uwf。我們使用它來進(jìn)行防火墻管理。

安裝

sudo apt-get install ufw

• 1

啟用

sudo ufw enable sudo ufw default deny

• 1
• 2

運(yùn)行以上兩條命令后，開啟了防火墻，并在系統(tǒng)啟動(dòng)時(shí)自動(dòng)開啟。?
關(guān)閉所有外部對本機(jī)的訪問，但本機(jī)訪問外部正常。

查看防火墻狀態(tài)

sudo ufw status

• 1

防火墻版本

sudo ufw version

• 1

開啟/關(guān)閉防火墻 (默認(rèn)設(shè)置是’disable’)

sudo ufw enable|disable

• 1

開啟/禁用服務(wù)或者端口

sudo ufw allow|deny [service|port]

• 1

為了使mysql可以遠(yuǎn)程訪問，開啟mysql的3306端口

eg: sudo ufw allow 3306

• 1
• 2

啟動(dòng)、停止、重啟ngix

sudo /etc/init.d/nginx start sudo /etc/init.d/nginx restart sudo /etc/init.d/nginx stop

• 1
• 2
• 3
• 4

或者

sudo service nginx start sudo service nginx restart sudo service nginx stop

• 1
• 2
• 3

查看、關(guān)閉端口占用的命令

sudo lsof -i:80

• 1
• 2

在使用上面這條命令知道是哪一個(gè)進(jìn)程占用了80端口后就使用kill命令跟上進(jìn)程ID殺掉進(jìn)程。

sudo kill ID

• 1

兩條命令相互配合就能把端口分配給任何進(jìn)程了

在后臺(tái)將hexo起在固定端口的命令

sudo nohup hexo server -p 8066 &

• 1

---

問題整理

配置文件的修改問題

修改配置文件的字段值的時(shí)候，要注意格式固定為：

Key: Value

• 1

屬性值與冒號(hào)之間必須為一個(gè)空格，不能是回車或者其他任何東西。

部署之后，ngix不能及時(shí)顯示最新修改的情況。

先執(zhí)行hexo clean再執(zhí)行hexo generate，之后再訪問80端口，如果效果遷移成功了，就OK了，否則執(zhí)行下面的操作。

關(guān)閉ngix服務(wù)，將hexo的調(diào)試服務(wù)器開放到80端口。

訪問一次80端口，OK了再切回ngix監(jiān)聽80端口。

發(fā)現(xiàn)命令沒有預(yù)期的執(zhí)行效果，需要加上sudo試一試，可能是權(quán)限問題。

設(shè)置只顯示部分文章，不全部顯示。

在首頁顯示一篇文章的部分內(nèi)容，并提供一個(gè)鏈接跳轉(zhuǎn)到全文頁面是一個(gè)常見的需求。 NexT 提供三種方式來控制文章在首頁的顯示方式。 也就是說，在首頁顯示文章的摘錄并顯示 閱讀全文 按鈕，可以通過以下方法：

• 在文章中使用?<!– more –>手動(dòng)進(jìn)行截?cái)?#xff0c;Hexo 提供的方式 推薦
• 在文章的 front-matter 中添加 description，并提供文章摘錄
• 自動(dòng)形成摘要，在?主題配置文件?中添加：

auto_excerpt:enable: truelength: 150

總結(jié)

以上是生活随笔為你收集整理的Hexo安装配置详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。