Alliot's blog

hexo的搭建、设置与部分优化

发表于 | 更新于 |

　　hexo是一个“快速、简洁且高效的博客框架”。其最大的特点是在本地直接生成静态文件，将静态文件上传到服务器端，这样服务器端只有静态的文件，给网站的SEO优化带来了极大的便利，同时，网站的安全性也有了很大的提高，由于静态的网页对环境要求非常小，在流量较小的情况下，甚至可以不需要独立的服务器而直接丢于GitHub或虚拟主机上，对个人博主来说，能够有效的节省服务器开支；markdown的支持让写作更加方便快捷；同时，hexo拥有强大的插件系统与优质的主题（Alliot就是因为NexT这个主题才知道的hexo），高度可定制。官网：hexo.io
　　文章面向的是不熟悉的新手朋友，所以篇幅较长，不免有些啰嗦，还望各位大佬朋友绕道勿喷。
　　hexo从搭建到优化详解内容图
注意：
在hexo的配置文件中注释符号为’#’，本文为了方便查看(其实是我自己的习惯)，在下文中将使用’//‘做注释，实际中，为避免发生报错，请使用’#’注释，望悉知。

安装(以windows中为例)

　　hexo可以安装在PC上，也可以直接安装在网站服务器上，区别在于：安装在PC上，等于在PC上生成静态文件后，再将其静态文件上传至服务器的网站根目录，用户只能在该PC上写作；而安装在服务器上则等于在服务器上生成静态文件(也可以直接监听4000端口实现)，用户可以通过shell或者FTP来实现在不同的PC上写作并发布。大家可以自行选择，Alliot推荐前者，原因有三：一是由于文章使用的是markdown语法，在PC上写作，有更多的优秀的编辑器可以选择，如markdownPad、notepad++(可参考notepad++中实现markdown语法高亮与实时预览)； 二是hexo提供了快速方便的一键部署功能，只需一条命令就能将网站部署到服务器上；最好的做法是，在PC上生成静态文件，通过git直接将网页部署在免费的GitHub或CodingPages上，省去购买服务器的费用。

安装git

　　众所周知的原因，某天朝下载需要代理，所以这里以及下文用到的工具，Alliot将其上传到度盘，这里只提供了Windows x64下的安装包，其他环境下的朋友可自行搜索。
(Git-2.11.0.3-64-bit)链接：http://pan.baidu.com/s/1cfa5VC 密码：rng9
安装是一路下一步，不做过多说明。

安装node.js

　　(node-v6.9.4-x64)链接：http://pan.baidu.com/s/1jIdytQQ 密码：4gsc 同上。

安装hexo

　　安装完node.js后，会在开始菜单-所有程序中生成一个”nodejs”文件夹，展开将“Node.js command prompt”发送到桌面快捷方式(稍后有用)nodejs_command 双击打开进入命令提示符窗口。
如图，hexo安装_1 输入

1
npm install -g hexo-cli

（这里天朝由于众所周知的原因，下载可能较(非常)为缓慢，建议挂上代理操作。）
出现下图所示，hexo安装_2 然后执行

1
hexo init <folder>		//初始化hexo,<folder>为需要安装到的路径

出现下图所示，hexo安装_3 则右键桌面的“Node.js command prompt”快捷方式，属性，将”起始位置”中的路径改为刚才初始化hexo的路径。
双击打开“Node.js command prompt”，执行

1
npm install

安装完成后的目录结构是这样的：

1
2
3
4
5
6
7
8
.
├── _config.yml			//配置文件，包括博客信息、主题设置等。配置文件中默认有注释。
├── package.json		//应用程序(插件等)信息。
├── scaffolds			//模板文件夹，新建文章或页面后，会自动生成一个非空文件，该文件的内容就是这个文件夹下的文件内容。
├── source				//用户资源文件夹，如文章的markdown就应该在_post中修改。
|   ├── _drafts
|   └── _posts
└── themes				//主题资源文件夹，下载安装后的主题文件在这个文件夹中。

部分引用于官方文档：hexo.io/docs/setup.html

使用命令

　　命令可以通过node.js的命令提示符窗口输入：

新建文章

1
hexo new "title"

新建会在source/_posts/ 中生成对应的.md文件，编辑该文件即可。默认支持markdown与HTML语言
删除文章，则只需要删除对应的.md文档即可。

启动服务器

要能够在本地预览自己的博客，需要本地启动服务器。这里应先安装hexo server模块（hexo 3.0后版本，server变成了独立的模块) 在命令提示符窗口执行:

1
npm install hexo-server --save

安装完毕后执行:

1
hexo s

浏览器输入: http://localhost:4000 (IE浏览器必须需要http前缀才可打开) 即可实时预览（注意是实时，修改文章与修改配置，保存后刷新网页都能看到效果）。Ctrl+C关闭服务器。

生成静态文件

1
hexo g

这里生成静态文件在根目录的public下，将此目录内的文件上传到服务器网站根目录即可。

