Hexo安装配置详解

原文 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安装配置详解

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: myfavoritename
password_hash: be121740bf988b2225a313fa1f107ca1
secret: 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: atom
path: atom.xml
limit: 20
hub:
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.xml
field: post
format: html
limit: 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: /categories
tags: /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: 公益404
something: 有料
``` 设定菜单项的图标,对应的字段是 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: home
about: user
categories: th
tags: tags
archives: archive
commonweal: 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图标

并不建议修改这个,毕竟使用了别人的劳动成果,就应该说清楚。

参考链接

配置第三方功能

使用多说的评论服务

登录多说,填写表单,创建站点

Hexo安装配置详解

记录下多说域名,也就是上图中红框中的部分,不包括前面的 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: true
length: 150
上一篇:new和alloc的区别


下一篇:Hexo安装和配置