# Hexo + ShokaX 博客搭建
参考:
# 前置准备
-
安装 Node.js:Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,用于构建高性能、可扩展的服务器端和网络应用程序。
-
安装 Git:Git 是一个分布式版本控制系统,能够高效地处理项目的版本管理和代码协作。
- Windows 用户在官网下载安装即可
- Linux 用户可以直接使用
sudo apt install git
安装
-
检测是否安装成功。在终端中分别输入以下命令,看是否获得类似的输出:
-
node -v
v20.11.1
-
git
usage: git [-v | --version] [-h | --help] [-C
<path>
] [-c<name>
=<value>
]
[--exec-path[=<path>
]] [--html-path] [--man-path] [--info-path]
[-p | --paginate | -P | --no-pager] [--no-replace-objects] [--bare]
[--git-dir=<path>
] [--work-tree=<path>
] [--namespace=<name>
]
[--config-env=<name>
=<envvar>
]<command>
[<args>
]These are common Git commands used in various situations:
start a working area (see also: git help tutorial)
clone Clone a repository into a new directory
init Create an empty Git repository or reinitialize an existing onework on the current change (see also: git help everyday)
add Add file contents to the index
mv Move or rename a file, a directory, or a symlink
restore Restore working tree files
rm Remove files from the working tree and from the indexexamine the history and state (see also: git help revisions)
bisect Use binary search to find the commit that introduced a bug
diff Show changes between commits, commit and working tree, etc
grep Print lines matching a pattern
log Show commit logs
show Show various types of objects
status Show the working tree statusgrow, mark and tweak your common history
branch List, create, or delete branches
commit Record changes to the repository
merge Join two or more development histories together
rebase Reapply commits on top of another base tip
reset Reset current HEAD to the specified state
switch Switch branches
tag Create, list, delete or verify a tag object signed with GPGcollaborate (see also: git help workflows)
fetch Download objects and refs from another repository
pull Fetch from and integrate with another repository or a local branch
push Update remote refs along with associated objects'git help -a' and 'git help -g' list available subcommands and some
concept guides. See 'git help<command>
' or 'git help<concept>
'
to read about a specific subcommand or concept.
See 'git help git' for an overview of the system.
-
# 安装 Hexo
# 什么是 Hexo?
Hexo 是一个快速、简单且强大的静态博客框架。它通过 Markdown 文件生成静态网页,并支持多种插件和主题,使用户能够轻松创建和管理个人博客或网站。
# 题外话
在 Node.js 中,我们可以使用 npm (Node Package Manager)
来安装、管理和共享 JavaScript 代码包,但是其:
- 较早版本的性能和速度较慢。
- 在处理重复依赖时效率不高。
因此出现了 yarn
和 pnpm
:
yarn
是由 Facebook 开发的一种新的包管理工具,旨在解决 npm 的一些性能和一致性问题。pnpm
是一个高效的包管理工具,注重磁盘空间利用和安装速度,采用了独特的链接方式来管理依赖。
出于速度与性能的考虑,更推荐使用 pnpm
。
# Hexo 的安装
要使用 pnpm
安装 hexo-cli
,请按照以下步骤操作:
-
配置中国大陆的镜像源(如淘宝):
npm config set registry https://registry.npmmirror.com
-
通过以下命令安装
pnpm
:npm install -g pnpm
其中,
-g
参数表示global
,意为全局安装,此时 pnpm 包会被安装在我们的 Node.js 安装目录的node_modules
文件夹中。 -
使用
pnpm
安装hexo-cli
:pnpm add -g hexo-cli
这条命令会全局安装 hexo-cli
,使你可以在终端中使用 hexo
命令来管理你的 Hexo 博客。
# 站点生成
现在我们来生成个人博客项目,例如我们的项目名叫做 WhyLIM-shokax
我们可以有两种方法来生成这个项目:
-
手动创建一个
WhyLIM-shokax
目录,然后在此目录打开终端,输入:hexo init
-
使用 hexo 创建这个
WhyLIM-shokax
目录,在父目录中打开终端,输入:hexo init WhyLIM-shokax
例如,我在 D:\Study\Project
中执行 hexo init WhyLIM-shokax
,则会自动生成 D:\Study\Project\WhyLIM-shokax
目录。
现在我们可以在 WhyLIM-shokax
目录中执行 hexo s
来生成静态访问连接来进行访问,默认的端口是 4000。
Hexo 的默认主题是 landscape。
# 初始化 ShokaX 主题
使用 ctrl + x
暂停项目,然后全局安装 ShokaX-CLI:
# hexo init | |
pnpm add -g shokax-cli |
在 WhyLIM-shokax
目录中使用 ShokaX-CLI 安装 shokaX,包管理器使用 pnpm
:
SXC install shokaX -pm pnpm |
更改根目录中 _config.yml
文件中的 theme
为 shokax
刷新页面即可看到新主题
由于我们使用包管理器安装了 shokaX 主题,所以其目录会出现在 node_modules
下
node 包通常是比较多的,为了修改方便,我们可以为其创建目录链接
在 PowerShell 中可以使用如下的命令
New-Item -ItemType Junction -Path ".\themes\shokax" -Target ".\node_modules\hexo-theme-shokax" |
如果你使用 cmd:
mklink /J ".\themes\shokax" ".\node_modules\hexo-theme-shokax" |
# 修改站点配置
站点配置文件为 /_config.yml
# markdown 配置
markdown: | |
render: # 渲染器设置 | |
html: false # 过滤 HTML 标签 | |
xhtmlOut: true # 使用 '/' 来闭合单标签 (比如 <br />)。 | |
breaks: true # 转换段落里的 '\n' 到 <br>。 | |
linkify: true # 将类似 URL 的文本自动转换为链接。 | |
typographer: | |
quotes: "“”‘’" | |
plugins: # markdown-it 插件设置 | |
- plugin: | |
name: markdown-it-toc-and-anchor | |
enable: true | |
options: # 文章目录以及锚点应用的 class 名称,shoka 系主题必须设置成这样 | |
tocClassName: "toc" | |
anchorClassName: "anchor" | |
- plugin: | |
name: markdown-it-multimd-table | |
enable: true | |
options: | |
multiline: true | |
rowspan: true | |
headerless: true | |
- plugin: | |
name: ./markdown-it-furigana | |
enable: true | |
options: | |
fallbackParens: "()" | |
- plugin: | |
name: ./markdown-it-spoiler | |
enable: true | |
options: | |
title: "你知道得太多了" | |
autoprefixer: | |
exclude: | |
- "*.min.css" |
# 停用默认代码高亮
如果你的 hexo 版本 <= 6.3.0,修改原文件中的:
highlight: | |
enable: false | |
prismjs: | |
enable: false |
如果你的 hexo 版本 >= 7.0.0,修改原文件中的:
syntax_highlighter: false |
# 文件压缩
官方建议使用 hexo-lightning-minify,如果你的 SXC core 版本为 0.3+,那么该包已经被安装了,否则:
pnpm add hexo-lightning-minify |
在 /_config.yml
文件添加配置:
minify: | |
js: | |
enable: true # ShokaX 自带 esbuild 优化,不建议开启,其他主题建议开启 | |
exclude: # 排除文件,接受 string [],需符合 micromatch 格式 | |
css: | |
enable: true # 开启 CSS 优化 | |
options: | |
targets: ">= 0.5%" # browserslist 格式的 target | |
exclude: # 排除文件,接受 string [],需符合 micromatch 格式 | |
html: | |
minifier: html-minifier | |
enable: true # 开启 HTML 优化 | |
options: | |
comments: false # 是否保留注释内容 | |
exclude: # 排除文件,接受 string [],需符合 micromatch 格式 | |
image: | |
enable: true # 开启图片预处理和自动 WebP 化 | |
options: | |
avif: false | |
webp: true # 预留配置项,现版本无作用 | |
quality: 80 # 质量,支持 1-100 的整数、lossless 或 nearLossless | |
effort: 2 # CPU 工作量,0-6 之间的整数 (越低越快) | |
replaceSrc: true # 自动替换生成 html 中的本地图片链接为 webp 链接 | |
# 我们更建议使用 Service Worker 来在用户侧实现 replaceSrc 的功能,这将能够以一种侵入式更小的方式实现链接替换 | |
exclude: |
# 修改主题配置
主题配置的模版在 /node_modules/hexo-theme-shokax/_config.yml
为了方便主题升级,我们在根目录复制一个 _config.shokax.yml
文件来进行自定义配置
详细的配置可以参考官方文档进行
配置、文件都修改完后,重新构建站点并启动服务器
在 PowerShell 中:
hexo clean; hexo g; hexo s |
如果使用 Linux:
hexo clean && hexo g && hexo s |