# Hexo + ShokaX 博客搭建

参考:

  1. 官方文档
  2. 知乎用户

# 前置准备

  • 安装 Node.js:Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,用于构建高性能、可扩展的服务器端和网络应用程序。

    • Windows 用户在官网下载安装即可
    • Linux 用户则可以使用 nvm 来管理 Node.js 的版本,参考这个仓库
  • 安装 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 one

      work 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 index

      examine 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 status

      grow, 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 GPG

      collaborate (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 代码包,但是其:

  • 较早版本的性能和速度较慢。
  • 在处理重复依赖时效率不高。

因此出现了 yarnpnpm

  • yarn 是由 Facebook 开发的一种新的包管理工具,旨在解决 npm 的一些性能和一致性问题。
  • pnpm 是一个高效的包管理工具,注重磁盘空间利用和安装速度,采用了独特的链接方式来管理依赖。

出于速度与性能的考虑,更推荐使用 pnpm

# Hexo 的安装

要使用 pnpm 安装 hexo-cli ,请按照以下步骤操作:

  1. 配置中国大陆的镜像源(如淘宝):

    npm config set registry https://registry.npmmirror.com
  2. 通过以下命令安装 pnpm

    npm install -g pnpm

    其中, -g 参数表示 global ,意为全局安装,此时 pnpm 包会被安装在我们的 Node.js 安装目录的 node_modules 文件夹中。

  3. 使用 pnpm 安装 hexo-cli

    pnpm add -g hexo-cli

这条命令会全局安装 hexo-cli ,使你可以在终端中使用 hexo 命令来管理你的 Hexo 博客。

# 站点生成

现在我们来生成个人博客项目,例如我们的项目名叫做 WhyLIM-shokax

我们可以有两种方法来生成这个项目:

  1. 手动创建一个 WhyLIM-shokax 目录,然后在此目录打开终端,输入:

    hexo init
  2. 使用 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。

image-20240521170919101

# 初始化 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 文件中的 themeshokax

刷新页面即可看到新主题

image-20240522155439876

由于我们使用包管理器安装了 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
更新于

请我喝[茶]~( ̄▽ ̄)~*

WhyLIM 微信支付

微信支付

WhyLIM 支付宝

支付宝