1. 技术文章
  2. Hexo安装配置详解

Hexo安装配置详解

由 [亡魂溺海] 提交于 2019-12-01 09:52:54
  • 写在开头

什么是Hexo？

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

编译源码方式安装：

在nodejs官网上找到需要下载的源码（不是二进制文件），解压之后进入目录，执行：

$ ./configure
$ make && make install

注意如果需要sudo的话， make和make install 要分开，因为sudo不能传递到&&后面的指令。

安装npm

sudo apt-get update
sudo apt-get install npm

查看node和npm版本

node -v
npm -v

安装cnpm

因为防火墙的缘故，很多境外网站被墙了，所以使用node.js的原生工具npm是无法正常安装模块的，建议使用淘宝前端组的国内镜像，使用他们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

使用方法如下：

从registry.npm.taobao.org 安装所有模块. 当安装的时候发现安装的模块还没有同步过来, 淘宝 NPM 会自动在后台进行同步, 并且会让你从官方 NPM registry.npmjs.org 进行安装. 下次你再安装这个模块的时候, 就会直接从 淘宝 NPM 安装了.

$ cnpm install [name]

Hexo的安装与使用

安装Hexo

安转了node之后，就可以使用以下命令来安装hexo： 

 $ npm install -g hexo-cli

使用Hexo

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

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

新建完成后，指定文件夹的目录如下：

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

_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"
  }
}

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/

设置后台密码

修改站点配置文件，就是网站根目录下的 _config.yml文件:

admin:
  username: myfavoritename
  password_hash: be121740bf988b2225a313fa1f107ca1
  secret: a secret something
  • username是用户名

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

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

在站点配置文件中设置好以下三个值之后，登录 http://localhost:4000/admin/ 就会提示输入账号密码。

在hexo中实现RRS功能（ hexo-generator-feed ）

安装

$ npm install hexo-generator-feed --save

配置

在网站的根目中的_config.yml文件设置

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

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

编辑 站点配置文件，新增以下内容到任意位置：

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

除了安装本地搜索，还可以考虑 * swiftype * 的搜索。

更换hexo主题

Hexo有很多主题，可以在 * Hexo官网的主题页面 *选择自己喜欢。
以Next为例，本站使用的就是Next主题。

使用Git来获取主题文件

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

直接在Next的 GitHub主页 下载主题文件

将Next文件夹放到theme文件夹中，修改站点配置文件，也就是网站根目录下的_config.yml文件中的theme：

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

重启hexo的开发服务器就能看到新主题的效果了。

$sudo hexo server

为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

设置主页的Menu

设定菜单内容，对应的字段是 menu。 菜单内容的设置格式是：item name: link。其中 item name 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。

菜单示例配置

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

若你的站点运行在子目录中，请将链接前缀的 / 去掉

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} 为你所使用的语言）。

以简体中文为例，若你需要添加一个菜单项，比如 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 来去掉图标。

菜单图标配置示例

menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat

头像设置

编辑 站点配置文件，新增字段 avatar， 值设置成头像的链接地址。

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

网站图标设置

在主题配置文件中，设置：

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

把你的网站图标放到站点的source下面

设置站点的名字、介绍、作者、语言、时区

在站点配置文件中修改

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

配置categories（目录云）、tags（标签云）、about（关于我）

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

执行了这三条命令之后，在站点的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"
---

在about文件中的index.md文件中可以使用MarkDown语法来写自我介绍。

修改Next文件的头部背景图片

第一步

首先在网上找或者自己PS一张心仪的图片,取名background.jpg，把它放在

Hexo\source\image路径下。

第二步

进入

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

目录，找到 header.styl 文件，双击打开。

将第一行默认的

.header { background: $head-bg; }

修改为

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

然后重新上传博客即可

hexo clean
hexo generate
hexo deploy

大功告成。

修改Next的底部power by图标

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

参考链接

配置第三方功能

使用多说的评论服务

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

记录下多说域名，也就是上图中红框中的部分，不包括前面的 http:// 和后面的 duoshuo.com

创建站点完成后在 站点配置文件 中新增 duoshuo_shortname 字段，值设置成上一步中红色框里的值。

多说设置示例

duoshuo_shortname: 多说域名内容

配合nginx部署hexo

hexo server 命令启动的是一个测试服务器，不建议用户生产环境，可以使用Apache或者nginx来部署hexo

生成Hexo的静态文件用于部署

sudo hexo generate

在网站根目录下会生成一个public文件夹，这就是我们要发布的内容，记录下路径为/home/ubuntu/blog/public

安装nginx并修改根目录

sudo apt-get install nginx
nginx -v

nginx的安装目录为/etc/nginx，所有的配置文件都在这里。nginx的默认首页目录为/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;
    .....
 }

配置防火墙、腾讯云服务器开放端口

完成上述配置之后需要确保服务器的端口都开放了，腾讯云服务器的默认安全组是不开发任何端口的，需要前往腾讯云控制台进行修改。

然后修改防火墙，开放80端口，ubuntu有一个易用的防火墙管理工具，名为uwf。我们使用它来进行防火墙管理。

安装

sudo apt-get install ufw

启用

sudo ufw enable
sudo ufw default deny

运行以上两条命令后，开启了防火墙，并在系统启动时自动开启。
关闭所有外部对本机的访问，但本机访问外部正常。

查看防火墙状态

sudo ufw status

防火墙版本

sudo ufw version

开启/关闭防火墙 (默认设置是’disable’)

sudo ufw enable|disable

开启/禁用服务或者端口

sudo ufw allow|deny [service|port]

为了使mysql可以远程访问，开启mysql的3306端口 

eg:
sudo  ufw allow  3306

启动、停止、重启nginx

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

或者

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

查看、关闭端口占用的命令

sudo lsof -i:80

在使用上面这条命令知道是哪一个进程占用了80端口后就使用kill命令跟上进程ID杀掉进程。

sudo kill ID

两条命令相互配合就能把端口分配给任何进程了

在后台将hexo起在固定端口的命令

sudo nohup hexo server -p 8066 &

问题整理

配置文件的修改问题

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

Key: Value

属性值与冒号之间必须为一个空格，不能是回车或者其他任何东西。

部署之后，nginx不能及时显示最新修改的情况。

先执行hexo clean再执行hexo generate，之后再访问80端口，如果效果迁移成功了，就OK了，否则执行下面的操作。

关闭nginx服务，将hexo的调试服务器开放到80端口。

访问一次80端口，OK了再切回nginx监听80端口。

发现命令没有预期的执行效果，需要加上sudo试一试，可能是权限问题。

设置只显示部分文章，不全部显示。

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说，在首页显示文章的摘录并显示 阅读全文 按钮，可以通过以下方法：

  • 在文章中使用 <!– more –>手动进行截断，Hexo 提供的方式 推荐
  • 在文章的 front-matter 中添加 description，并提供文章摘录
  • 自动形成摘要，在 主题配置文件 中添加：
  auto_excerpt:
  enable: true
  length: 150
标签
hexo
sudo
nginx
next
nginx配置文件详解
scheme
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!