搭建博客hexo 安装hexo、配置hexo、hexo主题美化和添加live2d看板娘--详细步骤

一、安装hexo

1、下载安装软件
git：https://git-scm.com/downloads
node：https://nodejs.org/en/

2、安装好两个工具之后，以管理员身份打开命令提示符，查看node和npm的版本号

node -v		// 查看node的版本号
npm -v 		// 查看npm的版本号

3、安装npm ,输入命令：

npm install -g hexo-cli

4、安装hexo,输入命令：

 hexo init blog

5、部署静态网站，先打开一下博客，输入命令：

hexo s

在这里插入图片描述

6、在浏览器中打开命令中给我们提供的网址：http://localhost:4000
在这里插入图片描述

7、我们就可以在自己的安装hexo的磁盘中，找到blog > source > _posts，例如我的hexo安装在D盘， D:\blog\source_posts，这样我们缩写的blog文章就可以存放在这个文件夹里面。
在这里插入图片描述

二、配置博客：

8、下载主题，我下载的是GitHub上面的matery主题。
主题连接：https://github.com/blinkfox/hexo-theme-matery

9、使用命令将主题下载到自己的blog\themes文件加中。可用命令：

git clone https://github.com/blinkfox/hexo-theme-matery.git

在这里插入图片描述

10、下载好之后我们就可以切换主题了，打开blog的配置文件：
在这里插入图片描述

11、切换主题，将配置文件中的theme: landscape修改为：theme: hexo-theme-matery 保存修改
在这里插入图片描述

12、重新启动博客，输入命令：

hexo s

13、然后我们再打开博客，主题就切换过来了

三、hexo主题美化

14、此时，我们的主题虽然切换了，但是我们的blog还没有内容，只是一个模板，我们可以新建个分类页并对它进行编辑，（也可以添加更多的页面，丰富内容~）可用命令：

hexo new page "categories"

在这里插入图片描述

15、更多的主题美化可以参考一下几个网址
GitHub：
https://github.com/blinkfox/hexo-theme-matery
大佬的博客：
https://cungudafa.blog.csdn.net/article/details/106305840
https://blog.csdn.net/victoryxa/article/details/105841440

四、 Live2D看板娘

16、安装live2d,输入命令：

npm install --save hexo-helper-live2d

17、安装想要的模型,输入命令：

npm install live2d-widget-model-koharu

18、复制如下内容到hexo的_config.yml或者theme的_config.yml，也可以修改这段代码中的position,width,height等来控制显示位置以及大小

live2d:
  enable: true
  #enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/[email protected]/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-koharu
    # use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/[email protected]/assets/wanko.model.json # 你的自定义 url
  display:
    position: right
    width: 145
    height: 315
  mobile:
    show: true # 是否在移动设备上显示
    scale: 0.5 # 移动设备上的缩放       
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.8

19、重新启动blog，输入命令：hexo s ,当我们再次打开blog时，我们就可以看见我们的模型了
在这里插入图片描述