Hexo 搭建静态博客记录
1
2
3
4
| - hexo命令补全
- night模式
如SEO、评论系统、个人头像、博客分享、订阅功能、High功能、404网页设置
|
Hexo 快速入门
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用MarkDown解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
官网：https://hexo.io/zh-cn/
安装
（1）安装准备
安装 Hexo 只需要先安装：Node.js、Git。Mac推荐使用Homebrew安装。
（2）安装Hexo
1
| $ npm install -g hexo-cli
|
注：npm可能需要换源，自行搜索。新手推荐全局安装，即第一条命令。
初始化使用
（1）初始化一个目录
1
2
3
| $ hexo init <folder>
$ cd <folder>
$ npm install
|
大概意思就是初始化一个目录，切换到这个目录下，然后执行相关依赖安装。
初始化完成后，目录下文件有：
1
2
3
4
5
6
7
8
9
10
11
| .
├── _config.yml #网站的配置信息
├── package.json #应用程序的信息
├── scaffolds #模版文件夹，里面存放的是新建文章自动填充的内容
| ├── draft.md
| ├── page.md
| └── post.md
├── source #md文章存放处
| ├── _drafts
| └── _posts
└── themes #主题文件夹
|
（2）简单运行查看效果
浏览器访问 http://localhost:4000/ 即可查看效果，默认有一篇hello world的文章。
基本配置
_config.yml 这个文件是 hexo 的基本配置文件，里面的内容：
title：网站标题subtitle：副标题description：网站描述keywords：网站关键词author：作者language：语言timezone：时区
更多配置请看官网文档：https://hexo.io/zh-cn/docs/configuration
写作流程
（1）hexo写作非常简单，只需在目录下执行
就会在source目录下生成一篇同名的md文件，比如source/_posts/my-first-blog.md，接下来只需要在这个md文件下写作就行了。
（2）了解更多
打开这个文件可以看到一下内容，这是用来帮助hexo了解文章内容的必要信息。
1
2
3
4
5
| ---
title: my_first_blog
date: 2023-10-27 15:17:19
tags:
---
|
前述scaffolds文件保存了新建文章自动发布填充的内容（称之为布局），到这个目录下浏览 post.md 信息
1
2
3
4
5
| ---
title: {{ title }}
date: {{ date }}
tags:
---
|
不难发现与之前内容十分对应，后续也可自定义修改这个文件，配置更多关于文章的信息。
分类与标签
推荐阅读https://hexo.io/zh-cn/docs/front-matter
在md文章的顶部有两条水平线组成的元信息区域，在这里可以设置文章的分类与标签信息。
1
2
3
4
5
6
7
8
9
10
| ---
title: 标题
date: 2024-6-1 10:00:00
toc: true
categories:
- 数据结构
- 二叉树
tag:
- 深度优先搜索
---
|
可以添加多个标签。
部署
先认识一些简单的hexo命令与原理。
Hexo命令
1
2
3
4
5
6
7
| hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署
hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令
|
关于部署，有两种部署方式。一种是本地利用hexo部署，每次写文章后都要重新部署一遍。另一种是利用GitHub Action自动部署，每次只需提交源代码。
生成式部署
（1）安装插件
（2）修改配置
1
2
3
4
| deploy:
- type: git
repo: https://github.com/.../...
branch: master
|
然后通过 hexo d（hexo deploy）来部署到 GitHub pages 上。
个性化配置
主题
整个主题基本上是用 jsx 来写的，样式是用 styl 写的。
Icarus 主题配置
1
2
| $ npm install hexo-theme-icarus
$ hexo config theme icarus
|
插件
安装插件都可以通过 npm install ... --save 来安装
- hexo-abbrlink 生成一个短的永久链接
- hexo-blog-encrypt 文章加密
- Hero-generator-index/archive/category/tag 生成主页 / 归档 / 分类 / 标签文件夹
- Hero-generator-feed RSS订阅生成
- Hexo-generator-index-pintop 置顶文章
主题魔改优化
icarus主题备份
（1）创建项目
1
2
3
4
5
| hexo init myBolg
cd myBlog
cd themes
git clone https://github.com/ppoffice/hexo-theme-icarus.git
mv hexo-theme-icarus icarus
|
（2）安装依赖
1
2
3
4
| yarn install
npm install
npm install semver
yarn add bulma-stylus@0.8.0 hexo-component-inferno@^2.0.2 hexo-pagination@^2.0.0 hexo-renderer-inferno@^0.1.3 hexo-renderer-stylus@^2.0.0 inferno@^7.3.3 inferno-create-element@^7.3.3
|
（3）运行
文章两栏
主题默认是三栏布局，在阅读文章时显得有些拥挤，可以通过配置的方式把所有文章变为两栏布局。
新建_config.post.yml，然后配置widget。但这样做文章仍然只有一栏的宽度，因此直接修改主题样式文件。
1
2
3
4
5
6
| diff:layout/layout.jsx
<Head site={site} config={config} helper={helper} page={page} />
- <body class={`is-${columnCount}-column`}>
+ <body class={`is-3-column`}>
<Navbar config={config} helper={helper} page={page} />
|
1
2
3
4
5
6
| diff:layout/layout.jsx
'is-12': columnCount === 1,
- 'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
+ 'is-8-tablet is-8-desktop is-9-widescreen': columnCount === 2,
'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
|
1
2
3
4
5
6
7
8
9
10
| diff:layout/common/widgets.jsx
function getColumnSizeClass(columnCount) {
switch (columnCount) {
case 2:
- return 'is-4-tablet is-4-desktop is-4-widescreen';
+ return 'is-4-tablet is-4-desktop is-3-widescreen';
case 3:
return 'is-4-tablet is-4-desktop is-3-widescreen';
}
|
优化不同屏幕大小下的宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| diff:include/style/responsive.styl
+widescreen()
+ .is-3-column .container
+ max-width: $widescreen - $gap
+ width: $widescreen - $gap
+
.is-1-column .container, .is-2-column .container
max-width: $desktop - 2 * $gap
width: $desktop - 2 * $gap
+fullhd()
+ .is-3-column .container
+ max-width: $fullhd - 2 * $gap
+ width: $fullhd - 2 * $gap
+
.is-2-column .container
max-width: $widescreen - 2 * $gap
width: $widescreen - 2 * $gap
|
修改主页的宽度
1
2
3
4
5
6
7
| diff:layout/layout.jsx
'is-12': columnCount === 1,
- 'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
+ 'is-8-tablet is-8-desktop is-9-widescreen': columnCount === 2,
- 'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
+ 'is-9-tablet is-9-desktop is-6-widescreen': columnCount === 3
|
增加一个关于界面
然后就会产生一个 source/about/index.md 文件，直接编辑这个文件就行。
经谷歌，可以直接在index.md中写html代码，
又搜索之后，找到了答案：将index.md改名为index.html。修改之后，马上显示正常了。
还有，默认页面中title为about，不要忘记修改为你想要的标题。
（1）_config.icarus.yml文件新增
1
2
3
| beian：
title：xx
url：xx
|
（2）node_modules\hexo-theme-icarus\layout\common\footer.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| const {
logo,
logoUrl,
siteUrl,
siteTitle,
siteYear,
author,
links,
showVisitorCounter,
visitorCounterTitle,
/* 添加下面这行代码 */
beian
} = this.props;
<a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>
{/* 添加下面这行代码 */}
<br /><a href={beian.url}>{beian.title}</a>
|