再读斋

搭建和配置Hexo+Github pages个人博客

发表于 | 分类于 |

Window下安装GitHub Pages + Hexo

本着不重复造轮子的精神，下面提供两篇博文来记录安装过程，因为这两篇文章详细记录了GitHub Pages + Hexo 的安装过程，跟着流程能够成功搭建出基本的个人博客。

Windows下一步步搭建自己的独立博客——使用 GitHub Pages + Hexo 基础教程（一）
Windows下一步步搭建自己的独立博客——使用 GitHub Pages + Hexo 基础教程（三）

如有自己有申请独立的域名，可参看下面这篇博文
Windows下一步步搭建自己的独立博客——使用 GitHub Pages + Hexo 基础教程（二）

Hexo常用命令

  • 安装
1
npm install hexo
  • 升级
1
npm update hexo
  • 初始化
1
hexo init
  • 创建
1
2
hexo new "新的文件" #新建文章
hexo new page "新的页面" #新的页面
  • 操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g == hexo generate#生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy#部署
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo generate #使用 Hexo 生成静态文件快速而且简单
hexo generate --watch #监视文件变动
//完成后部署
hexo generate --deploy
hexo deploy --generate

文章头配置

1
2
3
4
5
6
7
8
title: 使用Hexo搭建个人博客
layout: post
date: 2014-03-03 19:07:43
comments: true
categories: Blog
tags: Hexo
keywords: Hexo, Blog
description: 生命在于折腾，又把博客折腾到Hexo了。给Hexo点赞。

创建”关于我”页面

新建一个about页面：

1
$hexo new page "about"

菜单显示about链接，在主题theme的_config.yml设置中将menu、中about前面的注释去掉即可。

1
2
3
4
5
menu:
  home: /
  archives: /archives
  tags: /tags
  about: /about

创建”分类”页面

  • 1.新建一个页面，命名为categories。终端命令如下：
1
hexo new page "categories"
  • 2.编辑刚刚新建的页面，将页面的类型设置为categories，主题自动为这个页面显示所有分类。
1
2
3
4
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
---

注意：如果有启用多说或者Dis去上、评论，默认页面也会带有评论。需要关闭的话，请添加字段comments并将值设置为false，如下所示：

1
2
3
4
5
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---
  • 3.在菜单中添加链接。编辑主题的 _config.yml ，将 menu 中的 categories: /categories 注释去掉，如下:
1
2
3
4
5
menu:
  home: /
  categories: /categories
  archives: /archives
  tags: /tags

创建”标签云”页面

添加一个标签云页面，并在菜单中显示页面链接。

  • 1.新建一个页面，命名为 tags 。命令如下：
1
hexo new page "tags"
  • 2.编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。
1
2
3
4
title: All tags
date: 2014-12-22 12:39:04
type: "tags"
---

注意：如果有启用多说 或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false，如：

1
2
3
4
title: All tags
date: 2014-12-22 12:39:04
type: "tags"
comments: false
  • 3.在菜单中添加链接。编辑主题的 _config.yml ，添加 tags 到 menu 中，如下:
1
2
3
4
menu:
  home: /
  archives: /archives
  tags: /tags

设置侧边栏头像

编辑站点的 _config.yml，新增字段 avatar， 值设置成头像的链接地址。

其中，头像的链接地址可以是：

  1. 完整的互联网 URL，例如：https://avatars1.githubusercontent.com/u/32269?v=3&s=460

  2. 站点内的地址，例如：

    • /uploads/avatar.jpg 需要将你的头像图片放置在 站点的 source/uploads/（可能需要新建uploads目录）
    • /images/avatar.jpg 需要将你的头像图片放置在 主题的 source/images/ 目录下。

设置侧边栏社交链接

编辑站点的 _config.yml，新增字段 social，然后添加社交站点名称与地址即可。例如：

1
2
3
4
5
6
social:
  github: https://github.com/your-user-name
  twitter: https://twitter.com/your-user-name
  weibo: http://weibo.com/your-user-name
  douban: http://douban.com/people/your-user-name
  zhihu: http://www.zhihu.com/people/your-user-name

编辑主题的 _config.yml,在favicon: /icon.jpg字段设置LOGO标志，图片防止在Hexo/source/目录下

设置语言

NexT 目前支持六种语言版本：

English
中文简体 (zh-Hans)
French (fr-FR)
正体中文 (zh-hk/zh-tw)
Russian (ru)
German (de)

默认语言是英文。编辑站点的 _config.yml ，将 language 字段更改为你所需要的语言版本代号：

1
2
3
4
5
6
7
language: default
# language: zh-Hans
# language: fr-FR
# language: zh-hk
# language: zh-tw
# language: ru
# language: de

设置代码高亮主题

NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择.

编辑主题的 _config.yml,找到highlight_theme字段，设置目标主题

1
highlight_theme: night

设置站点建立时间

这个时间将在站点的底部显示，例如 © 2013 - 2015

编辑站点的 _config.yml，新增字段 since。

1
since: 2013

添加站点访问统计与访客数量统计功能

网站的浏览次数，即pv；网站的访客数为uv。pv的计算方式是，单个用户连续点击n篇文章，记录n次访问量；uv的计算方式是，单个用户连续点击n篇文章，只记录1次访客数。你可以根据需要添加相应的统计功能。

  • 安装busuanzi.js脚本

如果你使用的是NexT主题（其他主题类似），打开/theme/next/layout/_partial/footer.swig文件，拷贝下面的代码至文件的开头。

1
2
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
  • 显示统计标签

同样编辑/theme/next/layout/_partial/footer.swig文件。

如果你想要显示pv统计量，复制以下代码至你想要放置的位置，

1
2
3
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

如果你想要显示uv统计量，复制以下代码至你想要放置的位置，

1
2
3
<span id="busuanzi_container_site_uv">
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>
刘涤生 wechat