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

目录

1. 安装

1.1 前期准备

直接下载安装就可以了.

Node.js 官方提供最新版和稳定版两个版本, 推荐安装稳定版. 本人安装版本 v6.9.2LTS. 作为技术人员 git 就不用介绍了吧.
再推荐安装一款软件 Sublime Text, 在后续过程中编辑 hexo 的配置文件, html 文件都需要一个编辑器.

1.2 安装 hexo

所需软件安装完成后, 打开终端, 只要一行命令就可以安装 hexo 了.

$ npm install -g hexo-cli

官方文档提示:

Mac 用户
您在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

可能遇到的问题:

首先按照命令执行, 出现如下界面,

安装中...安装中...

接着最后

报错!
看倒数第三行, 让我们尝试以管理员权限执行命令.
按照它说的做, 在前面加上 sudo, 重新执行:

$ sudo npm install -g hexo-cli

安装成功:


最后没有报错信息.
( ps: 这是我安装过程中遇到的问题, 希望对读者有所帮助. )

2. 建站

首先进入到你要存放博客的文件夹, 本人建立的 blog 文件夹.

$ cd /Users/blog

( ps: 给小白解释一下, cd :切换目录, /Users/blog :绝对路径. )

接着执行:

$ hexo init
$ npm install

接下来你 blog 目录中就会出现如下文件结构:
( ps: init 之后你的 blog 目录中就会出现如下文件结构, 但是不要忘记 install 的命令 )

.
├── _config.yml        # 网站的配置信息，您可以在此配置大部分的参数。
├── package.json    # 应用程序的信息
├── scaffolds        # 模版文件夹
├── source            # 资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _(下划线)的文件/文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
|   └── _posts        # 存放 .md文件, 每个文件代表一篇文章(默认会有一篇 hello-world 文章)
└── theme            # 主题文件夹。Hexo 会根据主题来生成静态页面

现在让我们提前预览一下, 依次执行两个命令:

$ hexo g
$ hexo s

现在在浏览器中输入网址: http://localhost:4000
你就可以看到如下界面( ps: 这只有本地可以访问, 不要显摆给别人看啊 ):

这是 hexo 的默认主题, 文章是 _posts 文件夹中默认提供的 hello world. ( ps: 先不要考虑刚才的命令、主题等, 后续都会讲到, 这里是为了让第一次开博客的小白高兴一下😄, 接下来继续… )

3. 配置

_config.yml 文件是网站的配置信息，可以用之前提到过的 sublime text 打开它, 关于每个参数的解释官网都有, 点击这里查看.
下面是本人写的带注释的:

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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: selfmaking's Den       #网站标题
subtitle: Stay hungry, stay foolish. #网站副标题
description: description      #网站描述
author: selfmaking            #作者名字
language: zh-CN               #网站使用的语言
timezone:                     #网站时区。Hexo 默认使用您电脑的时区
# URL
## 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
url: http://selfmaking.github.io  #用于绑定域名,其他的不需要配置
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      #nclude code 文件夹
i18n_dir: :lang               #国际化（i18n）文件夹
skip_render:                  #跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。
# Writing  文章
new_post_name: :title.md      #新建文章默认文件名
default_layout: post          #默认布局, hexo 提供三种布局, post, page, draft.
titlecase: false # Transform title into titlecase
external_link: true           # 在新标签中打开一个外部链接，默认为true
filename_case: 0              #转换文件名，1代表小写；2代表大写；默认为0，意思就是创建文章的时候，是否自动帮你转换文件名，默认就行，意义不大。
render_drafts: false          #是否渲染_drafts目录下的文章，默认为false
post_asset_folder: true       #启动 Asset 文件夹
relative_link: false          #把链接改为与根目录的相对位址，默认false
future: true                  #显示未来的文章，默认false
highlight:                    #代码块的设置
  enable: true
  line_number: true
  auto_detect: false
  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: YY-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: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape                  #主题
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
	 type:

可能遇到的问题:

当修改过 _config.yml 文件后, 再执行某些指令可能会出现如下图错误:

主要错误:
YAMLException: end of the stream or a document separator is expected at line7, column 1:

在配置 _config.yml 时(只取少量举例子, 不代表只在这几个参数产生问题):

title: title
subtitle: subtitle
description: description
author: author
language: zh-CN
timezone:

导致该问题的原因是, 在某项后的值与冒号之间没有添加空格, 像subtitle:subtitle这样直接把值写到冒号的后边, 会导致如上错误.

4. 写作

4.1 添加文章

$ hexo new "postName"

其中 postName 是文章标题。执行完该命令, 会在 source/_posts 文件夹中生成 "postName".md 文件, 文件名与标题名相同. ( ps: 详细内容请查看官方文档 )

4.2 添加图片资源

4.2.1 图床

图床方式参照这篇博客吧, 本人目前没打算使用这种方式, 以后也许会考虑.

4.2.2 本地资源

官方文档提供两种方式, 点击这里查看.
在这里说下官方的两种方式的缺陷, 第一种是将所有图片放在同一文件夹, 导致结果就是当文章越来越多的时候图片资源混乱. 第二种是使用官方语法, 偏离 markdown 的语法结构, 很不舒服. 本人使用的另一种方式, 详情参考这篇博客. 使用这种方式以后, 每次新建文章都会在同目录下出现同名文件夹, 将图片放入, 直接引图片名称就可以了.

5. 部署

5.1 生成静态页面

$ hexo generate

或者也可以执行缩写

$ hexo g

这就是之前为了预览使用到的第一个命令, 目的是为了将 md 文件生成 html 静态文件. ( ps: 更详细内容请查看官方文档)

5.2 启动服务器

$ hexo server

或者也可以执行缩写

$ hexo s

这是之前预览使用的第二个命令, 将博客本地部署, 看到 INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop. 之后，就可以在浏览器中打开页面 http://localhost:4000 来看了. Ctrl + C 停止本地服务器. ( ps: 更详细内容请查看官方文档 )

6. 添加主题

你可以在 Themes·Hexo 上选择你喜欢的主题, 每个主题都有文档教程, 基本都分为四步:

1. 将主题文件 clone 本地.
2. 修改 `config.yml` 配置文件, 重置主题参数.
3. 根据文档配置.
4. 发布.

这里以 Daily 为例.
安装文档:

根据步骤操作, clone 主题文件及安装插件, 修改配置文件参数, 这里跳过配置 (ps: 配置基本上主题各个部分的自定义, 配置文件的使用等等, 每个主题不一样, 就不做细致讲解了), 直接本地预览:


注意:

  1. clone 文件时直接在根目录下就可以, 这里的根目录指的是你建立站点的根目录, 我的就是 blog 这个目录. 前提是命令中的目标路径是以 themes/*** 结尾, 如果只以单独的主题名结尾, 需要使用 cd 命令进入到 themes 文件夹.
  2. 更换主题后可能会导致某些插件消失了, 是因为不同主题对插件的支持不同, 如果本身没有集成某个插件就需要我们自己集成, 教程看插件相关那一块就可以了.

可能遇到的问题:

本人在这个阶段中执行 npm 命令安装插件时经常出现错误, 在这里提醒一下, 安装失败原因主要有三个:

  • 网络问题
  • 安装源问题
  • 权限问题

依次解决办法:

参考文章 :

版权声明：本文为博主原创文章，未经博主允许不得转载。