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

一、安装hexo

1、下载安装软件
     git：https://git-scm.com/downloads
     node：https://nodejs.org/en/
2、安装好两个工具之后，以管理员身份打开下令提示符，查察node和npm的版本号

1. node -v                // 查察node的版本号npm -v                 // 查察npm的版本号

复制代码

3、安装npm ,输入下令：

1. npm install -g hexo-cli

复制代码

4、安装hexo,输入下令：

1. hexo init blog

复制代码

5、摆设静态网站，先打开一下博客，输入下令：

1. 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文件加中。可用下令：

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

复制代码

10、下载好之后我们就可以切换主题了，打开blog的设置文件：

11、切换主题，将设置文件中的theme: landscape修改为：theme: hexo-theme-matery 生存修改

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

1. hexo s

复制代码

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

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

1. 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,输入下令：

1. npm install --save hexo-helper-live2d

复制代码

17、安装想要的模子,输入下令：

1. npm install live2d-widget-model-koharu

复制代码

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

1. 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/live2d-widget@3.x/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/live2d-widget-model-wanko@1.0.5/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时，我们就可以瞥见我们的模子了

来源：https://blog.csdn.net/weixin_46622106/article/details/112059798
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！