Z.S.K.'s Records

Hexo+Github pages快速搭建轻博客系统

发表于 | 分类于

准备:

Node.js环境
Git
Git-2.6.3-64-bit.exe

安装:

Windows配置Node.js环境下载Node.js安装文件：
根据自己的Windows版本选择相应的安装文件，要是不知道，就安装32-bit的吧：

保持默认设置即可，一路Next，安装很快就结束了。 然后我们检查一下是不是要求的组件都安装好了，同时按下Win和R，打开运行窗口：

在新打开的窗口中输入cmd，敲击回车，打开命令行界面。在打开的命令行界面中，输入:

node -v
npm -v

如果结果如下图所示，则说明安装正确，可以进行下一步了，如果不正确，则需要回头检查自己的安装过程。
配置Git环境下载Git安装文件：

然后就进入了Git的安装界面
和Node.js一样，大部分设置都只需要保持默认，但是出于我们操作方便考虑，建议PATH选项按照下图选择：
一样的，我们来检查一下Git是不是安装正确了，打开命令行，输入：

git --version

如果结果如下图所示，则说明安装正确，可以进行下一步了，如果不正确，则需要回头检查自己的安装过程。

配置Github:

注册账号如果已经拥有账号，请跳过此步~
打开https://github.com/，在下图的框中，分别输入自己的用户名，邮箱，密码。
然后前往自己刚才填写的邮箱，点开Github发送给你的注册确认信，确认注册，结束注册流程。
一定要确认注册，否则无法使用gh-pages！
创建代码库登陆之后点击页面右上角的加号选择New repository：

进入代码库创建页面：
在Repository name下填写yourname.github.io，Description (optional)下填写一些简单的描述（不写也没有关系），如图所示：
正确创建之后，你将会看到如下界面：
开启gh-pages功能点击界面右侧的Settings，你将会打开这个库的setting页面，向下拖动，直到看见GitHub Pages，如图：
最开始的时候必须提交东西到这个仓库才能在source中选择master branch 然后save，yourname.github.io这个网址就可以正常访问了~ 如果yourname.github.io已经可以正常访问了，那么Github一侧的配置已经全部结束了。

安装Hexo:

在自己认为合适的地方创建一个文件夹，然后在文件夹空白处按住Shift+鼠标右键，然后点击在此处打开命令行窗口。
在命令行中输入：

npm install hexo-cli -g

然后你将会看到:
可能你会看到WARN，但是不用担心，这不会影响你的正常使用。 然后输入:

npm install hexo --save

然后你会看到命令行窗口刷了一大堆白字，下面我们来看一看Hexo是不是已经安装好了。 在命令行中输入：

hexo -v

如果你看到了如图文字，则说明已经安装成功了。
初始化Hexo接着上面的操作，输入：

hexo init

然后输入：

npm install

之后npm将会自动安装你需要的组件，只需要等待npm操作即可。

继续操作，同样是在命令行中，输入：

hexo g

然后输入：

hexo s

然后会提示：

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

在浏览器中打开http://localhost:4000，你将会看到：
到目前为止，Hexo在本地的配置已经全都结束了。
使用Hexo在配置过程中请使用yamllint来保证自己的yaml语法正确

配置Hexo:

修改全局配置文件此段落引用自Hexo官方文档

您可以在 _config.yml 中修改大部份的配置。

配置项详解请稳步Hexo官方文档

配置Deployment:

假设你已经知道了这个配置文件的内容，你需要为自己配置身份信息，打开命令行，然后输入：

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

同样在_config.yml文件中，找到Deployment，然后按照如下修改：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io.git
  branch: master

如果使用git方式进行部署，执行
npm install hexo-deployer-git --save
来安装所需的插件
然后在当前目录打开命令行，输入：

hexo d

随后按照提示，分别输入自己的Github账号用户名和密码，开始上传。 然后通过http: //yourname.github.io/来访问自己刚刚上传的网站。
添加新文章打开Hexo目录下的source文件夹，所有的文章都会以md形式保存在_post文件夹中，只要在_post文件夹中新建md类型的文档，就能在执行hexo g的时候被渲染。

