在之前的教程中,我已经给大家讲解了域名和空间的选择,今天就以制作一个hexo博客为例来讲解主题的制作和部署。

教程之前,还是那句话,不管用什么,看官方文档始终是王道:hexo docs

安装hexo

hexo是用node.js开发的,所以我们先要安装node.js环境,去node.js官网,点击INSTALL就可以根据你的系统版本下载相应的安装包。

安装完成后,在命令行运行:

1
npm install hexo-cli -g

以全局方式安装hexo。

因为我是用的gitcafe作为托管空间,所以还会用到git命令,我们需要安装git环境:http://git-scm.com/downloads,然后在git bash命令下配置你的账户信息:你的名字和Email地址

1
2
git config --global user.name "Your Name"
git config --global user.email "email@example.com"

接着运行命令生成ssh key:

1
ssh-keygen

一路enter下去会在你的用户主目录里找到.ssh目录,里面有id_rsa和id_rsa.pub两个文件,这两个就是SSH Key的秘钥对,id_rsa是私钥,不能泄露出去,id_rsa.pub是公钥,可以放心地告诉任何人。

登录gitcafe,在账户设置——>SSH公钥管理的公钥框里粘贴id_rsa.pub文件的内容,名称自己随便定义一个。

创建博客项目

在你想放你博客文件的文件夹下打开命令行窗口,然后运行命令:

1
2
hexo init
npm install

这样便成功创建了一个hexo项目,或者你也可以直接:

1
2
3
hexo init path/folder
cd path/folder
npm install

这样来创建项目。

创建完成后你会在你的文件夹里面看到它已经为你生成了一些东西。

这里我们主要关注这几个:

_config.yml:站点的配置文件

source: 网站文章的源文件目录

themes: 主题目录

站点配置

站点配置项在_config.yml文件,在布局里面的获取方式是通过config前缀来获取,如我们想获取里面的配置项title,则:

1
2
3
4
// 这里是用ejs作为模板的示例
<%= config.title %>
// <%- config.title %>表示原格式输出
// <%= config.title %>表示转义后输出,这也是ejs的语法

下面里我讲几个关键的配置项。

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
## url格式 详细:http://hexo.io/docs/permalinks.html
permalink: post/:year/:month/:title/

## 配置文件目录名称
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code

// 是否在新标签栏打开文章链接
external_link: true

## 栏目 标签 归档 分页相关配置
## 2: 开启分页
## 1: 禁止分页
## 0: 完全禁止
archive: 1
category: 2
tag: 2

## 每页多少条和分页目录名称
per_page: 11
pagination_dir: page

## 配置主题的名字
theme: w3cboy

## 代码部署配置 详细:http://hexo.io/docs/deployment.html
deploy:
type: github
repo: <repository url>
branch: [branch]

关于repo是git项目的url,

在github项目里面我们在项目页面右下方Clone in Desktop上方点一下SSH切换到SSH clone URL,里面的链接即repository url,如下图:

在gitcafe项目中,如下图:

下面是一个github的代码部署配置示例:

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

下面是同时部署到github和gitcafe的配置示例(注意下面行前面是空两格,不是tab):

1
2
3
4
5
deploy:
type: git
repo:
gitcafe: git@gitcafe.com:huanz/huanz.git,gitcafe-pages
github: git@github.com:huanz/huanz.github.com.git,master

主题制作

下面是一个标准的主题文件夹目录结构

--languages/

--layout/

--source/

-- _config.yml

languages:语言配置信息

layout:布局文件目录

source:css、images、js等静态文件目录

主题配置

主题配置项是主题文件夹下面的_config.yml文件,如我有这样的配置:

1
2
3
4
site:
author: w3cboy
title: w3cboy
...

则我在布局中通过theme前缀来引用,如:

1
<%= theme.site.author %>

主题插件,官方文档在这里:Plugins

我的博客里面用到了两个插件,配置如下:

1
2
3
4
5
6
7
8
9
plugins:
- hexo-generator-feed
- hexo-generator-sitemap

## 配置rss,type可以是atom/rss2
feed:
type: rss2
path: w3cboy.xml
limit: 20

在主题配置文件里面你可以把一些比较固定的东西配置在里面,如我配置了一些东西:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
## Links
links:
cnode: http://cnodejs.org/
前端乱炖: http://www.html-js.com/
v2ex: http://www.v2ex.com/
红豆园: http://yuan.rednode.cn/
Express中文社区: http://expressjs.jser.us/
w3cfuns: http://www.w3cfuns.com/
w3cplus: http://www.w3cplus.com/

## Comment
duoshuo:
enable: true
short_name: xxx

## Share button
jiathis:
enable: false
id: xxx
sina: xxx
## Analytics
google_analytics:
id: xxx
site: w3cboy.com

可以根据自己的需要自己配置。

主题布局

hexo支持多种模板,这里我选择ejs作为页面模板。主题的标准页面模板如下:

归档页模板:archive.ejs

栏目页模板:categoty.ejs

首页模板:index.ejs

布局页模板:layout.ejs(默认每个页面都继承,在模板前显示申明layout: false)

分页页模板:page.ejs

标签页模板:tag.ejs

主题的布局建议先写好html模板,然后套标签,这里我只给出一些关键的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 包含文件并传参,这里包含了_partial/article.ejs文件,然后把item作为item传过去 -->
<%- partial('_partial/article', {item: item}) %>


if(is_home()){
//如果是首页
}
if (is_archive()){
//如果是归档页
}

<%- paginator({
prev_text: '&lt;',
next_text: '&gt;',
end_size: 10
}) %>

// 更多请看:http://hexo.io/docs/helpers.html

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
// 站点的所有分类
site.categories

// 站点的所有标签
site.tags

// 当前页的所有文章
page.posts.each(function(post){
...
});

// 当前文章的所有分类
page.categories.each(function(category){
...
});

// 当前文章的所有标签
page.tags

// 当前页面的时间格式化,运用的Moment.js
page.date.format('YY-MM-DD')

// 上一篇/下一篇文章(在文章内容页面调用)
page.prev.path
page.prev.title

// 更多请看:http://hexo.io/docs/variables.html

下面是官方整理的一些主题列表,有什么不懂的地方可以多参看以下别人的代码:https://github.com/tommy351/hexo/wiki/Themes

主题制作好了之后便是生成和部署了,直接在博客文件夹打开命令行,运行如下命令:

1
2
3
4
// 生成静态页面
hexo g
// 部署
hexo d

如果改动了主题文件,需要先运行一下:

1
hexo clean

清理缓存后再进行生成和部署。

完成之后就可以在你的gitcafe/github的项目里面看到整个博客静态页面了。

文章写作

文章写作默认是用的markdown,不懂其语法的可以看看这里:Markdown语法说明,这篇后面还推荐了一些Markdown 免费编辑器。

所有的文章markdown源文件都默认放在博客项目根目录的source/_posts目录下面,下面是示例:

1
2
3
4
5
6
7
8
9
10
11
12
title: 一起来做博客——主题和部署
tags: [博客,hexo]
categories: technology

---

// 摘要部分

<!-- more -->

// 正文部分
...

有关文章写作的更多信息请看:http://hexo.io/docs/writing.html

自定义404

在根目录的source文件夹下新建404.html,下面是我用的公益的简单404页面代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
layout: false
---

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>HTTP 404</title>
<style type="text/css">
#content{
width:640px;
margin:0 auto;
}
</style>
</head>
<body>

<div id="content">
<iframe scrolling='no' frameborder='0' src='http://yibo.iyiyun.com/js/yibo404/key/0' width='640' height='464' style='display:block;'></iframe>
</div>
</body>
</html>