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

?

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

Hexo是一個輕量級的Node.js博客框架，由一位臺灣的在校大學生開發完成！

Hexo的配置文件_config.yml分為兩種，一種是站點配置文件，也就是站點根目錄下的_config.yml配置文件，另一個是主題配置文件，位于theme文件夾中對應主題的文件夾下的_config.yml。

在后續的網站配置中需要多次使用站點配置文件和主題配置文件，需要注意辨析。

另外，需要注意的是本文部署hexo的服務器是騰訊云服務器，Ubuntu16.04系統。

---

安裝node.js

Windows下安裝

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

ubuntu下安裝

命令行方式安裝：

sudo apt-get update sudo apt-get install nodejs

• 1
• 2

編譯源碼方式安裝：

在nodejs官網上找到需要下載的源碼（不是二進制文件），解壓之后進入目錄，執行：

$ ./configure $ make && make install

• 1
• 2

注意如果需要sudo的話， make和make install 要分開，因為sudo不能傳遞到&&后面的指令。

安裝npm

sudo apt-get update sudo apt-get install npm

• 1
• 2

查看node和npm版本

node -v npm -v

• 1
• 2

安裝cnpm

因為防火墻的緣故，很多境外網站被墻了，所以使用node.js的原生工具npm是無法正常安裝模塊的，建議使用淘寶前端組的國內鏡像，使用他們定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:

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

• 1

使用方法如下：

從registry.npm.taobao.org 安裝所有模塊. 當安裝的時候發現安裝的模塊還沒有同步過來, 淘寶 NPM 會自動在后臺進行同步, 并且會讓你從官方 NPM registry.npmjs.org 進行安裝. 下次你再安裝這個模塊的時候, 就會直接從 淘寶 NPM 安裝了.

$ cnpm install [name]

• 1

---

Hexo的安裝與使用

安裝Hexo

安轉了node之后，就可以使用以下命令來安裝hexo：

$ npm install -g hexo-cli

• 1

使用Hexo

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

$ 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 網站的 配置 信息

您可以在此配置網站大部分的參數。

package.json 應用程序的信息。EJS, Stylus 和 Markdown renderer 已默認安裝，您可以自由移除。

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模版 文件夾。當您新建文章時，Hexo 會根據 scaffold 來建立文件。

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

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

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

themes主題 文件夾。

Hexo 會根據主題來生成靜態頁面。

---

安裝hexo插件

在hexo中實現可視化編輯博客（hexo-admin）

hexo-admin-github

安裝并使用hexo-admin

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

• 1
• 2
• 3

設置后臺密碼

修改站點配置文件，就是網站根目錄下的 _config.yml文件:

admin:username: myfavoritenamepassword_hash: be121740bf988b2225a313fa1f107ca1secret: a secret something

• 1
• 2
• 3
• 4

• username是用戶名

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

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

在站點配置文件中設置好以下三個值之后，登錄?http://localhost:4000/admin/?就會提示輸入賬號密碼。

在hexo中實現RRS功能（?hexo-generator-feed?）

安裝

$ npm install hexo-generator-feed --save

• 1

配置

在網站的根目中的_config.yml文件設置

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中實現本地搜索功能（hexo-generator-searchdb）

安裝 hexo-generator-searchdb，在站點的根目錄下執行以下命令：

$ npm install hexo-generator-searchdb --save

• 1

編輯 站點配置文件，新增以下內容到任意位置：

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

• 1
• 2
• 3
• 4
• 5

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

---

更換hexo主題

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

使用Git來獲取主題文件

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

• 1
• 2

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

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

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

• 1
• 2
• 3
• 4
• 5

重啟hexo的開發服務器就能看到新主題的效果了。

$sudo hexo server

• 1

---

為hexo設置tags、categrories、圖標、頭像等

選擇 Scheme

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

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

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

選擇 Pisce Scheme

#scheme: Muse #scheme: Mist scheme: Pisces

• 1
• 2
• 3

設置主頁的Menu

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

菜單示例配置

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

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

若你的站點運行在子目錄中，請將鏈接前綴的 / 去掉

