Hexo

发布日期: 2024-02-23

更新日期: 2024-03-19

文章字数: 903

阅读时长: 3 分

阅读次数:

前言

搭建个人博客方法挺多的，可以下载开源项目，直接运行，零代码搭建，比如wordpress等等。也可以用一些工具初始化一个博客网站，也是零代码搭建，比如hexo。

什么是Hexo

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

安装

安装 Hexo 相当简单，只需要先安装下列应用程序即可：

Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
Git

安装Hexo

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

$ npm install -g hexo-cli

进阶安装和使用

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

$ npm install hexo

安装完成后，查看版本

# hexo v
hexo v
INFO  Validating config
hexo: 7.1.1
hexo-cli: 4.3.1
os: darwin 23.1.0 14.1.1

node: 21.6.2
acorn: 8.11.3
ada: 2.7.4
ares: 1.26.0
base64: 0.5.1
brotli: 1.1.0
cjs_module_lexer: 1.2.2
cldr: 43.1
icu: 73.2
llhttp: 9.1.3
modules: 120
napi: 9
nghttp2: 1.59.0
openssl: 3.2.1
simdjson: 3.6.3
simdutf: 4.0.8
tz: 2023c
undici: 5.28.3
unicode: 15.0
uv: 1.47.0
uvwasi: 0.0.19
v8: 11.8.172.

说明安装成功了

初始化一个项目

hexo init blog

├── _config.landscape.yml
├── _config.yml
├── node_modules
├── package.json
├── scaffolds
├── source
├── themes
└── yarn.lock

安装主题

比如安装next主题，进入theme文件夹，执行

git clone https://github.com/theme-next/hexo-theme-next next

修改配置

打开安装文件夹下_config.yml 文件，修改 theme 后面的名字为你刚才安装的主题，比如 next。

部署

hexo g

启动

hexo s

访问

http://localhost:4000

写作

hexo new [layout] <title>
# 例如：hexo new first-blog

您可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

布局（Layout）

Hexo 有三种默认布局：post、page 和 draft。在创建这三种不同类型的文件时，它们将会被保存到不同的路径；而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

布局	路径
`post`	`source/_posts`
`page`	`source`
`draft`	`source/_drafts`

刷新首页看可以看见first-blog文章了，但是目前还不能编辑，需要安装编辑文档的插件

安装插件

在线编辑文档插件

npm install hexo-admin

访问：localhost:4000/admin

代码高亮

由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：

npm i -S hexo-prism-plugin

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: false
  wrap: true
  hljs: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

作者使用了https://github.com/blinkfox/hexo-theme-matery 主题，官网介绍了好多插件，可以自行安装。

作者搭建的博客代码：https://github.com/ZBIGBEAR/blog