用Hexo写出第一篇博客

Posted on | Views:

经过一段时间的折腾终于用 Hexo + GitHub 搭建起了一个个人博客站点，第一时间边学边写，弄出了这第一篇博客，心里甚是欢喜。

Hexo 是一款“快速、简洁且高效的博客框架”，支持 Markdown 的所有功能。所以，写出一篇博客必须学习 Hexo 和 Markdown 的使用规则。

1. 配置文件命名规则和路由地址

Hexo 默认以标题作为文件名称，可以通过 Hexo 的配置文件_config.yml 中的 new_post_name 参数来改变默认的文件名称，例如：

1
new_post_name: :year-:month-:day-:title.md

当创建博客时，就会以这种格式生成Markdown文件，如这篇博客的文件名就生成 2017-01-13-hexo-blog.md 这种形式。其中相关变量说明如下表：

变量 说明
：title 标题（小写， 空格将会被替换为短杠）
:year 创建的年份，如：2017
:month 创建的月份（有前导零），如：01
:i_month 创建的月份（无前导零），如：1
:day 创建的日期（有前导零），如：09
:i_day 创建的月份（无前导零），如：9

配置浏览器地址栏中的URL。同样在 Hexo 的配置文件_config.yml 中, 配置 permalink 属性 ，例如：

1
permalink: /blog/:year/:month/:day/:title/

当在地址栏访问时，就会如下方式呈现出来：

1
http://localhost:4000/blog/2017/01/13/hexo-blog/

2. 创建博客

首先在命令行中进入Hexo的部署（blog）的目录下，用如下命令创建一篇新的文章

1
$ hexo new [layout] <title>

布局（layout） 存储路径 说明
post source/_posts 默认，可以直接发布
page source 在source下新建一个文件夹
draft source/_drafts 新建文件将保持到_drafts中

可以用 publish 命令将草稿移动到 source/_posts文件夹下

1
$ hexo publish [layout] <title>

3. 写作

经过上面上面一系列的准备工作，现在差不多就可以安心的写作了。打开 source/_posts 文件夹下刚创建的 Markdown 文件，你会发现有如下内容：

1
2
3
4
5
---
title: hexo-blog
date: 2017-01-13 16:07:32
tags:
---

注意，这里的 title 是可以随便改的，当然了 date 也是可以改，不过没有改的必要；这里要说一下 tags 这个属性，如果需要配置多个有两种方式：

1
tags: [tag1, tag2, tag3]

或者

1
2
3
4
tags:
  - tag1
  - tag2
  - tag3

之前说过 Hexo 是支持 Markdown 的所有功能的，所以，下面去学习一下 Markdown 的语法规范。

3.1 斜体和粗体

写法：

1
2
3
4
*这是斜体* 或 _这也是斜体_
**这是粗体**
***这是加粗斜体***
~~这是删除线~~

效果：
这是斜体 或 这也是斜体
这是粗体
这是加粗斜体
这是删除线

3.2 分级标题

写法：

1
2
3
4
5
6
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果：
分级标题

3.3 超链接

写法：

1
2
3
行内形式：[我的博客](https://kevinpu.github.io/)
参考形式：[我的博客][2]，有一个很好的平台-[简书][3]
自动链接：我的博客地址<https://kevinpu.github.io/>

效果：
行内形式：我的博客
参考形式：我的博客，有一个很好的平台-简书
自动链接：我的博客地址https://kevinpu.github.io/

3.4 列表

无序列表：
写法：

1
2
3
* 无序列表项1
+ 无序列表项2
- 无序列表项3

效果：

  • 无序列表项1
  • 无序列表项2
  • 无序列表项3
    有序列表：
    1
    2
    3
    4
    写法：
    1.有序列表项1
    2.有序列表项2
    3.有序列表项3

效果：
1.有序列表项1
2.有序列表项2
3.有序列表项3

3.5 插入图片

在 Hexo 中插入图片，首先需要将图片放在 source/images/ 文件夹下，然后如下方式进行插入：

1
![插入图片](/images/insert_image.jpg)

效果：
插入图片

3.6 表格
1
2
3
4
5
| 表头1|表头2|表头3|表头4
|-| :- | :-: | -: |
|默认左对齐|左对齐|居中对其|右对齐|
|默认左对齐|左对齐|居中对其|右对齐|
|默认左对齐|左对齐|居中对其|右对齐|

效果：

表头1 表头2 表头3 表头4
默认左对齐 左对齐 居中对其 右对齐
默认左对齐 左对齐 居中对其 右对齐
默认左对齐 左对齐 居中对其 右对齐

4. 总结

记录了一下 Hexo 写博客的环境配置，了解创建博客的过程和一些相关的变量，然后学习一下 Markdown 的基本语法规范，下次有时间在将 Markdown 更深入的使用方法记录一下。