清理

1
hexo clean

清理缓存与public目录，推荐每次执行hexo s之前都执行一次hexo clean，避免出现一些奇怪的问题(主页未同步等)。

部署发布

hexo提供了一键部署功能，通过简单的配置能够一键部署到网站服务器上。
开始之前需要修改根目录下的_config.xml配置文件，这里只举例git:
使用git部署需要先安装hexo-deployer-git插件，执行:

1
npm install hexo-deployer-git --save

然后修改配置文件_config.xml中的

1
2
3
4
5
deploy:
  type: git				//部署类型  
  repo: (Repository地址)
  branch: (分支名称)
  message: (自定义提交信息,默认为Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})

这里以Coding中操作为例：

Coding Pages 是一个免费的静态网页托管和演示服务，您可以使用 Coding Pages 托管博客、项目官网等静态网页


(正准备写然后没想到好友 Lu尼玛 同学已经写出来了：点这里，大家可以参考他的做法)

配置基本信息

在根目录下的_config.xml中修改。(注意区别于themes下主题的_config.xml文件)

网站信息

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 作者名
language 网站语言
timezone 网站使用的时区
url 网站url
root 网站根目录

前3个参数主要用于SEO优化。 这里将Alliot’s blog 的这部分配置信息列出如下，各位朋友可以参照本博客来修改：

1
2
3
4
5
6
7
8
9
10
11
#配置文件中注释符号为'#'，这里为了方便查看，使用'//'做注释，实际中，请使用'#'注释，望悉知。  
# Site   
title: Alliot's blog			//注意Alliot's blog前有一个空格，不能省略，否则在检查时会出错。之后的配置文件同此，均应该加空格。
subtitle: Maker & Developer
description: IOTS.VIP is a blog in order to record my learning and growth
author: Alliot					//作者信息在大部分主题中一般显示在网站底部与文章标题下方。
language: zh-Hans				//中文，汉字
timezone: Asia/Shanghai			//时区：亚洲，上海
# URL
url: https://www.iots.vip		//如果你的网站是放于二级目录，类似于www.iots.vip/blog则请将URL设置为https://www.iots.vip/blog 同时root设置为/blog/
root: /

主题设置

　　Alliot’s blog 博客用的是“NexT”，具体使用方法可以参照主题官网 ，(官方文档已经很清楚、详细,这里就不多说)，各位朋友可以按需求配置。
下面是我的主题配置文件(安全起见，已省略部分内容)，可以直接拿过去用。点击下载

搜索功能

　　推荐使用Local Search作为站内搜索，搜索速度快，同时比较简洁，启用方法如下：

1、安装插件

　　安装hexo-generator-searchdb插件
　　打开Node.js command prompt，在站点的根目录下执行以下命令：

1
npm install hexo-generator-searchdb --save

2、更改配置文件

更改站点配置文件，新增如下内容于任意位置：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

更改NexT主题配置文件，开启Local Search作为站内搜索：

1
2
3
# Local search
local_search:
  enable: true

社会化评论

待添加…（之前多说死了，网易云跟贴出来了，然后接着网易云跟贴也死了，国内好用一点的剩下畅言，不知道何时GG，so,暂时不更教程，大家可以使用国外的DISQUS，不过国内用户无法正常使用，有需要的朋友方法参考主题官网）

部分Markdown语法注意点

在hexo中，一些Markdown语法与我们平时所用的有些不同。
这里列举几个常见的：

