Hexo基本使用

Hexo介绍

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

Hexo安装

安装

安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:

  • Node.js
  • Git
1
$ npm install -g hexo

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

启动Hexo服务

1
$ hexo server

出现以下命令则表示安装成功,在页面访问http://localhost:4000,即可访问如下图所示:

1
2
INFO  Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

Hexo文件说明

新建完成后,指定文件夹的目录如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
.
├── _config.yml
├── db.json
├── package.json
├── package-lock.json
├── scaffolds
| ├── drafts.md
| ├── page.md
| └── posts.md
├── source
| ├── _drafts
| └── _posts
└── themes
  • scaffolds 脚手架,也就是一个工具模板

  • scripts 写文件的js,扩展hexo的功能

  • source 存放博客正文内容

  • source/_drafts 草稿箱

  • source/_posts 文件箱

  • themes 存放皮肤的目录

  • themes/landscape 默认的皮肤

  • _config.yml 全局的配置文件

  • db.json 静态常量

    在这里,我们每次用到的就是_posts目录里的文件,而_config.yml文件和themes目录是第一次配置好就行了。

    posts目录:Hexo是一个静态博客框架,因此没有数据库。文章内容都是以文本文件方式进行存储的,直接存储在posts的目录。Hexo天生集成了markdown,我们可以直接使用markdown语法格式写博客,例如:hello-world.md。新增加一篇文章,就在_posts目录,新建一个xxx.md的文件。

    themes目录:是存放皮肤的,包括一套Javascript+CSS样式和基于EJS的模板设置。通过在themes目录下,新建一个子目录,就可以创建一套新的皮肤,当然我们也可以直接在landscape上面修改

package.json 包管理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": ""
},
"dependencies": {
"hexo": "^3.8.0",
"hexo-generator-archive": "^0.1.5",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.1",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-stylus": "^0.3.3",
"hexo-renderer-marked": "^0.3.2",
"hexo-server": "^0.3.3"
}
}

Hexo配置

配置

_config.yml 全局配置

网站

1
2
3
4
5
6
7
8
# Site
title: Breeze
subtitle: Quick notes
description: 戒骄戒躁
keywords: Breeze,徐瑞禄,Java,SpringCloud微服务
author: 徐瑞禄
language: zh-CN
timezone:
参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC

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

网址

1
2
3
4
5
#URL
url: http://xuruilu.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
参数 描述 默认值
url 网址
root 网站根目录
permalink 文章的 永久链接 格式 :year/:month/:day/:title/
permalink_defaults 永久链接中各部分的默认值

网站存放在子目录

如果您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/

目录

1
2
3
4
5
6
7
8
9
# 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:
参数 描述 默认值
source_dir 资源文件夹,这个文件夹用来存放内容。 source
public_dir 公共文件夹,这个文件夹用于存放生成的站点文件。 public
tag_dir 标签文件夹 tags
archive_dir 归档文件夹 archives
category_dir 分类文件夹 categories
code_dir Include code 文件夹 downloads/code
i18n_dir 国际化(i18n)文件夹 :lang
skip_render 跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。

提示

如果您刚刚开始接触Hexo,通常没有必要修改这一部分的值。

文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 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
auto_detect: false
tab_replace:
参数 描述 默认值
new_post_name 新文章的文件名称 :title.md
default_layout 预设布局 post
auto_spacing 在中文和英文之间加入空格 false
titlecase 把标题转换为 title case false
external_link 在新标签中打开链接 true
filename_case 把文件名称转换为 (1) 小写或 (2) 大写 0
render_drafts 显示草稿 false
post_asset_folder 启动 Asset 文件夹 false
relative_link 把链接改为与根目录的相对位址 false
future 显示未来的文章 true
highlight 代码块的设置

相对地址

默认情况下,Hexo生成的超链接都是绝对地址。例如,如果您的网站域名为example.com,您有一篇文章名为hello,那么绝对链接可能像这样:http://example.com/hello.html,它是绝对于域名的。相对链接像这样:/hello.html,也就是说,无论用什么域名访问该站点,都没有关系,这在进行反向代理时可能用到。通常情况下,建议使用绝对地址。

分类 & 标签

1
2
3
4
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
参数 描述 默认值
default_category 默认分类 uncategorized
category_map 分类别名
tag_map 标签别名

日期 / 时间格式

1
2
3
4
5
6
# 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

Hexo 使用 Moment.js 来解析和显示时间。

参数 描述 默认值
date_format 日期格式 YYYY-MM-DD
time_format 时间格式 H:mm:ss

分页

1
2
3
4
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
参数 描述 默认值
per_page 每页显示的文章量 (0 = 关闭分页功能) 10
pagination_dir 分页目录 page

扩展

1
2
3
4
5
6
7
8
9
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:
参数 描述
theme 当前主题名称。值为false时禁用主题
deploy 部署部分的设置

命令

init - 初始化

1
$ hexo init [folder]

新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站。

new - 新建文件

1
$ hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。

