目录
六、清除缓存文件:
一、Hexo 概述:
Hexohttps://hexo.io/zh-cn/ Hexo是一个基于 node.js的快速生成静态博客的开源框架,支持 Markdown和大多数 Octopress
插件,一个命令即可部署到 Github页面、 Giteee、 Heroku等,强大的APl,可无限扩展,拥有
数百个主题和插件。
二、Hexo初始环境搭建:
- Git
- Node.js
通过以下命令查看主机中是否安装了node.js和npm:
node --version #检查是否安装了node.js
npm --version #检查是否安装了npm
1.Node.js:
直接到官网上下载安装即可:
Download | Node.js (nodejs.org)https://nodejs.org/en/download/
- Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
- Node自带npm
2.Git:
Git (git-scm.com)https://git-scm.com/
三、配置Hexo本地环境:
Hexo官方文档:
安装使用hexo之前需要先安装Node.js和Git,当已经安装了Node.js和npm(npm是node.js的包管理工具),可以通过以下命令安装hexo:
npm install -g hexo-cli
安装完Hexo之后,执行下列命令,Hexo将会在指定目录中新建所需要的文件,指定的目录即为Hexo的工作站:
hexo init 本地磁盘文件夹路径
切换到磁盘文件目录:
cd 磁盘文件目录
npm install
新建完成之后,指定目录中的情况如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
本地Hexo环境初始化完成!
目录&文件解析:
1. _config.yml 网站配置信息:
官方配置文件参数详解:
配置 | Hexohttps://hexo.io/zh-cn/docs/configuration
title: # 标题
subtitle: # 副标题
description: # 描述
keywords: # 关键字
author: # 作者
language: # 语言
timezone: # 时区
url: # 网址
root: # 根目录
permalink: # 文章链接格式
permalink_defaults: # 链接默认值
source_dir: # 源文件夹,内容的存储位置
public_dir: # 公用文件夹,静态文件的生成位置
tag_dir: # 标签目录
archive_dir: # 存档目录
category_dir: # 分类目录
skip_render: # 复制到原始路径,不进行渲染
new_post_name: # 新帖子的文件名格式
titlecase: # 将标题转换为小写1/大写2 *
external_link.enable: # 在新标签页中打开外部链接
post_asset_folder: # 启用资源文件夹功能
filename_case: # 将文件名转换小写小写1/大写2
relative_link: # 是否创建相对于根文件夹的链接
index_generator.per_page: # 每页显示的文章数
index_generator.order_by: # 发布顺序
date_format: # 日期格式
time_format: # 时间格式
per_page: # 每个页面上显示的文章数
pagination_dir: # 网址格式
theme: # 主题名称
theme_config: # 主题配置,覆盖主题默认值
deploy: # 部署设置
include: # 包括隐藏文件
exclude: # 排除文件/文件夹
ignore: # 忽略文件/文件夹
参照配置文件,对配置文件进行修改!
2.package.json npm包管理文件:
应用程序的信息,以及需要安装的模块信息。
3.scaffolds 模板文件夹:
新建文章时,Hexo 会根据 scaffold 中的模板文件来建立新的文件。Hexo的模板是指在新建的markdown文件中默认填充的内容。例如,如果修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。也就是说,通过hexo命令每新建一个文章,都会包含指定模板文件中的内容。
模版 | Hexohttps://hexo.io/zh-cn/docs/templates
4.source 资源文件夹:
资源文件夹是存放用户资源的地方,如markdown文章。Markdown 和 HTML 文件会被解析并放到 public
文件夹,而其他文件会被拷贝过去。
注意:除
_posts
文件夹之外,开头命名为_
(下划线)的文件 / 文件夹和隐藏的文件将会被忽略。
5.themes 主题文件夹:
主题文件夹。Hexo 会根据主题来解析source目录中的markdown文件生成静态页面。
主题 | Hexohttps://hexo.io/zh-cn/docs/themes
四、创作第一篇文章:
可以执行下列命令来创建一篇新文章:
hexo new [layout] <title>
可以在命令中指定文章的布局(layout),不指定默认为 post
,也可以通过修改 _config.yml
中的 default_layout
参数来指定默认布局。创建的新文章会自动加上指定布局对应的模板文件中的内容。
1.布局(Layout):
Hexo 有三种默认布局:post
、page
和 draft
,它们分别对应不同的路径,而自定义的其他布局和 post
相同,都将储存到 source/_posts
文件夹。
布局路径postsource/_postspagesourcedraftsource/_drafts
如果你不想你的文章被处理,你可以将 Front-Matter 中的layout:
设为 false
。
2.模版(Scaffold):
在新建文章时,Hexo 会根据 scaffolds
文件夹内相对应的文件来建立文件,例如:
hexo new photo "My Gallery"
在执行这行指令时,Hexo 会尝试在 scaffolds
文件夹中寻找 photo.md
,并根据其内容建立文章,以下是您可以在模版中使用的变量:
变量描述layout
布局title
标题date
文件建立日期
3.Front-matter:
Front-matter是文件最上方以 ---
分隔的区域,用于指定个别文件的变量,举例来说:
---
title: Hello World
date: 2013/7/13 20:46:25
---
注意:一般Front-matter使用的yaml语法,yaml语法需要注意空格,如title: Hello World
冒号需要有一个空格,当然除YAML 外,你也可以使用 JSON 来编写 Front-matter。
以下是预先定义的参数,您可在模板中使用这些参数值并加以利用。
参数描述默认值:
- layout布局title标题
- date建立日期文件建立日
- updated更新日期文件更新日期
- comments开启文章的评论功能
- truetags标签(不适用于分页)
- categories分类(不适用于分页)
- permalink覆盖文章网址
4.分类和标签:
只有文章支持分类和标签,您可以在 Front-matter 中设置。在其他系统中,分类和标签听起来很接近,但是在 Hexo 中两者有着明显的差别:分类具有顺序性和层次性而标签没有顺序和层次。
categories:
- Diary
tags:
- PS3
- Games
WordPress(另外一个博客搭建网站)支持对一篇文章设置多个分类,而且这些分类可以是同级的,也可以是父子分类。但是Hexo不支持指定多个同级分类。下面的指定方法:
categories:
- Diary
- Life
会使分类Life
成为Diary
的子分类,而不是并列分类。因此,有必要为您的文章选择尽可能准确的分类。
文章摘要:
设置文章摘要,我们只需在想显示为摘要的内容之后添 <!-- more -->
即可。像下面这样:
---
title: hello hexo markdown
date: 2016-11-16 18:11:25
tags:
- hello
- hexo
- markdown
---
我是短小精悍的文章摘要(๑•̀ㅂ•́) ✧
<!-- more -->
紧接着文章摘要的正文内容
这样,<!-- more -->
之前、文档配置参数之后中的内容便会被渲染为站点中的文章摘要。
5.资源引用:
写个博客,有时候会想添加个图片或者其他形式的资源等等。有以下两种方式进行解决:
- 使用绝对路径引用资源,在 Web 世界中就是资源的 URL
- 使用相对路径引用资源
对于使用相对路径引用资源的,我们可以使用 Hexo 提供的资源文件夹功能。
使用文本编辑器打开站点根目录下的 _ config.yml
文件,将 post_asset_folder
值设置为 true
。
post_asset_folder: true
修改之后会开启 Hexo 的文章资源文件管理功能。Hexo 将会在我们每一次通过 hexo new <title>
命令创建新文章时自动创建一个同名文件夹,于是我们便可以将文章所引用的相关资源放到这个同名文件夹下,然后通过相对路径引用。例如,你把一个 example.jpg
图片放在了这个同名文件夹中,使用相对路径的常规 markdown 语法 ![](./example.jpg)
即可访问 。
五、网站本地发布:
首先执行下列命令生成相应的静态网页,生成的静态网页以及相关资源都会在public
目录下
hexo generate
hexo-server:
hexo-server模块的主要命令如下,输入以下命令以启动服务器,您的网站会在 http://localhost:4000
下启动。在服务器启动期间,Hexo 会监视文件变动并自动更新,您无须重启服务器。
hexo server
如果您想要更改端口,或是在执行时遇到了 EADDRINUSE
错误,可以在执行时使用 -p
选项指定其他端口,如下:
hexo server -p 5000
但是个人认为此方式比较适合用于调试网站,并不适合长时间的网站服务器,同时为了让这个命令在后台长时间运行,需要编写相应的脚本。
在浏览器中访问:
http://localhost:4000/
六、清除缓存文件:
为了避免不必要的错误,在生成静态文件前,强烈建议先运行以下命令:
hexo clean
上述命令会清除本地站点文件夹下的缓存文件(db.json
)和已有的静态文件(public
)。