快速搭建属于自己的博客--hexo

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

• 全局安装hexo框架：

npm install -g hexo-cli

• 建站

hexo init <folder>
cd <folder>
npm install

• 目录结构：
  .
  ├── _config.yml
  ├── package.json
  ├── scaffolds
  ├── source
  | ├── _drafts
  | └── _posts
  └── themes

_config.yml
网站的 配置 信息，您可以在此配置大部分的参数。

package.json
webpack应用程序信息

scaffolds
模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source
资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes
主题 文件夹。Hexo 会根据主题来生成静态页面。

• 配置

可以在 _config.yml 中修改大部分的配置,title,description....这些

一个配置项由key: value组成，value前面一定要有一个空格，否则报错

1. 配置生成文章的层级：
   默认层级太多（permalink: :year/:month/:day/:title/），会影响seo

permalink: :year:month:day/:title.html ---建立一个日期目录，网页生成放在日期目录里，比如20190626/test.html

permalink: :title.html ---直接生成在网站根目录，以文章名为网页名

2. 配置主题
   把github上下载的主题放在themes文件夹
   theme: indigo ---indigo是主题在themes里面的文件夹名

• 命令：

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

$ hexo new "post title with whitespace"

2. hexo generate --可以简写为hexo g
   生成静态文件

3. hexo server
   启动服务器进行本地测试

• 写作
  新建文章
  在source/_posts目录下找到新建的文章，使用markdown语法进行编辑（也支持html语法）

• 如果编译出来的博客代码不是运行在根目录下，一定要配置_config.yml的root为实际的目录，比如：
  root: /blog

• 搜索
  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主题是否开启搜索：
是否开启搜索
search: true
然后执行hexo generate时会自动生成content.json文件，若使用默认设置，生成的数据结构如下

meta: {
    title: hexo.config.title,
    subtitle: hexo.config.subtitle,
    description: hexo.config.description,
    author: hexo.config.author,
    url: hexo.config.url
},
pages: [{ //-> all pages
    title: page.title,
    slug: page.slug,
    date: page.date,
    updated: page.updated,
    comments: page.comments,
    permalink: page.permalink,
    path: page.path,
    excerpt: page.excerpt, //-> only text ;)
    keywords: null //-> it needs settings
    text: page.content, //-> only text minified ;)
    raw: page.raw, //-> original MD content
    content: page.content //-> final HTML content
}],
posts: [{ //-> only published posts
    title: post.title,
    slug: post.slug,
    date: post.date,
    updated: post.updated,
    comments: post.comments,
    permalink: post.permalink,
    path: post.path,
    excerpt: post.excerpt, //-> only text ;)
    keywords: null //-> it needs settings
    text: post.content, //-> only text minified ;)
    raw: post.raw, //-> original MD content
    content: post.content, //-> final HTML content
    categories: [{
        name: category.name,
        slug: category.slug,
        permalink: category.permalink
    }],
    tags: [{
        name: tag.name,
        slug: tag.slug,
        permalink: tag.permalink
    }]
}]

hexo-generator-json-content默认生成的json数据内容非常全，默认配置如下：

jsonContent:
  meta: true
  keywords: false # (english, spanish, polish, german, french, italian, dutch, russian, portuguese, swedish)
  pages:
    title: true
    slug: true
    date: true
    updated: true
    comments: true
    path: true
    link: true
    permalink: true
    excerpt: true
    keywords: true # but only if root keywords option language was set
    text: true
    raw: false
    content: false
  posts:
    title: true
    slug: true
    date: true
    updated: true
    comments: true
    path: true
    link: true
    permalink: true
    excerpt: true
    keywords: true # but only if root keywords option language was set
    text: true
    raw: false
    content: false
    categories: true
    tags: true

因为默认生成了很多我们不需要的数据，所以我们要对其进行配置让它只生成我们想要的内容,在hexo/_config.yml中加入：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true #文章标题
    date: true #发表日期
    path: true #路径
    text: true #文本字段
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true #标签

这样，就只生成每篇文章的标题，日期，路径，标签和文本字段，同时也减小了文件的大小。
例如：

{
  "title": "自定义HEXO站内搜索Javascript+json",
  "date": "2016-11-09T01:24:56.000Z",
  "path": "2016/11/09/自定义HEXO站内搜索Javascript-json.html",
  "text": "目前很多Hexo博客都用的Swiftype和Algolia等第三......#这里显示整篇文章的内容",
  "tags": [{
    "name": "javascript,hexo",
    "slug": "javascript-hexo",
    "permalink": "http://chaoo.oschina.io/tags/javascript-hexo/"
  }]
}

• 给主题添加分类,标签
  以indigo主题为例

1. 添加分类：
   执行命令：

hexo new page categories

修改source/categories/index.md：

layout: categories
comments: false

在文章中添加分类：

title: test
date: 2019-06-20 14:05:07
categories: 蜜蜂试玩
tags:

2. 添加标签：
   执行命令：

hexo new page tags

修改/source/tags/index.md

layout: tags
comments: false

文章中添加标签：

title: test
date: 2019-06-20 14:05:07
categories: 蜜蜂试玩
tags: [蜜蜂试玩, 手机赚钱, 蜜蜂试玩教程,a,b,c,ddddd,eeeee,fffff,gggggggggggg]

• 如果出现加载慢的情况，可以执行hexo clean先删除临时文件，再执行hexo server

• icurus主题中引入第三方库的方法：

1. hexo根目录下的source目录会拷贝到最终生成的public文件夹中，所以我们要加的css，图片，第三方js等文件可以放到这里
2. 当前主题的source目录会拷贝到最终生成的public文件夹中，所以我们要加的css，图片，第三方js等文件可以放到这里
3. 在页面中使用第三方库：

//使用在线方式引入
<%- _js(cdn('jquery', '3.3.1', 'dist/jquery.min.js')) %>  
<%- _css(cdn('bootstrap', '4.3.1', 'dist/css/bootstrap.min.css')) %>

实际引入的是https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css

//引用本地资源，需要先放入主题或根目录的source文件夹中
<%- _js('lib/bootstrap/bootstrap.min.js') %>            
<%- _css('lib/bootstrap/bootstrap.min.css') %>

cdn地址在主题的配置文件中可以配置

注意：引入本地js资源，生成到public目录后，js可以自动改变了，所以第三方库最好都使用cdn方式引入，如果jsdelivr cdn速度慢，可以直接这样引入：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

• 主题下的source目录打包后会生成到public目录，除_post,里面的目录代表路径，md文件转html文件,也可以由html文件替代md文件