Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
1.安装:
npm install -g hexo-cli
2.建站
$ hexo init <folder>
$ cd <folder>
$ npm install
3.目录结构:
. |
_config.yml
网站的 配置 信息,您可以在此配置大部分的参数。
package.json
webpack应用程序信息
scaffolds
模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
Hexo的模板是指在新建的markdown文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。
source
资源文件夹是存放用户资源的地方。除 _posts
文件夹之外,开头命名为 _
(下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public
文件夹,而其他文件会被拷贝过去。
themes
主题 文件夹。Hexo 会根据主题来生成静态页面。
3.配置
可以在 _config.yml
中修改大部分的配置
- 配置生成文章的层级:
默认层级太多(permalink: :year/:month/:day/:title/),会影响seo
permalink: :year:month:day/:title.html ---建立一个日期目录,网页生成放在日期目录里,比如20190626/test.html
permalink: :title.html ---直接生成在网站根目录,以文章名为网页名
- 配置主题
把github上下载的主题放在themes文件夹
theme: indigo ---indigo是主题在themes里面的文件夹名
4.命令:
hexo new [layout] <title>
新建一篇文章。如果没有设置 layout
的话,默认使用 _config.yml 中的 default_layout
参数代替。如果标题包含空格的话,请使用引号括起来。
$ hexo new "post title with whitespace" |
hexo generate --可以简写为hexo g
生成静态文件
hexo server
启动服务网
5.网站位置移动
使用命令新建一个站点,然后把之前站点的source
、themes
、 _config.yml覆盖过去即可
6.写作
新建文章
在source/_posts目录下找到新建的文章,使用markdown语法进行编辑
7.如果编译出来的博客代码不是运行在根目录下,一定要配置_config.yml的root为实际的目录,比如:
8.搜索
Hexo本身也提供了两个插件来生成数据文件作为数据源:
hexo-generator-search生成xml
格式的数据文件。
hexo-generator-json-content 生成json
格式的数据文件
indigo主题支持hexo-generator-json-content,所以以hexo-generator-json-content为例:
安装:
$ npm install hexo-generator-json-content@2.2.0 --save
配置indigo主题是否开启搜索:
然后执行hexo generate
时会自动生成content.json
文件,若使用默认设置,生成的数据结构如下
1 | meta: { |
hexo-generator-json-content默认生成的json数据内容非常全,默认配置如下:
1 | jsonContent: |
因为默认生成了很多我们不需要的数据,所以我们要对其进行配置让它只生成我们想要的内容,在hexo/_config.yml
中加入:
1 | jsonContent: |
这样,就只生成每篇文章的标题,日期,路径,标签和文本字段,同时也减小了文件的大小。
例如:
1 | { |
- indigo主题添加分类,标签
分类:
执行命令:
hexo new page categories
修改source/categories/index.md:
layout: categories comments: false
在文章中添加分类:
layout: tags comments: false ---
- 如果出现加载慢的情况,可以执行hexo clean先删除临时文件,再执行hexo server
- icurus主题中引入第三方库的方法:
1.hexo根目录下的source目录会拷贝到最终生成的public文件夹中,所以我们要加的css,图片,第三方js等文件可以放到这里
- 主题下的source目录打包后会生成到public目录,除_post,里面的目录代表路径,md文件转html文件,也可以由html文件替代md文件