NexT 默認的菜單項有（標注 的項表示需要手動創建這個頁面）：

鍵值設定值顯示文本（簡體中文）

home	home: /	主頁
archives	archives: /archives	歸檔頁
categories	categories: /categories	分類頁
tags	tags: /tags	標簽頁
about	about: /about	關于頁面
commonweal	commonweal: /404.html	公益 404

設置菜單項的顯示文本。在第一步中設置的菜單的名稱并不直接用于界面上的展示。Hexo 在生成的時候將使用 這個名稱查找對應的語言翻譯，并提取顯示文本。這些翻譯文本放置在 NexT 主題目錄下的

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

• 1

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

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

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

菜單圖標配置示例

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

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

頭像設置

編輯 站點配置文件，新增字段 avatar， 值設置成頭像的鏈接地址。

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

• 1

網站圖標設置

在主題配置文件中，設置：

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

• 1
• 2

把你的網站圖標放到站點的source下面

設置站點的名字、介紹、作者、語言、時區

在站點配置文件中修改

# 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（標簽云）、about（關于我）

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

• 1
• 2
• 3

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

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

• 1
• 2
• 3
• 4
• 5

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

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

第一步

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

Hexo\source\image路徑下。

第二步

進入

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

• 1

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

將第一行默認的

.header { background: $head-bg; }

• 1

修改為

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

• 1

然后重新上傳博客即可

hexo clean hexo generate hexo deploy

• 1
• 2
• 3

大功告成。

修改Next的底部power by圖標

并不建議修改這個，畢竟使用了別人的勞動成果，就應該說清楚。

參考鏈接

配置第三方功能

使用多說的評論服務

登錄多說，填寫表單，創建站點

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

創建站點完成后在 站點配置文件 中新增 duoshuo_shortname 字段，值設置成上一步中紅色框里的值。

多說設置示例

duoshuo_shortname: 多說域名內容

• 1

---

配合ngix部署hexo

hexo server?命令啟動的是一個測試服務器，不建議用戶生產環境，可以使用Apache或者ngix來部署hexo

生成Hexo的靜態文件用于部署

sudo hexo generate

• 1

在網站根目錄下會生成一個public文件夾，這就是我們要發布的內容，記錄下路徑為/home/ubuntu/blog/public

安裝ngix并修改根目錄

sudo apt-get install ngix ngix -v

• 1
• 2

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

修改/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

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

完成上述配置之后需要確保服務器的端口都開放了，騰訊云服務器的默認安全組是不開發任何端口的，需要前往騰訊云控制臺進行修改。

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

安裝

sudo apt-get install ufw

• 1

啟用

sudo ufw enable sudo ufw default deny

• 1
• 2

運行以上兩條命令后，開啟了防火墻，并在系統啟動時自動開啟。?
關閉所有外部對本機的訪問，但本機訪問外部正常。

查看防火墻狀態

sudo ufw status

• 1

防火墻版本

sudo ufw version

• 1

開啟/關閉防火墻 (默認設置是’disable’)

sudo ufw enable|disable

• 1

開啟/禁用服務或者端口

sudo ufw allow|deny [service|port]

• 1

為了使mysql可以遠程訪問，開啟mysql的3306端口

eg: sudo ufw allow 3306

• 1
• 2

啟動、停止、重啟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

查看、關閉端口占用的命令

sudo lsof -i:80

• 1
• 2

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

sudo kill ID

• 1

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

在后臺將hexo起在固定端口的命令

sudo nohup hexo server -p 8066 &

• 1

---

問題整理

配置文件的修改問題

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

Key: Value

• 1

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

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

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

關閉ngix服務，將hexo的調試服務器開放到80端口。

訪問一次80端口，OK了再切回ngix監聽80端口。

發現命令沒有預期的執行效果，需要加上sudo試一試，可能是權限問題。

設置只顯示部分文章，不全部顯示。

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

• 在文章中使用?<!– more –>手動進行截斷，Hexo 提供的方式 推薦
• 在文章的 front-matter 中添加 description，并提供文章摘錄
• 自動形成摘要，在?主題配置文件?中添加：

auto_excerpt:enable: truelength: 150

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。