Hexo安装配置详解

2023-08-08 17:46:28

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