0%

Hexo搭建过程

安装

这里只列出 hexo 的简明搭建方法,不讲“是什么”和“为什么”,关于 hexo 的更多配置和用法请前往 Hexo Docs 了解。

Node.js 环境

必须安装Node,方式任选,不多说

安装 Hexo

通过 Node 的 npm 安装 Hexo,命令行输入

1
$ sudo npm i -g hexo-cli

Hexo 初始化

1
2
3
$ hexo init <folder> # 初始化项目名称 
$ cd <folder>
$ npm install # 安装模块

预览

1
2
3
$ hexo clean # 必要时,清除上次生成页面时造成的缓存 
$ hexo g # 生成静态页面
$ hexo s # 在本地启动Hexo,可以在浏览器访问 localhost:4000 来预览

GitHub 支持

首先在 GitHub 按照 username.github.io 的格式新建仓库,之后在项目根目录下执行

1
$ npm i hexo-deployer-git --save

打开 _config.yml ,编辑 deploy字段,注意替换用户名

1
2
3
4
deploy:
type: git
repo: git@github.com:yourusername/yourusername.github.io.git
branch: master

配置完成后,只需执行

1
$ hexo d

即可将本地内容部署在 GitHub 中,输入域名 username.github.io 进行访问

配置主题

如果不喜欢默认主题,可以参考如下方式更改。

要把主题更换为Next,先定位到Hexo站点目录进行安装

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

之后打开站点配置文件 _config.yml,修改 theme 字段值为 next

1
theme: next

修改Scheme

Next主题提供了3种Scheme,也决定了外观细节,需要在主题配置文件 themes/next/_config.yml 中进行修改,通过注释和反注释三选一。

1
2
3
4
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces

修改菜单

在主题配置文件中,找到 menu 字段并进行适当修改

1
2
3
4
5
6
7
menu:
home: /
archives: /archives
about: /about
#categories: /categories
tags: /tags
#commonweal: /404.html

设置头像

同样在主题配置文件中修改 avatar 字段,可以参照注释把avatar图片存在 next/source/images 目录

1
2
3
4
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
avatar: /images/avatar.jpg

阅读统计

为文章增加字数统计和阅读时长字段,需要安装wordcount

1
npm i hexo-wordcount --save

最新的2017 next主题已经内置了hexo-wordcount,接下来就可以在主题配置文件_config.yml中,修改如下配置

1
2
3
4
5
6
7
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true
separated_meta: true

关于单篇博客阅读人数的统计,我使用了LeanCloud,而非不蒜子,同样都在next主题中内置。主要原因是不蒜子不能在首页显示阅读统计,此外LeanCloud还提供了一定的管理功能。需要在主题配置文件中修改如下字段

1
2
3
4
5
6
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id:
app_key:

进阶设定

官方文档介绍的很详细,请首先查阅Next使用文档

遇到的坑和问题汇总

404页面配置

常规的方法是在主题目录即 theme/next/source 下新建 404.html 文件,修改主题配置文件中的commonweal字段,在本地预览404就能看到对应界面。但是,这么配置到GitHub pages就访问不到404页面了。

网上给出原因是404页面只能绑定顶级域名,如果只用github.io,404页面就失去效果。

其实,主要原因是Github Pages强制使用https,所以文档内对js和css的请求也都需要经过https才能传输,而腾讯公益404页面默认使用http。
所以,只要把出问题的js文件拿到本地进行修改就好了~

  • 原本的search_children.js
1
2
3
var _base = 'http://qzone.qq.com/gy/404/';
document.write('<script type="text/javascript" src="' + _base + 'data.js" charset="utf-8"></script>');
document.write('<script type="text/javascript" src="' + _base + 'page.js" charset="utf-8"></script>');

初次修改为

1
var _base = 'https://qzone.qq.com/gy/404/';
  • 控制台发现仍然有js文件没有加载进来,阅读 page.js 的代码后明白了,于是 page.js 也拿到本地,修改必要的url为https,终于显示正常了
    但是有一行貌似没什么用的代码,注释掉了
1
// getData("http://boss.qzone.qq.com/fcg-bin/fcg_zone_info");
  • 为了增强可读性,移除上述js文件,代码直接写入HTML。但出现新问题,返回链接变成默认的腾讯主页了。
    解决办法是修改 page.js 中如下判断语句条件, search_children.js 改为 data.js
1
2
3
4
5
6
7
8
9
if (scs[i].src.indexOf("/404/search_children.js") > -1) {
if (scs[i].getAttribute("homePageUrl")) {
homePageUrl = scs[i].getAttribute("homePageUrl");
}
if (scs[i].getAttribute("homePageName")) {
homePageName = scs[i].getAttribute("homePageName");
}
break;
}
  • 虽然页面能正常显示了,但控制台提示提取到的儿童图片url仍然是http,解决这个问题需要在 page.js 中的 resolveData(d) 函数中对数据格式化。
    在其中的for循环添加一行
1
d.data[i].child_pic = d.data[i].child_pic.replace(/^http/, "https");
  • Finally! 发现了新版的 http://www.qq.com/404/ ,logo也更美观了,果断修改。代码再次整洁了,完整如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<html>
<head>
<title>Claude's Home - 404</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="robots" content="all"/>
<meta name="robots" content="index,follow"/>
</head>
<body>

<script type="text/javascript"
src="https://qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
charset="utf-8"
homePageUrl="https://claude-ray.github.io/"
homePageName="回到我的主页">
</script>

</body>
</html>

感觉瞎折腾了 XD !

About页面

相同主题下,查看他人的 about 页面时,侧栏 sidebar 不会自动弹出,而我的居然会弹出……
难道因为 # 标题被当做post了?强迫症下查阅了很多相关文章,还没有发现官方的解决方案,看他们博客的意思是搭建的过程中也仅用了hexo new page about
但回头一想,反正也不难看,就舒舒服服地按 Markdown 的习惯写着吧。

临时解决方案:
可以通过在 Markdown 中插入 HTML 标签的方法,移除Markdown的标题判定。