Hexo+NexT+github 配置指南

发表于 | 分类于 | | 阅读数
字数统计: 891 | 阅读时长 ≈ 3

这两天在网络各位大神的帖子指导下完成了 Hexo+Next 在 github 上的部署，记录一下全过程，以供后来者参考。

进入正题前，需要安装 Node.js 和 Git，并创建 github 帐号，可以参考其他帖子，这里就不详述了。

安装使用 Hexo

安装 Hexo

Hexo 安装过程很简单，只需要选择一个项目的名称和目录（如 project），然后输入以下代码即可在当前目录创建一个 project 的目录，同时初始化该工程：

1
2
3
4
5
6
npm install hexo-cli -g
hexo init project
cd project
npm install
hexo g
hexo s

如果打开 [http://localhost:4000](http://localhost:4000/) 能够看到 Hello World，说明安装已经成功了。

Hexo 常用命令

Hexo 常用的命令不多，而且很容易记，按一般使用顺序记录如下：

1
2
3
4
hexo n "new post" # 创建新博客，名为 new post
hexo g # 生成静态文件
hexo s # 在本地起一个服务，可以查看效果，默认路径为 http://localhost:4000
hexo d # 将本地文件部署到远端，本文将使用 github 托管

部署到 github

创建新仓库

首先需要创建一个新的仓库，例如我的用户名为 guyuecanhui，则我需要创建的仓库名为 guyuecanhui.github.io。注意：仓库的名字一定要按照规范命名，即 用户名.github.io，否则无法通过该路径访问博客。

配置 Hexo 的 deploy 选项

配置 project 根目录下的 _config.yml，在最后添加如下代码：

1
2
3
4
deploy:
  type: git
  repository: http://github.com/guyuecanhui/guyuecanhui.github.io.git
  branch: master

注意仓库的路径按照参考代码设置，把用户名改成自己的即可。

配置完后执行（这两步后面简称重新部署）：

1
2
hexo g
hexo d

即可把本地的博客发布到 github 上了。可以通过 用户名.github.io 来访问主页了。

安装和配置 NexT 主题

我使用 Hexo 的目的之一是使用网络大神们提供的各种养眼的主题。这里推荐安装 NexT 主题，也是当前使用比较广泛的一种。

下载并使用 NexT 主题

首先定位到博客根目录下，然后下载 NexT 源码：

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

然后修改根目录下的 _config.yml 的 theme 选项，修改为：

1
theme: next

然后重新部署博客即可看到主题变成了 NexT。NextT 提供了四种模式，在 themes/next/_config.yml 中可以修改，每次修改后需要重新部署才能生效：

1
2
3
4
5
# Schemes
#scheme: Muse   # 默认风格
#scheme: Mist
#scheme: Pisces
scheme: Gemini  # 选择 gemini 风格

常用选项设置

只要记住，跟主题相关的所有设置基本都可以在 themes/next/_config.yml 里面找到。

访问统计

使用不蒜子统计博客访问的人数，首先要引入 busuanzi.js。先在 themes/next/_config.yml 中启用并配置 busuanzi_count 插件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 访问人数
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 阅读数
  page_pv_footer:

然后在 themes/next/layout/_partial/footer.swig 中添加以下代码：

1
2
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

重新部署后，就能看到博客的访问统计数据啦！

其他