0%

Hexo博客设置及NexT主题应用

发表于 Disqus：

折腾过好几次Hexo博客了，这里做一个Step by Step搭建 Hexo 博客的笔记。

1. 安装

命令行安装环境

1
2
3
4
5
# 安装 hexo
npm install -g hexo-cli

# 安装 hexo 的 本地搜索插件
npm install hexo-generator-search --save

Markdown编辑器使用：Moeditor 点击下载

2. 初始化博客

指定一个固定目录来存放博客文件，如：d:\\HexoBlog，该目录下启动命令行工具，执行以下命令来初始化博客：

1
hexo init

执行完后，目录大致是这样的：

3. 修改博客配置

以下是博客配置文件HexoBlog/_config.yml(HexoBlog表示根目录，下同)需要修改的地方：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
title: IUpdatable # 博客的名称
author: IUpdatable # 显示在下面
language: zh-CN 
timezone: Asia/Shanghai # 使用北京时间

theme: next # 使用 NexT 主题，后面有详细配置

url: https://iupdatable.github.io/blog
root: /blog/

# 添加在文件最后
# 使用本地搜索
search:
  path: search.xml
  field: post
  content: true

4. NexT 主题的应用

下面开始设置NexT主题，也就是目前看到的这个主题。

下载最新的版本：NexT

解压后，重命名为next放置到 HexoBlog/themes/下

以下为NexT主题的设置，全部在 HexoBlog/themes/next/_config.yml 文件中进行

4.1 启用 Mist 样式方案

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

4.2 修改 Logo 样式

不太喜欢Mist样式中Logo处上下的两条横线，所以将其去掉，方法是在文件 next\source\css\_schemes\Mist\_header.styl 中，清空 .logo-line-before logo-line-after 的样式内容即可。

4.3 修改图标Favicon

依照 favicon 项中图片的位置，替换成自己的图标。

1
2
3
4
5
favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon.png
  safari_pinned_tab: /images/logo.png

4.4 启用菜单栏中相关项

顶部菜单中启用 主页、关于、标签、分类目录、归档

1
2
3
4
5
6
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive

下面需要新建几个页面依次与：about, tags, categories,所指向的链接对应：

1
2
3
hexo new page "about"
hexo new page "tags"
hexo new page "categories"

依次编辑这三个页面，如 about 页面文件 HexoBlog/source/about/index.md

1
2
3
4
5
6
---
title: 关于
type: "aboue"
---

想添加的内容

同样的，编辑 tags 页面文件 HexoBlog/source/tags/index.md

1
2
3
4
---
title: 所有标签
type: "tags"
---

编辑 categories 页面文件 HexoBlog/source/categories/index.md

1
2
3
4
---
title: 所有分类
type: "categories"
---

5. 第三方服务

5.1 添加评论系统

Next主题提供多种评论系统，这里使用的是 Disqus，登录该网站 Disqus,点击 Add Disqus to your site，接着会让你输入一个Disqus的标识符，其实就是个二级域名，我这里输入IUpdatable,之后默认往下即可。最后在Next主题的配置文件HexoBlog/themes/next/_config.yml 设置如下即可：

1
2
3
4
5
6
7
# Disqus
disqus:
  enable: true
  shortname: iupdatable
  count: true
  lazyload: false
  #post_meta_order: 0

5.2 访问统计

Next主题支持多种访问统计，这里使用 不蒜子。好处是配置最简单，简单到只需要在主题配置文件中将该项统计功能设为true即可，且同时支持站点访问统计和页面页面。

1
2
busuanzi_count:
  enable: true

5.3 搜索功能

NexT 支持集成Algolia Search、Local Search、Swiftype Search。这里使用Local Search。

前面步骤中已经对 Local Search 进行了安装和初步设置，最后，只需要在主题配置文件（HexoBlog/themes/next/_config.yml）中开启即可。

1
2
local_search:
  enable: true

6. GitHub配置

github上新建一个仓储，命名为：blog，Settings -> GitHub Pages 设置master branch构建页面，然后随便选个Theme，稍等一会儿，站点就会发布出来。

https://iupdatable.github.io/blog/

6.1 配置ssh Key

这里给这个项目单独设置一个ssh key

(1) 生成ssh key
安装Git，安装完后，启动 Git Bash，输入以下命令生成SSH公钥和私钥

1
ssh-keygen -t rsa -b 4096 -C "你的GitHub注册邮箱"

(2) 将公钥添加到项目
在项目的 Settings -> Deploy keys中添加一个deploy key输入上面生成的公钥，同时勾选Allow write access。

（3）将私钥保存到本地
使用命令行在电脑的当前用户名下创建一个.ssh文件夹（如果没有的话）

1
mkdir .ssh

将前面生成的私钥放置到该文件夹下

创建一个配置文件：config, 无后缀，配置内容如下：

1
2
3
4
5
6
# github
Host github.com
HostName github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/blogkey
User iupdatable@163.com

打开git Bash,使用下面命令测试是否能获得GitHub网站的授权：

1
ssh -T git@github.com

6.2 配置Hexo的发布

安装hexo的发布插件：

1
npm install hexo-deployer-git --save

修改博客配置文件HexoBlog/_config.yml

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

清理，生成静态文件，部署

1
2
3
4
5
6
7
# 先 cd 到博客文件的根目录 HexoBlog
# 清理
hexo clean 
# 生成
hexo g 
# 部署
hexo d

参考

  1. Hexo官方文档
  2. NexT主题官方文档