lanbos'blog

hexo搭建

既然是第一篇就说说hexo在搭建的时候的一些问题吧:
(感谢hexo很完善的官方文档

环境

node和git是最基本的了,mac上通过brew安装也毫无难度,这里注意一下的就是node的版本,我用
了nvm做版本管理,刚开始用node的v6.2安装了hexo,会报错一大篇,网上查了一下,说是无关紧要
的错误但是比较烦心的是每次执行命令的时候这些错误都会报出来,错误类似于:

1
{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }

网上找到用

1
$ npm install hexo --no-optional

安装可以解决,但是我最终还是选择降级回了node的 v0.12版本

hexo安装

1
2
3
4
5
npm install hexo-cli -g --save
cd blog
hexo init
//在目录结构下会自动再安装一次hexo
npm install hexo-deployer-git --save

这些都没有什么问题。
hexo-deployer-git 这个包是一会儿用来自动部署到github pages用的

1
2
3
4
hexo g
//静态化网页
hexo s -p 5000
//在5000接口监听网页

这时就可以在localhost:5000上看到hellow world 的欢迎页了

配置文件

在根目录下的_config.yml中可以配置绝大多数工能
官方文档中已经非常详细的讲解了文档中的功能含义(国人开发的就是好。。。)这里摘录一下:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
网站
参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC 。
网址
参数 描述 默认值
url 网址
root 网站根目录
permalink 文章的 永久链接 格式 :year/:month/:day/:title/
permalink_default 永久链接中各部分的默认值
如果您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
目录
参数 描述 默认值
source_dir 资源文件夹,这个文件夹用来存放内容。 source
public_dir 公共文件夹,这个文件夹用于存放生成的站点文件。 public
tag_dir 标签文件夹 tags
archive_dir 归档文件夹 archives
category_dir 分类文件夹 categories
code_dir Include code 文件夹 `downloads/code
i18n_dir 国际化(i18n)文件夹 :lang
skip_render 跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。
文章
参数 描述 默认值
new_post_name 新文章的文件名称 :title.md
default_layout 预设布局 post
auto_spacing 在中文和英文之间加入空格 false
titlecase 把标题转换为 title case false
external_link 在新标签中打开链接 true
filename_case 把文件名称转换为 (1) 小写或 (2) 大写 0
render_drafts 显示草稿 false
post_asset_folder 启动 Asset 文件夹 false
relative_link 把链接改为与根目录的相对位址 false
future 显示未来的文章 true
highlight 代码块的设置
分类 & 标签
参数 描述 默认值
default_category 默认分类 uncategorized
category_map 分类别名
tag_map 标签别名
日期 / 时间格式
Hexo 使用 Moment.js 来解析和显示时间。

参数 描述 默认值
date_format 日期格式 MMM D YYYY
time_format 时间格式 H:mm:ss
分页
参数 描述 默认值
per_page 每页显示的文章量 (0 = 关闭分页功能) 10
pagination_dir 分页目录 page
扩展
参数 描述
theme 当前主题名称。值为false时禁用主题
deploy 部署部分的设置

吐槽yaml

之前就知道yaml是个神奇的东西,好多情况下用来写配置文件,但是这个格式的语法要求很严格,
特别注意在:后需要一个空格不能是tab,最好借助编辑器的语法检测来进行编辑否则会报各种奇
葩错误类似:

1
2
3
4
TypeError: Cannot read property 'replace' of null
at /Applications/XAMPP/xamppfiles/htdocs/lanbos.github.io/node_modules/hexo/lib/hexo/load_config.js:34:30
at tryCatcher (/Applications/XAMPP/xamppfiles/htdocs/lanbos.github.io/node_modules/hexo/node_modules/bluebird/js/release/util.js:16:23)
at Promise._settlePromiseFromHandler (/Applications/XAMPP/xamppfiles/htdocs/lanbos.github.io/node_modules/hexo/node_modules/bluebird/js/release/promise.js:509:31)

Deployment配置

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

在_config.yml中配置最后的Deployment选项并下载之前说过的hexo-deployer-git插件就可以直接通过
命令hexo d -g生成静态文件并提交到github上

写新文章

官方文档中推荐使用new命令来新建新文章,我的做法是直接在source/_postts文件夹下新建markdown
文件来增加新文章,文章的开头需要添加一些yaml命令

1
2
3
4
5
6
7
8
title: ##文章标题
date: ##时间,格式为 YYYY-MM-DD HH:mm:ss
categories: ##分类
tags: ##标签,多标签格式为 [tag1,tag2,...]
keywords: ##文章关键词,多关键词格式为 keyword1,keywords2,...
description: ##文章描述
toc: true ##在此处设定是否开启目录,需要主题支持。
---

图片插入

可以采用官方提供的两种方法:
1.最简单的方法就是将图片放在 source/images 文件夹中,然后通过markdown的语法:

1
![](/images/image.jpg)

来访问图片。
2.通过资源引用方式,先在_config.yml中将post_asset_folder 设置为true,之后引用官方文档原话:
当资源文件管理功能打开后,Hexo将会在你每一次通过 hexo new [layout] 命令创建新文章时自<br>动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。将所有与你的文章有<br>关的资源放在这个关联文件夹中之后,你可以通过相对路径来引用它们,这样你就得到了一个更简单<br>而且方便得多的工作流。<br>另外可以用最传统的图床方法,也比较好,网上有很多用七牛云做图床的教程,我是在google上搜到<br>的一个免费图床<a href="http://tuchuang.org/" target="_blank" rel="noopener">http://tuchuang.org/</a>。chrome插件商店中的微博图床也是个很<br>好的选择。网络上提供的图床可能不稳定,所以最好把关键的图片使用官方的方法引入,不重要的图<br>片采用图床的方式。

更改域名

在source文件夹下新建一个名为CNAME的文件(注意:不添加任何后缀),文件中写入你的域名

1
lanbos.win

域名购买及DNS解析

在阿里云购买的域名。。。会有备案等一系列流程,就不在这里赘述了,跟着阿里云的提示步骤走
不会出太大的问题,一些小众的后缀域名会很便宜,如.win,.xyz,.top等。通过:

1
ping yourname.github.io

来获得你github pages的IP地址
在阿里云找到域名相关选项:

点击后把之前获得的ip填进去,大约一分钟后就可以把你购买的域名关联到你的github pages上,在
浏览器输入你的域名尝试访问一下,就完成了域名绑定。

后续

hexo基础搭建博客的方式就写到这里,随后会尝试在主题方便做一些更改和增加

参考文章

史上最详细的Hexo博客搭建图文教程
Hexo常见问题解决方案
MAC 上 github + hexo 搭建博客教程