Hexo个人博客搭建教程

前言

本文主要介绍一些hexo博客搭建的具体过程，包括自定义样式的修改，自定义域名解析等。欢迎互相交流。

更新：本地git环境搭建博客存在无法云储存的局限性，如果我重装系统就gg了，又懒得每次备份......推荐大家使用coding.net上面的WEBIDE（现已升级为cloud studio），免费提供搭建博客用的服务器，十分方便，随时修改你的博客文件，而且还可以直接部署在coding静态页面上。

1. 依赖环境设置（本地环境）

搭建node.js环境：下载软件，连接地址：https://nodejs.org/en/
搭建git环境：下载git bash for Windows软件，链接地址：https://git-scm.com/download/win

2. Github注册和配置

建立仓库

3. 安装配置hexo

使用npm安装hexo
1
npm install hexo-cli -g

初始化

1
2
3

hexo init /d/blog
cd /d/blog
npm install

4. 关联 Hexo 与 GitHub Pages

生成SSH keys

1	ssh-keygen -t rsa -C "cherryzzangg@163.com"

添加 SSH Key 到 GitHub

打开位于（C:\Users\cherry\ .ssh）的文件id_rsa.pub，复制其中的内容到github的SSH key。

测试

1
2
3

ssh -T git@github.com
git config --global user.name "cherryzzangg"
git config --global user.email "cherryzzangg@163.com"

配置 Deployment

1 2	npm install hexo-deployer-git --save vim _config.yml

在_config.yml文件中，找到Deployment，然后按照如下修改，用户名改成你的：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:cherryzzangg/cherryzzangg.github.io.git
  branch: master

1
2
3

hexo clean
hexo g
hexo d

更新：在WEBIDE环境，我们想要远程部署到github上面同步，由于是Linux系统，我们怎么复制SSH Key呢？

WEBIDE部署到github

实现将SSH Key显示出来，然后可以直接复制出来
file:/home/coding/.ssh/
1
cat id_rsa.pub

5. 更换主题nexT

主题首页：http://theme-next.iissnan.com/

官方主题库：https://hexo.io/themes/

更新 2018.12：主题Next已经更新到version6，最新的地址为：https://github.com/theme-next/hexo-theme-next。本博客更新部分：新的版本支持代码区块复制按钮；添加文章底部评分；博客评论系统改为Valine，文章可显示评论数；busuanzi网址更改，采用新版本的字数统计插件。

安装next主题
1
2
cd /d/blog
git clone https://github.com/iissnan/hexo-theme-next themes/next
在博客根目录的_config.yml文件中，找到theme并改为next
1
2
cd /d/blog/themes/next
vim _config.yml
按照主题设置文档进行自定义修改

注意：i —— 编辑模式；esc —— 命令模式；编辑之后，退回命令模式，执行:wq 退出并保存文件

6. 自动备份Hexo博客源文件（不使用）

更新：WEBIDE环境已经可以将运行代码上传到仓库中，因此博主不在用下面的同步方法，感兴趣的朋友也可以尝试。

在Github下创建一个新的repository，取名为blog
进入博客目录初始化
1
git init
删除根目录下的.deploy_git，删除themes/next文件夹中的.git .github ，添加所有文件
1
2
git add .
git commit -m "first commit"

设置远程仓库地址，并更新

git remote rm origin  #删除旧的remote#
git remote add origin git@github.com:cherryzzangg/blog.git
git push origin master #上传到github#
git pull origin master #同步到本地#

安装shelljs模块

1	npm install --save shelljs

待到模块安装完成，在blog根目录的scripts文件夹（如果没有就新建一个）下新建一个js文件，文件名随意取。

然后在脚本中，写入以下内容：

require('shelljs/global');
try {
hexo.on('deployAfter', function() {//当deploy完成后执行备份
	run();
});
} catch (e) {
console.log("产生了一个错误<(￣3￣)> !，错误详情为：" + e.toString());
}
function run() {
if (!which('git')) {
	echo('Sorry, this script requires git');
	exit(1);
} else {
	echo("======================Auto Backup Begin===========================");
	cd('D:/blog');    //此处修改为Hexo根目录路径
	if (exec('git add --all').code !== 0) {
		echo('Error: Git add failed');
		exit(1);
	}
	if (exec('git commit -am "Form auto backup script\'s commit"').code !== 0) {
		echo('Error: Git commit failed');
		exit(1);
	}
	if (exec('git push origin master').code !== 0) {
		echo('Error: Git push failed');
		exit(1);
	}
	echo("==================Auto Backup Complete============================")
}
}

