hexo配置与运行

hexo通过nodejs来实现静态网站开发。

文章以markdown格式保存,然后通过hexo根据主题输出对应的静态网站内容。

静态网站不需要php的动态支持,使用apache/nginx就可以实现访问。

安装

先安装npm

1
yaourt -S npm

查看npm源

1
2
$ npm get registry
https://registry.npmjs.org/

修改源为淘宝源

1
npm config set registry http://registry.npm.taobao.org/

修改后可以用上面的命令在看看有没有修改正确

按照官网流程安装软件和初始化

1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

输出为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$ sudo npm install hexo-cli -g   
[sudo] password for jackey:

added 57 packages, and audited 58 packages in 1m

11 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New minor version of npm available! 7.17.0 -> 7.20.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.20.0
npm notice Run npm install -g npm@7.20.0 to update!
npm notice


$ hexo init blog
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
npm notice
npm notice New minor version of npm available! 7.17.0 -> 7.20.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.20.0
npm notice Run npm install -g npm@7.20.0 to update!
npm notice
INFO Start blogging with Hexo!

$ npm install

added 1 package in 6s

$ hexo serve
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

如果没有换源,这个过程会非常慢。

打开命令行里面显示的地址,就会显示默认的页面。

index

配置

如果点击文章的话会发现,文章的网址是

1
http://localhost:4000/2021/07/20/hello-world/

默认使用日期+文章名来输出永久链接。

我们修改一下,在根目录有一个_config.yml的文件,打开后17行显示永久链接为:

1
permalink: :year/:month/:day/:title/

我修改为:

1
permalink: :categories/:title/

也就是类型+文章名,前提是在文章添加类型

在/scaffolds/文件夹下有文件模板,在post.md模板中

1
2
3
4
5
---
title: {{ title }}
date: {{ date }}
tags:
---

添加为

1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
tags:
categories: normal
---

这样在使用

1
hexo new post "post-name"

创建新文章时会自动添加。

插件

以下使用的所有插件都可以在hexo和github找到,我选择了我喜欢的插件。

hexo-generator-sitemap

用于生成网站的地图文件,此文件中包含网站的网站地址、页面地址、标签等等一切。

将此文件提交给搜索引擎后就可以通过百度/bing搜索到网站内容。

先安装

1
2
3
$ npm install hexo-generator-sitemap --save

added 1 package in 11s

在_config.yml(位置任意)添加

1
2
3
4
5
6
sitemap:
path: sitemap.xml
template: ./sitemap_template.xml
rel: false
tags: true
categories: true

在template一行有地图模板,GitHub库中作者提供了一个模板。

将其下载后命名为sitemap_template.xml,并正确设置路径。

当然,一般的做法是主题会自带地图配置,只需要安装这个包就可以了。

admin

后台管理插件

1
2
3
4
5
6
7
8
9
$ npm install hexo-bridge --save
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ hexo-bridge@1.0.6
added 19 packages from 14 contributors in 1.926s

17 packages are looking for funding
run `npm fund` for details

启动服务后在基本网址后添加bridge访问后台。

1
http://localhost:4000/bridge

admin

提供新建文章、实时预览等功能。

hexo-neat

网页内容压缩(主要是脚本、CSS文件、空行等)

安装软件包

1
npm install hexo-neat --save

@upupming/hexo-renderer-markdown-it-plus

由于显示Latex公式

安装软件包

1
npm install @upupming/hexo-renderer-markdown-it-plus --save

本站使用的就是这种方式显示公式。感觉挺好