Hexo编写博客教程

image

摘要 :

  这是一篇有关如何使用Github Pages和Hexo搭建自己独立博客的详尽教程,里面介绍了如何使用Hexo框架和next主题进行博客编写。

基本配置

我们自己的博客出现Hello 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 这下面的几项配置都很简单,你看我的博客就知道分别是什么意思
title: blog name #博客名
subtitle: Goals determine what you are going to be #副标题
description: Goals determine what you are going to be #用于搜索,没有直观表现
author: wangdong #作者
language: zh-CN #语言
timezone: #时区,此处不填写,hexo会以你目前电脑的时区为默认值
# URL 暂不配置,使用默认值
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory 暂不配置,使用默认值
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing 文章布局等,使用默认值
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
tab_replace:
# Category & Tag 暂不配置,使用默认值
default_category: uncategorized
category_map:
tag_map:
# Date / Time format 时间格式,使用默认值
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10 #每页显示的文章数,0表示不分页
pagination_dir: page
# Extensions 插件配置,暂时不配置
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
plugins:
- hexo-generator-feed
theme: light #使用的主题
feed: #之后配置rss会用,此处先不配置这个
type: atom
path: atom.xml
limit: 20
# Deployment 用于部署到github,之前已经配置过
## Docs: https://hexo.io/docs/deployment.html
# git@github.com:wangdong-cn/wangdong-cn.github.io.git
deploy:
type: git
repo: git@github.com:wangdong-cn/wangdong-cn.github.io.git
branch: master
参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。

其中,description主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

配置完成后,重新部署,会发现一些变化。但文章内容还不是我们自己的呀,下面来写我们自己的博客。

写博客

新建文章

执行hexo new '文章名',hexo会帮我们在..\hexo\source\_posts下生成相关md文件:

image

打开这个文件就可以开始写博客了,默认生成如下内容:

image

image

当然你也可以直接自己新建md文件,用这个命令的好处是帮我们自动生成了时间。一般完整格式如下:

1
2
3
4
5
6
7
title: postName #文章页面上的显示名称,一般是中文
date: 2013-12-02 15:30:16 #文章生成时间,一般不改,当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签,可空,多标签请用格式,注意:后面有个空格
description: 附加一段文章摘要,字数最好在140字以内,会出现在meta的description里面
---
以下是正文

删除hello-world.md,同时删除public文件夹下的hello-world文件夹:

image

将编写好的文章保存,重新生成和部署就可以啦!

新建页面

假如我新建一个名字为tags的页面,在博客根目录输入

1
hexo new page tags

打开 tags/index.md ,并改成:

1
2
3
4
title: 标签
date: 日期
type: "tags"
comments: false

分类同理

1
hexo new page categories

打开category/index.md,改为:

1
2
3
4
title: 分类
date: 日期
type: "categories"
comments: false

附上文档Front-matter。这样实现了在Hexo页面的目录栏点击进去可以索引到相对应的功能,如点击categories,打开的就是分类标签的合集,不然显示的会是空白页。

假如我新建一个名字为about的页面:

image

在source文件夹下,将生成about文件夹:

image

部署后将在public文件夹生成一个新的html页面:hexo\public\about\index.html,通过访问https://用户名.github.io/about/访问这个页面:

image

你可以通过编辑index.html,添加自己的简历等其他你想加入的内容。但注意,它是新建了一个html页面,不是文章,不会出现在博文目录。

至此,博客的基本功能已经全部实现,下面的高级配置,让你更加方便快捷的写博客!

高级配置

现在,Hexo根目录结构如下图:

.
├── _config.yml
├── db.json
├── package.json
├── public
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

image

下面介绍的几个是会经常用到的:

_config.yml

网站配置信息,也就是本文所称的站点配置文件,可以在此配置大部分的参数。基本配置在前面基本已经设置过了。

scaffolds

模版文件夹。新建文章时,Hexo 会根据 scaffold 来建立文件。可以编辑标题、日期、标签和内容,但是没有分类的选项。我们可以手动加入categories:项,或者打开scaffolds/post.md文件,在tages:上面加入categories:,保存后,重新执行hexo n 'name'命令,会发现新建的页面里有categories:项了。

scaffolds目录下,是新建页面的模板,执行新建命令时,是根据这里的模板页来完成的,所以可以在这里根据你自己的需求添加一些默认值。

Hexo的模板是指新建的markdown文件中默认填充的内容。例如,在使用hexo new 文章名时,默认生成的md文件会包含如下内容:

image

默认内容是哪里来的呢?就在scaffold/post.md中保存:

image

假如对每篇博客我都需要添加分类categories,每次都手动添加太麻烦,我希望每次默认生成都有categories:,那么就可以在scaffold/post.md中添加:

image

保存后,每次新建一篇文章时都会包含post.md中的内容。

当然,你也可以在scaffolds文件夹下创建自己的博客模板,我创建一个名为blog的模板:

image

image

通过如下命令调用我创建的blog模板新建文章:

