我的自建博客之旅02之Hexo
上篇主要介绍了一下自己用过的文档或者博客项目,本篇就主要讲一下自己博客搭建的过程。
预览网址:https://dllcnx.com:18888
Hexo
其实Hexo严格来说,和Docker没啥关系,针对我来说,可能稍微能扯上点关系的就是我搭建好hexo配置后,配置了持续部署,而持续部署借助的docker环境在服务端进行编译构建的。
1.环境
- Node(官方建议Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本。本人版本v18.12.1)
- Git
2.初始化博客
针对不同hexo版本,其实也要注意Node的版本,建议都最新。
Hexo 版本 | 最低版本 (Node.js 版本) | 最高版本 (Node.js 版本) |
---|---|---|
7.0+ | 14.0.0 | latest |
6.2+ | 12.13.0 | latest |
6.0+ | 12.13.0 | 18.5.0 |
5.0+ | 10.13.0 | 12.0.0 |
初始化博客项目:
npx hexo init <folder>
cd <folder>
npm install
- scaffolds:模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来创建文件。Hexo 的模板是指在新建的文章文件中默认填充的内容。我们平时新建文章文件除了手动可以直接通过
npx hexo new <post|draft|page> <title>
,分别意思创建文章,草稿,页面文件。post文章页面会创建到source/_posts目录,会正常编译发布;draft草稿页面会创建到source/_drafts;page页面只要用于特殊页面,例如分类,标签,音乐等等自定义页面。这目录下的三个文件是执行对应创建命令的模版。 - source:资源文件夹是存放用户资源的地方。除
_posts
文件夹之外,开头命名为_
(下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到public
文件夹,而其他文件会被拷贝过去。除了主题以及博客系统配置。几乎博客相关的文章,标签等等资源都会在此目录,- _posts:文章目录
- _drafts:草稿目录,初始化项目一般没有,可以自己创建一个
- _config.yml:网站的配置信息。
- package.json:整个项目的模块依赖版本管理文件。里面有博客的编译,本地开发环境,清理缓存等等命令
npm run server
、npm run deploy
、npm run build
、npm run clean
,也有项目的依赖,后期根据自己的需要主题和插件都会将依赖加在里面。 - _config.landscape.yml:默认自带的主题配置,如果想用可以查看对应文档进行[配置](hexojs/hexo-theme-landscape: A brand new default theme for Hexo. (github.com))。本次我不使用这款主题,使用
hexo-theme-butterfly
。 - themes:老版本的主题会放在这个目录,现在主题支持模块盒文件两种模式,如果自己有对主题进行功能修改,代码改动需求的使用文件模式,不需要折腾的模块模式即可。
3.安装主题
npm i hexo-theme-butterfly
如果想修改主题源码,就使用文件模式。在themes目录下:
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git butterfly
修改 Hexo 根目錄下的 _config.yml,把主題改為 butterfly
theme: butterfly
安装 pug 以及 stylus 的渲染器:
npm i hexo-renderer-pug hexo-renderer-stylus
在 hexo 的根目录创建一个文件 _config.butterfly.yml,并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。( 注意: 复制的是主题的 _config.yml ,而不是 hexo 的 _config.yml)
注意:模块安装模式的主题 _config.yml 文件在根目录
node_modules
-hexo-theme-butterfly
-_config.yml
。注意: 不要把主题目录的 _config.yml 删掉
注意: 以后只需要在 _config.butterfly.yml 进行配置就行。如果使用了 _config.butterfly.yml, 配置主题的 _config.yml 将不会有效果。
Hexo会自动合并主题中的 _config.yml 和 _config.butterfly.yml里的配置,如果存在同名配置,会使用 _config.butterfly.yml 的配置,其优先度较高。
然后启动看看主题效果。
npm run server
4.创建文章
在source/_posts目录下从创建一个文章,注意是mardown文件。如果通过模版创建会按照自己的标题和创建时间定义好文章标头,但是如果是自己手动创建的文件,如果不自己添加标头,会导致文章标题显示Untitled。
---
title: test2
date: 2024-02-13 19:03:04
tags:
---
5.主题优化
其实主题相关的配置项太多了,具体查看Butterfly 安裝文檔(三) 主題配置-1 | Butterfly和Butterfly 安裝文檔(四) 主題配置-2 | Butterfly,我这边只针对主题常用功能进行配置。
站点配置
首先,应该先配置hexo项目本身的配置,即根目录_config.yml文件:
# Site
title: DLLCNX BLOG # 博客名称
subtitle