搭建博客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

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

6、在浏览器中打开命令中给我们提供的网址:http://localhost:4000
搭建博客hexo 安装hexo、配置hexo、hexo主题美化和添加live2d看板娘--详细步骤_第2张图片

7、我们就可以在自己的安装hexo的磁盘中,找到blog > source > _posts,例如我的hexo安装在D盘, D:\blog\source_posts,这样我们缩写的blog文章就可以存放在这个文件夹里面。
搭建博客hexo 安装hexo、配置hexo、hexo主题美化和添加live2d看板娘--详细步骤_第3张图片

二、配置博客:

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

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

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

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

10、下载好之后我们就可以切换主题了,打开blog的配置文件:
搭建博客hexo 安装hexo、配置hexo、hexo主题美化和添加live2d看板娘--详细步骤_第5张图片

11、切换主题,将配置文件中的theme: landscape修改为:theme: hexo-theme-matery 保存修改
搭建博客hexo 安装hexo、配置hexo、hexo主题美化和添加live2d看板娘--详细步骤_第6张图片

12、重新启动博客,输入命令:

hexo s

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

三、hexo主题美化

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

hexo new page "categories"

搭建博客hexo 安装hexo、配置hexo、hexo主题美化和添加live2d看板娘--详细步骤_第7张图片搭建博客hexo 安装hexo、配置hexo、hexo主题美化和添加live2d看板娘--详细步骤_第8张图片

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时,我们就可以看见我们的模型了

你可能感兴趣的:(hexo,hexo,github)