Hexo搭建个人博客

发表于 | 分类于

什么是 Hexo？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

快速开始

安装 Hexo

1
npm install -g hexo-cli

建立站点

1
2
3
hexo init hexo-site
cd hexo-site
npm install

安装 Hexo 的最佳主题（NexT）

1
2
cd hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml 。 其中，一份位于 站点根目录 下，主要包含 Hexo 本身的配置；另一份位于 主题目录 下，这份配置由主题作者提供，主要用于配置主题相关的选项。为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 next。

hexo-site/_config.yml
1
theme: next

主题配置

目前 NexT 支持三种 Scheme，他们是:

  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces - 双栏 Scheme，小家碧玉似的清新

Scheme 的切换通过更改 主题配置文件 ，搜索 scheme 关键字。 你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

hexo-site/themes/next/_config.yml
1
2
3
# scheme: Muse
# scheme: Mist
scheme: Pisces

添加[标签]页面

  • 新建页面
1
2
cd hexo-site
hexo new page tags
  • 设置页面类型

编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。页面内容如下:

hexo-site/source/tags/index.md
1
2
3
4
5
6
---
title: 标签
date: 2018-05-09 14:24:08
type: "tags"
comments: false
---

注意：如果有集成评论服务，页面也会带有评论。 若需要关闭的话，请添加字段 comments 并将值设置为 false。

  • 修改菜单

在菜单中添加链接。编辑 主题配置文件 ， 添加 tags 到 menu 中，如下:

hexo-site/themes/next/_config.yml
1
2
3
4
menu:
    home: /
    archives: /archives
    tags: /tags

添加[分类]页面

  • 新建页面
1
2
cd hexo-site
hexo new page categories
  • 设置页面类型

编辑刚新建的页面，将页面的 type 设置为 categories ，主题将自动为这个页面显示分类。页面内容如下:

hexo-site/source/categories/index.md
1
2
3
4
5
6
---
title: 分类
date: 2018-05-09 14:24:31
type: "categories"
comments: false
---

注意：如果有集成评论服务，页面也会带有评论。 若需要关闭的话，请添加字段 comments 并将值设置为 false。

  • 修改菜单

在菜单中添加链接。编辑 主题配置文件 ， 添加 categories 到 menu 中，如下:

hexo-site/themes/next/_config.yml
1
2
3
4
menu:
    home: /
    archives: /archives
    categories: /categories

写篇文章吧

命令格式

1
hexo new [layout] <title>

可以在命令中指定文章的布局（layout），默认为 post

简单试试

1
hexo new learnHexo

Front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。

刚刚生成的文件是这样：

hexo-site/source/_posts/learnHexo.md
1
2
3
4
5
---
title: learnHexo
date: 2018-05-09 16:37:21
tags:
---

修改一下tags和categories，并增加一点内容:

hexo-site/source/_posts/learnHexo.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
---
title: learnHexo
date: 2018-05-09 16:37:21
categories:
- Hexo
tags:
- Hexo Learn
---

# Angular App

```ts app.component.ts
import { Component } from '@angular/core';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})
export class AppComponent {}
```

启动 Hexo 服务器

1
hexo server

默认端口是 4000， 打开 http://localhost:4000 看看效果吧

部署到 GitHub 吧

  • 在 _config.yml 中修改参数type、repo、branch
hexo-site/_config.yml
1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/wamich/wamich.github.io
branch: master
message:
  • 安装 hexo-deployer-git
1
npm install hexo-deployer-git --save
  • 一键部署
1
2
hexo g
hexo d

享受探索的喜悦吧！

参考资源