在17行修改为自己的博客路径，如果你的Git远程仓库名称不为origin的话，还需要修改第28行执行的push命令，修改成自己的远程仓库名和相应的分支名。

修改.gitignore文件，删除node_modules/（可以不删除，则不同步该文件夹）,添加忽略项.deploy_git。

保存脚本并退出，然后执行hexo clean hexo g hexo d

将会得到类似以下结果：

hexo同步

每次更新博文并deploy到服务器上之后，备份就自动启动并完成备份啦~是不是很方便呢？

7. 个性化定制

参考文章：hexo的next主题个性化教程:打造炫酷网站^[1]

7.1 修改配置文件

更新

2019.01：新版本Next version6中，站点配置文件中简体中文的名称变为 zh-CN ，因此在博客配置文件_config.yml里需要将原有的：language: zh-Hans改为language: zh-CN。
busuanzi域名已经迁移，version6的Next已经更新
2019.01：由于新版本修复了计数安全问题，更新后会出现页面阅读次数显示错误，懒一点的解决办法，关闭leancloud安全选项。

file:/themes/next/_config.yml

1
2
3

leancloud_visitors:
  enable: true
  security: false

7.1.1 取消目录自动编号功能

修改主题配置文件：

file:/themes/next/_config.yml

1 2	# Automatically add list number to toc. number: false

7.1.2 在Hexo中渲染MathJax数学公式

参考文章：在Hexo中渲染MathJax数学公式^[2]

更新：由于Hexo版本更新，直接在Next主题中Mathjax设置即可

file:/themes/next/_config.yml

# Math Equations Render Support
math:
  enable: true
  per_page: true
  engine: mathjax
  # hexo-rendering-pandoc (or hexo-renderer-kramed) needed to full MathJax support.
  mathjax:
    # Use 2.7.1 as default, jsdelivr as default CDN, works everywhere even in China
    cdn: //cdn.jsdelivr.net/npm/mathjax@2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML

7.1.3 添加fancybox功能

fancybox能够实现图片点击放大，首先修改主题配置文件

# Fancybox. There is support for old version 2 and new version 3.
# Please, choose only any one variant, do not need to install both.
# For install 2.x: https://github.com/theme-next/theme-next-fancybox
# For install 3.x: https://github.com/theme-next/theme-next-fancybox3
fancybox: true

安装，参考官网教程（以version3为例）

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox
$ cd themes/next/source/lib/fancybox
$ git pull #更新

7.2 busuanzi统计——修改页脚来访人数样式

修改配置文件themes\next\layout\_third-party\analytics\busuanzi-counter.swig

修改部分如下：

{% if theme.busuanzi_count.total_visitors %}
  <span class="site-uv" title="{{ __('footer.total_visitors') }}">
    <i class="fa fa-{{ theme.busuanzi_count.total_visitors_icon }}"></i>
    你是来访的第<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>位小可爱
  </span>
{% endif %}

7.3 更改博客背景图、添加阴影效果等CSS样式

参考的文章：

2017年最新基于hexo搭建个人免费博客——自定义页面样式一^[3]
打造个性超赞博客Hexo+NexT+GithubPages的超深度优化（墙裂推荐阅读）^[4]

主要修改文件 ~/themes/next/source/css/_custom/custom.styl

7.4 添加阅读人数

参考文章：为NexT主题添加文章阅读量统计功能^[5]

7.5 设置favicon网站缩略图

将favicon.ico图标（32*32）放到路径（~/themes/next/source）里面

7.6 将某一分类添加为新的菜单页面

首先创建对应的页面
1
hexo new page "essays"

修改主题的_config.yml,在目录下修改

menu:
 home: /
 categories: /categories
 about: /about
 archives: /archives
 tags: /tags
 essays: /categories/随笔 #添加的页面

修改菜单页的图标，图标命名格式为key-value，key是上面对应的菜单项，value值是FontAwesome icon网站的图标名字。我的图标设置如下：

menu_icons:
  nable: true
  home: home
  about: user
  categories: th
  schedule: calendar
  tags: tags
  archives: archive
  sitemap: sitemap
  commonweal: heartbeat
  essays: book
  project: star
  photos: camera

修改语言设置文件zh-Hans.yml

file:~/theme/next/languages/zh-Hans.yml

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  essays: 随笔 #添加自定义的名称