布局 路径
post source/_posts
page source
draft source/_drafts

创建文章页面

1
$ hexo new "post title with whitespace"
参数 描述 默认值
layout 布局
title 标题
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签(不适用于分页)
categories 分类(不适用于分页)
permalink 覆盖文章网址

文章页面设置

1
2
3
4
5
title: Hexo搭建博客
date: 2019-05-05 18:45:50
categories: "Markdown"
tags:
- Markdown

创建标签

初始化时都没有标签页面和分类页面的,点击时找不到页面。

  • 创建标签页面
1
$ hexo new page tages
  • 在文章中设置
1
2
tags:
- Hexo

创建分类

  • 创建分类页面
1
$ hexo new page categories
  • 在文章中设置
1
categories: "Hexo"

generate - 生成静态文件

1
$ hexo generate

生成静态文件。

选项 描述
-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动

该命令可以简写为

1
$ hexo g

publish - 发布

1
$ hexo publish [layout] <filename>

发表草稿。

server - 启动服务

1
$ hexo server

启动服务器。默认情况下,访问网址为: http://localhost:4000/

选项 描述
-p, --port 重设端口
-s, --static 只使用静态文件
-l, --log 启动日记记录,使用覆盖记录格式

deploy - 部署

1
$ hexo deploy

部署网站。
| -g, --generate | 部署之前预先生成静态文件 |
| :—————– | :———————– |
| 参数 | 描述 |

该命令可以简写为:

1
$ hexo d

可能会出现以下错误:

1
ERROR Deployer not found: github

需要安装 hexo-deployer-git

1
$ npm install hexo-deployer-git --save

修改配置。

1
2
3
4
5
deploy:
type: git
repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
branch: [branch] #published
message: [message]
参数 描述
repo 库(Repository)地址
branch 分支名称。如果您使用的是 GitHub 或 GitCafe 的话,程序会尝试自动检测。
message 自定义提交信息

生成站点文件并推送至远程库。执行hexo clean && hexo deploy命令。前者清除站点文件,后者重新生成站点文件并将之推送到指定的库分支。(如果您的Hexo是局部安装,则需要执行./node_modules/.bin/hexo clean && ./node_modules/.bin/hexo deploy。)

登入 Github/BitBucket/Gitlab,请在库设置(Repository Settings)中将默认分支设置为_config.yml配置中的分支名称。稍等片刻,您的站点就会显示在您的Github Pages中。

这一切是如何发生的?

当初次新建一个库的时候,库将自动包含一个master分支。请在这个分支下进行写作和各种配置来完善您的网页。当执行hexo deploy时,Hexo会创建或更新另外一个用于部署的分支,这个分支就是_config.yml配置文件中指定的分支。Hexo会将生成的站点文件推送至该分支下,并且完全覆盖该分支下的已有内容。因此,部署分支应当不同于写作分支。(一个推荐的方式是把master作为写作分支,另外使用public分支作为部署分支。)值得注意的是,hexo deploy并不会对本地或远程的写作分支进行任何操作,因此依旧需要手动推送写作分支的所有改动以实现版本控制。此外,如果您的Github Pages需要使用CNAME文件自定义域名,请将CNAME文件置于写作分支的source_dir目录下,只有这样hexo deploy才能将CNAME文件一并推送至部署分支。

render - 渲染

1
$ hexo render <file1> [file2] ...

渲染文件。

参数 描述
-o, --output 设置输出路径

clean - 清除

1
$ hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。

list - 列出

1
$ hexo list <type>

列出网站资料。

version - 版本

1
$ hexo version

显示 Hexo 版本

Hexo+Github搭建个人博客

本想打算写一篇的,但是最近看到一篇非常详细的博客

Hexo+Github搭建个人博客

Hexo+Coding搭建个人博客

Coding与Github相似,都是基于Git的代码托管平台,GitHub大家应该都很熟悉,相对与Coding来说,GitHub面向英语系国家程序员,Coding面向中国程序猿,而且Coding的私有库可免费使用这是最大的区别。
Hexo+Coding搭建个人博客

Hexo上传图片到博客

想必大家都在为图片上传到博客头疼,我之前用的是七牛云确实也挺方便的,但是现在必须要备案才能使用,所以又发现了Hexo可以直接保存图片,发布到博客,感觉特别方便特别爽。

资源文件

方式一:采用source/images公共资源文件

资源(Asset)代表 source 文件夹中除了文章以外的所有文件,例如图片、CSS、JS 文件等。比方说,如果你的Hexo项目中只有少量图片,那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

方式二:文件文件资源夹

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说,Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml文件中的 post_asset_folder 选项设为 true 来打开。

_config.yml

post_asset_folder: true

当资源文件管理功能打开后,Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后,你可以通过相对路径来引用它们,这样你就得到了一个更简单而且方便得多的工作流。

执行hexo new test 命令在_posts目录下新建两个文件

├── test
└── test.md

相对路径引用

基本语法:

使用:

参考文献

0%