更换主题:

可以在这里下载自己喜欢的主题文件，保存到Hexo目录下的themes文件夹下。然后在_config.yml文件中修改：

theme: landscape //themes文件夹中对应文件夹的名称

然后先执行hexo clean，然后重新hexo g，并且hexo d，很快就能看到新主题的效果了~

绑定域名:

由于本人没有使用域名,如有此方面需求的人,可以移步该博客:更换域名

Hexo常见命令:

hexo g // 增量生成新的静态博客html文件
hexo d // 部署静态html文件到public文件
hexo s // 预览博客
hexo clean // 清除db.json,再次执行hexo g全量编译
hexo n “文章名” // 新生成文章
hexo n page “文章名” // 新生成网页
hexo g –debug // 编译调试在 根目录下会生成debug.log

为博客添加转载许可:

转载自该博客

具体实现步骤如下：

  1. 在博客根目录下（和 source 同级），新建一个名为 scripts 的文件夹。
  2. 在 scripts 文件夹内, 新建一个 AddTail.js 脚本文件，脚本具体内容详见下文。
  3. 在博客根目录下，新建一个 tail.md 文件，里面写想要展示的版本说明内容。示例如下文所示。

AddTail.js 脚本文件：

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
31
32
33
34
35
// Filename: AddTail.js
// Author: Colin
// Date: 2016/06/02
// Based on the script by KUANG Qi: http://kuangqi.me/tricks/append-a-copyright-info-after-every-post/

// Add a tail to every post from tail.md
// Great for adding copyright info

var fs = require('fs');

hexo.extend.filter.register('before_post_render', function(data){
	if(data.copyright == false) return data;
	
	// Add seperate line
	data.content += '\n___\n';
	
	// Try to read tail.md
	try {
		var file_content = fs.readFileSync('tail.md');
		if(file_content && data.content.length > 50) 
		{
			data.content += file_content;
		}
	} catch (err) {
		if (err.code !== 'ENOENT') throw err;
		
		// No process for ENOENT error
	}

  	// 添加具体文章链接, 不需要去掉即可
	var permalink = '\n本文链接：' + data.permalink;
	data.content += permalink;
  
	return data;
});

tail.md内容如下:

  • 本作品采用知识共享署名 2.5 中国大陆许可协议进行许可，欢迎转载，但转载请注明来自xxx，并保持转载后文章内容的完整。本人保留所有版权相关权利。

如此，hero clean 后重新 hexo generate 即可

遇到的问题:

1.配置文件_config.yml中url及root的设置如下:

hexo-github6.JPG

URL不能是https://github.com/zhoushuke/zhoushuke.github.io 这能导致文章中引用图片时提示找不到本地资源

2.配置文件_config.yml中Deployment设置如下:

hexo-github8.png
hexo3的配置如上 而不是hexo2的配置:

hexo-github7.png

3.hexo3 文章中引用图片的两种方式:
a.在source中新建image文件夹 在文章中使用相对路径
b._config.yml 中有 post_asset_folder:true
每次使用hexo n “test”新建文章时都会在_post中生成与文章名一致的文件夹 可将静态次放入该文件夹中 然后使用如下方式引用图片:

![png](six-pages/1.png)

更推荐的方法是使用这种方式: 

1
{% asset_img 图片 "图片描述" %}

而外链的使用方法如下：

![图片](图片地址)

4.hexo g出现如下错误:

hexo-github8.png

这是由于md文件中出现了{ {(这里是为了显示方便中间隔了一个空格,以下同),这两个一起出现需要转义,github 上给出的方法是在需要显示{ {符号的地方加上特定标签来标记这部分不需要解析。例如文章中可能会出现{ {的片段，以如下的形式写就可以: 

1
{% raw %}{{ something }}{% endraw %}

5.md文章标签不是以,或空格分隔的，有如下两方式:
a. tags:
- a
- b
b.tags: [a,b]

参考文章:

转载请注明原作者: 周淑科(https://izsk.me)

wechat
Scan Me To Read on Phone
I know you won't do this,but what if you did?