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, StylusMarkdown 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.xmlbaidusitemap.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 必须存在,并且不能修改成其他值,否则不会显示头像等样式。


蚂蚁🐜再小也是肉🥩!


Hexo+Fluid主题博客部署
http://heibanbai.com.cn/posts/239e91f/
作者
黑伴白
发布于
2022年9月1日
许可协议

“您的支持,我的动力!觉得不错的话,给点打赏吧 ୧(๑•̀⌄•́๑)૭”

微信二维码

微信支付

支付宝二维码

支付宝支付