Hexo+Fluid主题博客部署

本文遵循BY-SA版权协议，转载请附上原文出处链接。


本文作者: 黑伴白

本文链接: http://heibanbai.com.cn/posts/239e91f/

Hexo+Fluid主题博客部署

安装Git

安装Node.js

安装Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

1
$ npm install -g hexo-cli

进阶安装和使用

对于熟悉 npm 的进阶用户，可以仅局部安装 hexo 包。

1
$ npm install hexo

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

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

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml

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

package.json

应用程序的信息。 EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package.json{
  "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"
  }
}

scaffolds

模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

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

source

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

themes

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

修改Hexo为中文

修改_config.yml:

1
2
3
4
5
6
7
8
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: zh-CN
timezone: ''

安装Hexo插件

hexo-auto-category

自动生成 categories

最常用的文件管理策略，就是利用文件系统目录结构(树形结构 directory-tree)。
同样，为了便于管理大量的日志文件，采用目录结构是一种简便可行的方案。hexo-auto-category根据日志文件(Markdown)所在文件目录自动分类，即自动生成markdown的front-matter中的categories变量。

Installation

1
$ npm install hexo-auto-category --save

Configuration

You can configure this plugin in Hexo _config.yml

1
2
3
4
5
6
# Generate categories from directory-tree
# Dependencies: https://github.com/xu-song/hexo-auto-category
# depth: the max_depth of directory-tree you want to generate, should > 0
auto_category:
 enable: true
 depth:

build & preview

1
$ hexo clean && hexo g && hexo s

Example

The generated categories for post source/_post/web/framework/hexo.md is as follows:

1
2
3
categories:
  - web
  - framework

hexo-abbrlink2

How to install

Add plugin to Hexo:

1
npm install hexo-abbrlink2 --save

Modify permalink in config.yml file:

1
permalink: posts/:abbrlink/

optional settings:

1
2
abbrlink:
  start: 1000 # the first id, default 0

Sample

The generated link will look like the following:

1
2
3
https://post.zz173.com/posts/1.html
https://post.zz173.com/posts/2.html
https://post.zz173.com/posts/3.html

生成站点地图

站点地图（Sitemap）

站点地图描述了一个网站的架构。 它可以是一个任意形式的文档，用作网页设计的设计工具，也可以是列出网站中所有页面的一个网页，通常采用分级形式。这有助于访问者以及搜索引擎的爬虫找到网站中的页面。

站点地图为SEO带来的好处。

  1. 为搜索引擎爬虫提供可以浏览整个网站的链接；
  2. 为搜索引擎爬虫提供一些链接，指向动态页面或者采用其他方法比较难以到达的页面；
  3. 如果访问者试图访问网站所在域内并不存在的URL，那么这个访问者就会被转到“无法找到文件”的错误页面，而网站地图可以作为该页面的“准”内容。

说白了就是让搜索引擎的爬虫，尽可能多的收录你站点上的页面，页面收录的越多，你的网站的流量就会越大。

Hexo如何生成Sitemap

Google 版本

进入到根目录下，打开CMD，运行下面的命令：

1
npm install hexo-generator-sitemap --save

Baidu 版本

进入到根目录下，打开CMD，运行下面的命令：

1
npm install hexo-generator-baidu-sitemap --save

生成站点地图

安装结束后，在_config.yml中找到url，改成你自己的域名。

1
2
3
4
5
6
7
8
9
10
# URL
## If your site is put in a subdirectory, 
set url as 'http://yoursite.com/child' and root as '/child/'
url: 改成你自己的域名
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

更改完成后，每次进行打包的时候，会自动在public文件夹下生成sitemap.xml和baidusitemap.xml分别用于Google和百度。

查看

将页面提交到服务器后，通过域名/sitemap.xml或者域名/baidusitemap.xml可以进行访问sitemap。

最后到Google或百度对应的站长工具进行提交sitemap就可以了。

安装Fluid主题

获取最新版本

方式一

Hexo 5.0.0 版本以上，推荐通过 npm 直接安装，进入博客目录执行命令：

1
npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml，将主题的 _config.yml (opens new window)内容复制过去。

方式二

下载 最新 release 版本 (opens new window)解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

指定主题

如下修改 Hexo 博客目录中的 _config.yml：

1
2
3
theme: fluid  # 指定主题

language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

创建「关于页」

首次使用主题的「关于页」需要手动创建：

1
hexo new page about

创建成功后修改 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

1
2
3
4
5
6
---
title: 标题
layout: about
---

这里写关于页的正文，支持 Markdown, HTML

WARNING

layout: about 必须存在，并且不能修改成其他值，否则不会显示头像等样式。

蚂蚁再小也是肉🥩！

上一篇: MapReduce详解 上一篇