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

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

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

前言

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.ymllanguage改为 zh-CN

新建笔记

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

hexo new ‘你的笔记名字’

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

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

设置Live2d

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

  1. 下载基本服务
npm install --save hexo-helper-live2d
  1. 下载喜欢的模型

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

  1. 安装
npm install live2d-widget-model-haru #举例
  1. _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 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凡凡的程序员之路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值