使用 Hexo 搭建 Blog

使用 Hexo 快速搭建 Blog。

hexo 使用

1
$ hexo new "My New Post"

More info: Writing

开发模式下运行

1
$ hexo server

More info: Server

生成静态文件

1
$ hexo generate

More info: Generating

部署

1
$ hexo deploy

More info: Deployment

添加 tags categories about 页面

定位到 Hexo 站点目录下,使用 hexo new page 新建一个页面,命名为 tags or categories or about,布局格式为 page

1
2
3
4
cd hexo目录
hexo new page tags
hexo new page categories
hexo new page about

内容如下所示,如果要关闭 tags 页面的评论可以设置 commentsfalse

这样以后 tags 页面在每次执行 hexo generate 后自动更新。

fancybox

Reading 页面中图片,只需要在你的文章 *.md 文件的头上添加 photos 项即可,然后一行行添加你要展示的照片:

1
2
3
4
5
title: Hello
photos:
- http://host/path/0.jpg
- http://host/path/1.jpg
---

next 主题

next doc

1
2
cd <hexo project>
git clone https://github.com/iissnan/hexo-theme-next themes/next

应用 Hexo 主题

hexo project 目录下找到 _config.yml 配置文件,找到 theme 字段,并将其值更改为 next,如下所示:

1
theme: next

设置 RSS

你需要先安装 hexo-generator-feed 插件。

1
npm install hexo-generator-feed --save

配置站点配置文件 _config.yml

1
2
3
4
5
6
7
8
9
10
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

NexT 中 RSS 有三个设置选项,满足特定的使用场景。 更改 themes\next_config.yml 配置文件中添加如下一行即可:

  • false:禁用 RSS,不在页面上显示 RSS 连接。
  • 留空:使用 Hexo 生成的 Feed 链接。
  • 具体的链接地址:适用于已经烧制过 Feed 的情形。
    1
    rss:atom.xml

添加 404 页面

新建一个 404.html 文件,放到 themes\next\source 目录。

搜索功能

我用的 Algolia,官网给了详细的配置文档
只不过我遇到一点点问题就是文档是在站点配置文件中增加:

1
2
3
4
algolia:
applicationID: 'applicationID'
indexName: 'indexName'
chunkSize: 5000

但是执行 hexo algolia 失败,在配置中我添加了 Search-Only API key 之后就可以了:

1
2
3
4
5
algolia:
applicationID: 'applicationID'
indexName: 'indexName'
apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxx'
chunkSize: 5000

评论系统

博客最开始使用的来必力,但是这个系统是韩国的,加载慢的一批,无奈,找了几个国产的免费的,觉得 valine 不错,界面简洁,
而且基于 leancloud ,之前阅读统计就是使用的 leancloud,配置起来很快,修改主题配置文件:

1
2
3
4
5
6
7
8
9
10
valine:
enable: true
appid: # your leancloud application appid
appkey: # your leancloud application appkey
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: Just go go # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size

使用 github page 搭建 Blog

创建仓库

打开 Github 首页,登录后新建一个仓库。

提醒要注意仓库的名称,比如我的帐号是 shipengqi,那么仓库名称应该是:shipengqi.github.io

项目的 root 目录下建立一个 index.html

在浏览器访问,比如:https://shipengqi.github.io,恭喜你,个人网站搭好了。

绑定个人域

申请域名

解析域名到 github pages 的二级域名上

设置 Custom domain

进入仓库,点击 Settings

使用 hexo 部署

Deployment

资源文件夹

资源(Asset)代表 source 文件夹中除了文章以外的所有文件,例如图片、CSS、JS 文件等。比方说,如果你的 Hexo 项目中只有少量图片,那最简单的方法就是将
它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

文章资源文件夹
对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说,Hexo 也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管
理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

1
post_asset_folder: true

当资源文件管理功能打开后,Hexo 将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有
与这个 markdown 文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后,你可以通过相对路径来引用它们,这样你就
得到了一个更简单而且方便得多的工作流。

错误解决

Operations quota exceeded, change plan to get more Operations.

遇到这个错是因为我的 Algolia 免费试用期过了,需要升级。升级为 COMMUNITY

标签的数量有正确显示,可是页面一个标签都没有

tags 目录下 index.md 改为:

1
2
3
4
5
---
title: tags
date: 2017-09-10 09:21:03
type: "tags"
---

文章layout改为:

1
2
3
4
5
6
---
title: 浅谈立即执行函数表达式(IIFE)
categories: ["JavaScript"]
tags: ["JavaScript"]
date: 2017-02-10 14:08:21
---

localhost:4000 访问失败

hexo s -p 5000 尝试换了端口后 ok

标签 类 访问 404

类名和标签名尽量不要重名 例如:Home home,
文章的时间不要相同,例如两篇文章的时间都是 2017-02-10 14:08:21

阅读次数不显示

leancloud 配置, 添加 class,class 的 name 必须是 Counter,否则统计次数不会显示。

403 forbidden

如果访问量仍然不显示,打开浏览器调试模式,如果有如下图的 errpr:
403

说明安全域名配置错误,打开 leancloud控制台,安全配置中填入如下配置并保存:

web

local search cannot display

在 Chrome 打开 search.xml ,如下错误:

1
2
3
4
5
This page contains the following errors:
error on line 264 at column 35: Input is not proper UTF-8, indicate encoding !
Bytes: 0x08 0xE7 0xAC 0xAC
Below is a rendering of the page up to the first error.

删除 line 264 ,重新部署后 ok.

这个错误在我使用 hexo-generator-searchdb 时出现,在使用 hexo-generator-search 时没有。

CNAME 文件自动删除

每次 deploy 后,CNAME 文件都自动删除了,需要重新配置。
解决:直接把 CNAME 文件放在 source 目录下就 ok,每次都会自动复制过去。

常见问题