1
2
3
4
5
6
7
8
9
10
11
1.插入代码语法中的第二个```后面不要加空格  
2.引用语法中使用>，结束使用2个空格加回车  
3.首行缩进可以使用 中文全角下的两个空格  
  
4.使用* 标注后 需要换行。
5.表格前需要换行  
6.{% cq %} （前有一个空格）居中标签 {% endcq %}

部分优化

Nginx开启Gzip压缩

　　Nginx的部分优化见此文:链接

取消Google字体库加载

　　主题调用了Google字体库，天朝的GFW下，会导致字体库加载极其缓慢甚至无法加载。这就导致博客在加载时会有很长的等待时间(F12选择network可以查看加载时间)
解决方法： 修改主题配置文件_config.xml中的font字段。将true改为false。(网上有朋友使用360的公共库，我试了觉得还是不够快。。这里索性改为false反而更快了)
CDN等设置能明显加速博客的打开速度，同时能够抵御一些小型攻击，由于操作简单这里就不过多赘述，需要注意的是，在同时开启了SSL(Nginx开启SSL与重定向优化)的时候，应该将回源设置为HTTPS回源方式。

SEO优化设置

　　虽说写博客不是为了搜索排名来写，但是，一定的搜索引擎流量或许能够让博客被更多的人知晓，也就有可能认识到与你志同道合的朋友~ 这里记录一些简单的SEO做法

1、添加robots.txt

　　robots.txt是搜索引擎中访问网站的时候要查看的第一个文件。robots.txt文件告诉蜘蛛程序在服务器上什么文件是可以被查看的。
这里推荐我这种写法(当然，hexo的版本不同可能文件目录有所不同)

1
2
3
4
5
6
7
8
9
10
11
# welcome to : www.iots.vip 
User-agent: *
Allow: /
Allow: /archives/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /lib/
Sitemap: https://www.iots.vip/sitemap.xml

这里会出现一些安全隐患（其实是360网站检测提示robots.txt可能泄露站点目录结构，实际上并无大碍），可以参考此文解决。

2、安装sitemap插件

　　sitemap在SEO过程中有着十分重要的地位，同时也能限制蜘蛛对某些特定目录的爬取。 具体概念不多赘述。 hexo有很方便的自动生成sitemap的插件，打开Node.js command prompt，在站点的根目录下执行以下命令：

1
2
npm install hexo-generator-sitemap --save				#sitemap.xml 提交谷歌搜素引擎
npm install hexo-generator-baidu-sitemap --save			#baidusitemap.xml 提交百度搜索引擎

然后在站点配置文件_config.xml 中添加：

1
2
3
4
5
# 自动生成sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

3、安装nofollow插件

　　减少出站链接能够有效防止权重分散，hexo有很方便的自动为出站链接添加nofollow的插件。
这里@liuzhichao 感谢其开源的hexo-autonofollow插件，打开Node.js command prompt，在站点的根目录下执行以下命令： 

1
npm install hexo-autonofollow --save

该插件会将博客中的出站链接自动加上nofollow属性，例外请在站点配置文件_config.xml中添加如下字段 

1
2
3
4
5
nofollow:
	enable: true
	exclude:
    - www.iots.vip
    - 友链地址

这样，例外的链接将不会被加上nofollow属性。
插件自动添加的属性为’external nofollow noopener noreferrer’ 一般来说标准的nofollow属性只需要external nofollow即可，noopener noreferrer估计是新闻上说的钓鱼漏洞的补救方法，不过这条属性会影响站长工具的友链检测，大家如果需要去掉这一条属性，可以在/hexo根目录/node_modules\hexo-autonofollow\lib中修改filter.js中

1
rel: 'external nofollow noopener noreferrer'

将’noopener noreferrer’去掉，重新hexo g即可。

文章密码

　　2017年11月11日更新: 原文点此 这里搬运过来做备份 (这种方式是不安全的，详情请点击hexo文章密码访问的”破解”方法)

第一步

找到themes->next->layout->_partials->head.swig文件。添加如下代码(推荐加在所有的标签之后):

1
2
3
4
5
6
7
8
9
10
<script>
	(function(){
		if('{{ page.password }}'){
			if (prompt('请输入文章密码','') !== '{{ page.password }}'){
				alert('密码错误！');
				history.back();
			}
		}
	})();
</script>

第二步

写博文的时候顶部的页面变量添加”password: 密码”即可，如:

1
2
3
4
5
6
7
---
title: '2017-01-01'
permalink: post/111111111.html
tags:
  - 心思随笔
date: 2017-01-01 00:00:00
password: 123

添加豆瓣读书、电影

使用hexo-douban插件

添加鼠标点击动画

(从TXisfine扒下来的2333)修改themes/next/layout/_layout.swig在底部添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
	/* 鼠标特效 */
	var a_idx = 0;
	jQuery(document).ready(function($) {
		$("body").click(function(e) {
			var a = new Array("Alliot", "最帅", "最帅！", "最帅！！");
			var $i = $("<span/>").text(a[a_idx]);
			a_idx = (a_idx + 1) % a.length;
			var x = e.pageX,
			y = e.pageY;
			$i.css({
				"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
				"top": y - 20,
				"left": x,
				"position": "absolute",
				"font-weight": "bold",
				"color": "#b7b7b7"
			});
			$("body").append($i);
			$i.animate({
				"top": y - 180,
				"opacity": 0
			},
			1500,
			function() {
				$i.remove();
			});
		});
	});
</script>

声明

　　最近玩游戏中毒不浅，很久没更新了，这篇博文是之前折腾博客的时候做的笔记，由于这几天我还没有进入状态，先对这些笔记进行整理并发布（本文收集并整理于网络，许多方法并非原创，文中绝大部分的转载内容会加上原作者的链接，望悉知。如有侵权，请原作者提醒，Alliot一定在第一时间内删除并致歉），各位朋友如果有什么其他好玩的或者棘手的问题，可以在本文结尾留言，我会和大家一起寻找解决方法的~

本文标题:hexo的搭建、设置与部分优化

文章作者:Alliot

发布时间:2017年07月22日 - 02:07

最后更新:2018年04月06日 - 12:04

原始链接:https://www.iots.vip/post/hexo-build-to-optimize.html

许可协议: 署名-非商业性使用-相同方式共享 4.0 国际 转载请保留原文链接及作者。

如果此文为您解决燃眉之急或是带来些许明朗，不妨打赏Alliot一杯香茗或是一杯咖啡