使用Hexo创作一个属于自己的blog

本文介绍如何使用Hexo框架搭建个性化博客，包括安装配置、主题选择、插件安装等关键步骤，并提供Shoka与Shokax主题的具体配置教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

Hexo-shoka因为作者大大的忙碌，已超过四年未进行维护与更新，推荐使用Hexo-shokax获得更好的体验，本站已切换至Shokax

Hexo-shokax：
- 此项目是shoka的一个二次开发版(算精神续作),致力于提高性能和优化魔改体验.网址链接
主要使用差异：
- Shoka的评论系统配置更为简单和便捷，Shokax的安全性更高和易于管理，但现在基本需要域名或者💸
文章同步更新于优快云和博客FuFan = FuFan’s Blog (fyfan.cn)

流程

Hexo框架的安装
搭建个人仓库
配置Hexo载入Shoka主题

Hexo框架的安装

安装之前请确保以安装Node.js

# 查看版本
Node -v
# 安装Hexo框架
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server #查看是否运行正常

Node.js下载：

下载 | Node.js 中文网 (nodejs.cn)

nodejs-release安装包下载_开源镜像站-阿里云 (aliyun.com)

个人仓库的搭建

使用Github来搭建博客

注册Github账号
创建仓库，仓库名选择 github名称.github.io
下载Git
使用Git绑定自己的Github账号
Hexo 绑定仓库

Git下载：

Git 官方下载

Git配置

基本配置

git config --global user.name "Name"
git config --global user.email "Email"

生成密钥

ssh-keygen -t rsa -C "Email"

密钥txt一般在[C盘/用户/user/.ssh]中，我们需要的是 id_ras.pub文件。

密钥用于绑定Github

在Settings-SSH and GPG keys中，将 id_ras.pub文件的内容复制黏贴进后保存

检测连接

ssh -T git@github.com
#连接成功会显示用户名

Hexo 绑定仓库

在根目录下的_config.yml中修改

deploy:
  type: 'git'
  repo: 你的github仓库地址
  branch: main #你的分支名称

修改完成后使用hexo d进行推送，如果正常则输入你的名字.github.io 访问查看是否成功

Shoka的安装

在根目录下也就是blog目录下右键选择用 Git Bash 打开文件夹

输入命令,等待安装完成

git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

安装完成后修改站点配置文件/_config.yml，把主题改为shoka

theme: shoka

_config.yml配置：

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: "你知道得太多了"

加入 minify 配置，压缩 css/js/html

minify:
  html:
    enable: true
    exclude: # 排除 hexo-feed 用到的模板文件
      - '**/json.ejs'
      - '**/atom.ejs'
      - '**/rss.ejs'
  css:
    enable: true
    exclude:
      - '**/*.min.css'
  js:
    enable: true
    mangle:
      toplevel: true
    output:
    compress:
    exclude:
      - '**/*.min.js'

Shoka启用需要安装渲染插件才可以正常显示:

依赖插件安装(lostyu.me)

安装后输入hexo三件套查看网页显示是否正常

hexo cl
hexo g
hexo s

因为某博的外链已不能使用会无法正常显示图片，查看下面的链接获得解决办法

Shoka使用自己的图床

Shokax的安装

相较于Shoka，Shokax的安装则更为方便和快速；

安装 ShokaX-CLI:

# hexo init
npm install shokax-cli --location=global
# cd your_blog
SXC install shokaX

安装完成后修改站点配置文件/_config.yml，把主题改为shokax

theme: shokax

_config.yml配置：

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基本配置

设置博客主页语言为中文

将<root>/thems/Shoka/example/source/_data/languages.yml中的zh-CN部分复制

在<root>/source/中新建_data文件夹在里面新建一个languages.yml文件，将刚复制的内容黏贴进去然后保存

打开根目录的配置文件<root>/_config.yml将language改为 zh-CN

新建笔记

在根目录下右键用git bash打开输入

hexo new ‘你的笔记名字’

然后将写好的markdown笔记复制进<root>/source/_post/‘你的笔记名字.md中保存

最后使用hexo三件套查看效果

设置Live2d

注：Live2d会占用带宽资源拖慢网页加载速度！

下载基本服务

npm install --save hexo-helper-live2d

下载喜欢的模型

预览：模型预览_看板娘模型预览-优快云博客

安装

npm install live2d-widget-model-haru #举例

_config.yml配置

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录 (相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  #scriptFrom: xxx/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式，是否仅替换 live2d tag 标签而非插入到所有页面中
  debug: false # 调试，是否在控制台输出日志
  model:
    use: live2d-widget-model-haru # 使用的 Live2d 模型名称
    # use: xxx/assets/koharu.model.json # 你的自定义 url
  display:
    position: right #显示位置
    width: 150
    height: 300
  mobile:
    show: true # 手机中是否展示

主题版本更新

注：Shoka主题已停止更新,仅适用Shokax主题，目前最高版本为Shokax v0.4.11

使用npm-check-updates

安装

npm install -g npm-check-updates

使用

#检测更新
ncu
#更新
ncu -u

特别注意！！！

如果没有关闭代码高光或者渲染器版本不是最新会出现代码块显示不全的问题

由于框架版本不同关闭方式也不同,需先查看版本

hexo version

V7.0.0及以下:

prismjs:
  enable: false
  
prismjs:
  enable: false

V7.0.0以上:

syntax_highlighter: false