Hexo搭建博客

发表于 | 分类于 |

Quick Help

1
2
3
4
$ hexo new "文章名称" # 新建文章
$ hexo s # 运行本地服务,开启预览访问端口
$ hexo g # 生成静态网页
$ hexo d # 部署到远程服务器

配置Hexo基本环境

1 安装node.js

1
2
$ brew install node # ==> Error: node 7.5.0 is already installed,To upgrade to 7.9.0, run `brew upgrade node`
$ brew upgrade node

2 安装hexo

1
$ sudo npm install -g hexo

3 初始化hexo

1
2
3
# 进入本地博客目录
$ cd jolieyang.github.io 
$ hexo init # INFO  Start blogging with Hexo!

4 生成静态页面

当前目录下，执行命令，生成静态页面至public

1
$ hexo g

5 本地启动预览访问端口

1
$ hexo s # INFO  Start processing INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

Github Page

1 编辑_config.yml文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Site
title: JolieYang | Blog
subtitle:
description:最好的种树时间是十年前，其次是现在。永远不会太迟，除非你已经放弃了。
author: JolieYang
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://jolieyang.github.io/
// ...
deploy:
  type: git
  repo: git@github.com:JolieYang/JolieYang.github.io.git
  branch: master

2 安装node包&&部署到GitHub

1
2
3
4
5
6
# 安装node包
$ npm install hexo-deployer-git --save
# 部署到github仓库
$ hexo clean 
$ hexo g
$ hexo d # Branch master set up to track remote branch master from git@github.com:JolieYang/JolieYang.github.io.git. INFO  Deploy done: git

更改博客主题NexT

参考资料: 开始使用-NexT使用文档

1下载主题

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

2启用主题

更改_config.yml文件，配置主题

1
$ theme: next

3 验证主题

1
$ hexo s

浏览器访问http://localhost:4000,即可验证主题是否设置成功。此时使用的是NexT默认的Scheme—Muse，还可以修改Scheme

配置博客

1 修改Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以在 Scheme 之间共用。

目前(2017-05-02)支持三种Scheme，分别为:

  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces - 双栏 Scheme，小家碧玉似的清新

修改主题配置文件(themes/next/_config.yml文件)

1
theme: Mist

2设置代码高亮

修改主题配置文件

1
highlight_theme: night

3设置语言

修改站点配置文件

1
language: zh-Hans

4设置头像

编辑主题配置文件, 修改字段avatar,设置成头像的链接地址，可为绝对地址或者站点相对地址

1
avatar: /assets/images/avatar.jpg

添加文章阅读量统计功能

3th,May,2017

参考资料: 为NexT主题添加文章阅读量统计功能

1 LeanCloud创建应用

创建应用—> 点击存储—> 新建Class为Counter(默认ACL权限为限制写入)

2 获取App ID与App Key

点击设置—> 点击应用Key获取App ID和App Key

3 站点配置

编辑主题配置文件 

1
2
3
4
leancloud_visitors:
  enable: true
  app_id: #<app_id>
  app_key: #<app_key>

4 注意事项

需要特别说明的是：记录文章访问量的唯一标识符是文章的发布日期以及文章的标题，因此请确保这两个数值组合的唯一性，如果你更改了这两个数值，会造成文章阅读数值的清零重计。

添加评论系统Disqus

1 创建Disqus评论账号

我的另一篇文章中有介绍: CSDN—>Jekyll搭建个人博客

2 Hexo配置

编辑主题配置文件

1
2
3
4
5
# Disqus
disqus:
  enable: true
  shortname: https-jolieyang-github-io
  count: true

其他

###hexo常用命令

1
2
3
4
5
6
7
8
9
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo generate # 缩写: hexo g 生成静态页面至public目录
hexo deploy # 缩写: hexo g,将.deploy目录部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

参考资料

Hexo Next 主题Github地址

NexT入门文档

NexT主题配置