7.7 文章简单加密访问

在所有的标签之后添加如下代码段：

file:~/themes/next/layout/_partials/head.swig

<script>
  (function(){
      if('{{ page.password }}'){
          if (prompt('请输入文章密码') !== '{{ page.password }}'){
              alert('密码错误！');
              history.back();
          }
      }
  })();
</script>

在需要加密的文章开头中加入密码段：

---
title: 
date: 
tags: 
categories: 
description: 文章访问需要密码
password: password
---

7.8 文章置顶

删除旧插件并安装新的插件

1 2	npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save

**在需要置顶的文章的Front-matter中加上top: true即可。**比如:
1
2
3
4
5
6
---
title: hexo个人博客搭建教程
date:
categories:
top: true
---
如果想要设定文章顺序就编辑top的值，数字越大越靠前。

7.9 PDF文件内嵌展示

安装pdf插件
1
npm install --save hexo-pdf

在博客根目录source下添加文件夹documents，插入pdf

1	{% pdf /documents/项目申请书.pdf %}

以链接形式嵌入：

1	项目的文件下载链接： [项目申请书](/documents/项目申请书.pdf)

7.10 自定义关于页面

见CSS样式自定义中修改代码链接，我们事先已经将about页面的样式设置好了。接下来，如何引用CSS样式呢？引用位置在font设置下面。如果其他页面也想采用同样的样式，同样使用如下引用方式即可。

file:~/source/about/index.md

1
2
3

<div class="about-page">
编辑的内容
</div>

注意：我们在编辑内容时候，所有原来的markdown的语法都失效了，所以这里要学习一些html的语法啦！

分隔线和空行

/* 分隔线 */
<hr />
/* 空行 */
<br />

引用

1
2
3

<blockquote>引用内容</blockquote>
/* 如果前后间隙很小，可以像下面这样写 */
<p><blockquote>引用内容</blockquote></p>

居中和右对齐

/* 居中 */
<center>内容</center>
/* 右对齐 */
<div style="text-align:right">内容</div>

字体大小和颜色

1 2	<font color="#xxxxxx" size="number">内容</font> /* 详细请查看 http://www.w3school.com.cn/tags/tag_font.asp */

Todo list

<ul>
<li><i class="fa fa-check-square"></i>已完成</li>
<li><i class="fa fa-square"></i> 未完成</li>
</ul>

文本居中引用
1
2
3
{% cq %}
内容
{% endcq %}
显示效果如下:

内容

7.11 Markdown设置参考链接脚注

卸载Hexo默认自带的Markdown渲染器

1	npm un hexo-renderer-marked --save

安装插件hexo-renderer-markdown-it

1	npm i hexo-renderer-markdown-it --save

高级配置
修改Hexo配置文件_config.yml，添加如下代码

# Markdown-it config
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ¶

脚注引用语法

1 2	这是一个链接到百度 [^脚注1] [^脚注1]:https://www.baidu.com/

参考文章：

hexo-renderer-markdown-it 插件详解^[6]
官方Github网址^[7]

7.12 自定义标签云颜色

默认的标签云页面可能看起来很丑，怎么更改？

修改文件中对应的颜色：

file：~/blog/themes/next/layout/page.swig

1	{{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#607d8b', end_color: '#a166ab'}) }}

7.13 自定义域名解析

注册域名

在github账号里面添加一个edu教育邮箱（edu注册的可省略）。打开github education网站，点击申请账号，填写个人信息，使用教育邮箱地址。注册成功后，邮箱会收到邮件。返回github education首页，点击get the pack，进入可查看优惠包。在namecheap一栏中，点击链接用github账号登陆，进入namecheap注册一个.me域名，加入购买，学生一年是免费的，购买时我使用的是github的注册163邮箱，填写国内edu邮箱可能不通过。然后提示注册namecheap账号，注册后即可使用并管理该域名。
添加CNAME文件

在博客/source/里面新建文件CNAME，内容就是域名：cherryzzangg.me，再部署到服务器上。
域名解析

注册dnspod账号。我们在要把域名解析服务,设置到dnspod。

登录namecheap的域名管理后台，domain list设置nameservers，选择custom dns，填写如下：
1
2
f1g1ns1.dnspod.net
f1g1ns2.dnspod.net
登陆dnspod进入域名解析，添加域名，进入管理，添加记录如下：
1
2
@ CNAME 默认 cherryzzangg.github.io.
www CNAME 默认 cherryzzangg.github.io.