image

_posts中生成md文件:

image

image

public

该文件夹中的内容将被最终push到github仓库中。

source

资源文件夹是存放用户资源的地方。除_posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件(如刚刚生成的about文件夹)会被拷贝到 public 文件夹。

为github仓库添加readme

既然 source 文件夹中的内容将全部被推送到 public 文件夹,public 文件夹中的内容又将被最终push到github仓库中,那么如果我们想要为github仓库添加readme.md,只要在 source 文件夹中创建就好了:

image

部署到github,就有readme了,但我们发现,README.md已经被解析为README.html,显示的全是html代码,并不是我们想要的文档格式的内容:

image

为了解决这个问题,我们回到source文件夹,将README.md重命名为README.MDOWN,再部署到github:

image

image

source文件夹中,.md会被解析为html,并放到 public 文件夹被push到github,但.MDWN不会被解析。

themes

主题文件夹,下载的主题都保存在此文件夹下。Hexo 会根据主题来生成静态页面。

image

设置分类列表

在我们编辑文章的时候,直接在categories:项填写属于哪个分类,但如果分类是中文的时候,路径也会包含中文。
比如分类我们设置的是:

categories: 编程

那在生成页面后,分类列表就会出现编程这个选项,他的访问路径是:

*/categories/编程

如果我们想要把路径名和分类名分别设置,需要怎么办呢?

打开根目录下的配置文件_config.yml,找到如下位置做更改:

1
2
3
4
5
6
7
8
9
10
11
12
13
# Category & Tag
default_category: uncategorized
category_map:
编程: programming
生活: life
其他: other
tag_map:

在这里category_map:是设置分类的地方,每行一个分类,冒号前面是分类名称,后面是访问路径。

可以提前在这里设置好一些分类,当编辑的文章填写了对应的分类名时,就会自动的按照对应的路径来访问。

设置标签

在编辑文章的时候,tags:后面是设置标签的地方,如果有多个标签的话,可以用下面两种办法来设置:

1
tages: [标签1,标签2,...标签n]
1
2
3
4
5
6
7
8
9
tages:
- 标签1
- 标签2
...
- 标签n

问题

  • next是Hexo的一个博客主题,这个主题 ,首页显示的文章列表,每一遍都是全文,不方便概览。
希望达到的效果
  • 首页显示文章列表,列表里的每一篇文章只显示预览,不显示全文。
解决方法

百度了好久,折腾了半天,改了各种参数,算是撞破了头,最后试出来了。
哎,搞移动端的,不太懂网页的这些东西,不说废话了,直接上解决方法:

  • 进入hexo博客项目的themes/next目录
  • 用文本编辑器打开_config.yml文件
  • 搜索”auto_excerpt”,找到如下部分:

    1
    2
    3
    4
    5
    # Automatically Excerpt. Not recommand.
    # Please use <!-- more --> in the post to control excerpt accurately.
    auto_excerpt:
    enable: false
    length: 150
  • 把enable改为对应的false改为true,然后hexo d -g,再进主页,问题就解决了!
    到这里,我们已经了解了如何配置一个Hexo博客,并且通过

    1
    2
    3
    4
    > $ hexo n ‘name’
    > $ hexo g
    > $ hexo s
    > $ hexo d

几个常见命令来新建、更新、预览、同步你的博客。

Hexo中如何用Markdown插入本地图片

虽然在官方语法中,Markdown插入图片的格式是这样的:

1
![Alt text](/path/to/img.jpg)

然而,如果你用了Hexo框架,那你得小心了。

为什么要用Hexo,Octopress之类的框架呢?无非是为了让页面更加丰富多彩,以及让操作更加简便。这些用jeklly直接来做是十分繁琐,费时的。

好了,回归正题。首先,你不可能在网页里用绝对路径,这样怎么部署到服务器上呢?所以必定是相对路径。Markdown本来的语法中,只要img和md文件的相对路径是对的就行,然而Hexo不知道对路径做了什么处理,你需要在source文件夹中新建一个images文件夹,然后把图片放在images文件夹里。路径也必须是这样的:

1
![Alt text](../../images/img.jpg)

这样做的好处是,图片资源的管理比较有序。坏处是给初学者带来一定的疑惑,而且在markdown的编辑器里,无法实时预览。

Hexo 扩展功能

为Hexo添加百度搜索

默认的Hexo用的是Google的搜索,因为某些不可抗拒的原因,访问起来不是很流畅,所以我们设置成百度搜索。

打开themes/light/layout/_widget/search.ejs文件,里面内容替换为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="search">
<form action="//baidu.com/baidu" method="get" accept-charset="utf-8">
<input type="search" name="word" results="0" placeholder="<%= __('search') %>">
<input type="hidden" name="si" value="<%- config.url.replace(/^https?:\/\//, '') %>">
<input name=tn type=hidden value="bds">
<input name=cl type=hidden value="3">
<input name=ct type=hidden value="2097152">
<input name=s type=hidden value="on">
</form>
</div>