Hexo 是一款基于 Node.js 的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在 GitHub 和 Coding 上，是搭建博客的首选框架。

准备工作

1. git && github 账号
2. Node.js
3. hexo 框架

# 使用国内镜像进行加速
npm install hexo-cli -g --registry=https://registry.npm.taobao.org


# 测试安装结果
hexo -v

Hexo 本地部署

1. 创建一个空文件夹，存放 Hexo 博客文件。
2. 在文件夹目录下执行 hexo init 命令 hexo 会自行下载所需内容。
3. 使用 hexo s 启动博客 默认端口 4000
4. 使用 hexo n "我的第一篇博客文章.md"创建第一篇博客文章
5. 使用 hexo g 渲染博客 hexo clean可以清理这些生成结果
6. 使用 hexo s 启动本地博客服务，默认端口为 4000
7. 远程部署到 github

• 创建一个 [用户名].github.io 仓库,后序可通过 [用户名].github.io 进行访问

• 在 blog 文件夹下安装 hexo-delpoyer-git 工具 忽略 warning

  cnpm install hexo-deployer-git --save

• 配置_config.yml 中 deploy 部分

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
## 部署方式
type: 'git'
## 部署仓库
repo: 'https://github.com/TinyBeer/tinybeer.github.io.git'
## 部署分支
branch: 'main'

• 使用hexo d完成远程部署

个性化

主题修改

以 yilia 主题为例子

• 克隆

  # 克隆到 theme 目录下 git clone https://github.com/litten/hexo-theme-yilia.git ./themes/yilia

• 修改 _config.yml 中 theme 部分

  theme: yilia

• 解决模块缺失问题

  npm i hexo-generator-json-contennt --save

修改作者

依旧是_config.yml文件

author: Tiny Beer

修改头像

此处需要取 yili 主题内的_config.yml文件

#你的头像url
avatar: 你的头像图片路径

图片管理

_config.yml 开启后会在本地保存图片

post_asset_folder: true

文章截断

使用<!--more-->

增加标签类型

yilia 的_config.yml

menu:
  主页: /
  随笔: /tags/随笔/
  学习笔记: /tags/学习笔记/

如果需要使用英文路径并保留中文标签可以修改 hexo 的配置文件进行映射。

tag_map:
  '玩虾': playgroun
  'Golang': golang
  '手册': manual

看板娘

插件安装

# 安装
npm i --save hexo-helper-live2d
# 卸载
npm uninstall hexo-helper-live2d

模型下载

npm i live2d-widget-model-z16

## 其他可用模型
# live2d-widget-model-chitose
# live2d-widget-model-epsilon2_1
# live2d-widget-model-gf
# live2d-widget-model-haru/01
# live2d-widget-model-haru/02
# live2d-widget-model-haruto
# live2d-widget-model-hibiki
# live2d-widget-model-hijiki
# live2d-widget-model-izumi
# live2d-widget-model-koharu
# live2d-widget-model-miku
# live2d-widget-model-ni-j
# live2d-widget-model-nico
# live2d-widget-model-nietzsche
# live2d-widget-model-nipsilon
# live2d-widget-model-nito
# live2d-widget-model-shizuku
# live2d-widget-model-tororo
# live2d-widget-model-tsumiki
# live2d-widget-model-unitychan
# live2d-widget-model-wanko
# live2d-widget-model-z16

启用
在 hexo 配置文件中加上

#看板娘
live2d:
  enable: true
  pluginModelPath: assets/
  model:
    # use: live2d-widget-model-z16 #模板目录，在node_modules里,自己选择
    use: live2d-widget-model-tororo
    scale: 1
    # hHeadPos: 0.5
    # vHeadPos: 0.618
  display:
    position: left
    width: 300
    height: 600
    hOffset: 0
    vOffset: -20
  mobile:
    show: false # 手机显示开关，建议关闭
    scale: 0.5
  react:
    opacityDefault: 0.8
    opacityOnHover: 0.2