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

前言

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

• Hexo-shokax：

  • 此项目是shoka的一个二次开发版(算精神续作),致力于提高性能和优化魔改体验.网址链接

• 主要使用差异：

  • Shoka的评论系统配置更为简单和便捷，Shokax的安全性更高和易于管理，但现在基本需要域名或者💸

  文章同步更新于优快云和博客FuFan = FuFan’s Blog (fyfan.cn)

---

流程

1. Hexo框架的安装
2. 搭建个人仓库
3. 配置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来搭建博客

1. 注册Github账号
2. 创建仓库，仓库名选择 github名称.github.io
3. 下载Git
4. 使用Git绑定自己的Github账号
5. 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会占用带宽资源拖慢网页加载速度！

1. 下载基本服务

npm install --save hexo-helper-live2d

2. 下载喜欢的模型

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

3. 安装

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

4. _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