安装nvm及Git环境

很多情况下,为了适应工作、学习我们需要在一个电脑里使用不同版本的node,在切换使用频繁的情况下,就会陷入 卸载↔安装 的怪圈,这时候你需要一个趁手的版本管理工具(nvm)。

安装教程及设置请自定百度,此处给出我自己本机的全局安装配置:

c:\user\Administrator.npmrc中以下两项配置设置为nodejs安装路径,
以本机为例:nvm安装路径:E:\nvm\nvm
nodejs路径:E:\nvm\nodejs
prefix=E:\nvm\nodejs
cache=E:\nvm\nodejs\node_cache

切记:安装完成后先进行验证环境是否安装成功。

安装Hexo框架

首先选择一个磁盘作为你博客文件的存放位置,然后新建一个文件夹,比如名为 blogtest 的文件夹,创建完后,先不要点进去,在此处点击鼠标右键,选择 Git Bash Here,然后依次输入如下命令:

1
npm install -g hexo-cli

等上一个命令完成后,再输入下面命令:

1
2
3
4
hexo init <新建文件夹的名称>  #初始化文件夹
cd <新建文件夹的名称>

npm install # 安装博客所需要的依赖文件

注意:后续的命令均需要在站点目录下(即文件夹内)使用 Git Bash 运行。

等待运行完成,文件夹中多了许多文件。此时 Hexo 框架的本地搭建已经完成了,我们来运行一下看看。
命令继续输入以下命令进行本地验证:

1
hexo g && hexo s

浏览器中打开 http://localhost:4000 或 127.0.0.1:4000,可以看到一个网页,说明 Hexo 博客已经成功在本地运行。

更换主题

默认的 Hexo 主题为 landscape,我选择了 Butterfly 作为博客主题

Butterfly 主题使用

1) Butterfly 安装
在博客的根目录执行

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

安装完成后可在 根目录/themes/butterfly 查看主题文件夹

2) 应用主题
修改博客根目录的配置文件 _config.yml,把主题改为 butterfly,
备注:此部分可采用2.1.4主题升级方式,通过复制主题目录下的_config.yml到根目录进行配置。

1
theme: butterfly

3) 安装插件
如果你没有 pug 和 stylus 的渲染器,需要安装

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

4) 升级建议
把主题文件夹中的_config.yml 复制到 Hexo 根目录里,同时重新命名为 _config.butterfly.yml。以后只需要在_config.butterfly.yml进行配置就行。Hexo会自动合并主题中的_config.yml和 _config.butterfly.yml里的配置,如果存在同名配置,会使用_config.butterfly.yml的配置,其优先度较高。

添加看板娘

clipboard.png

1)下载 live2D
https://github.com/stevenjoezhang/live2d-widget
先在github 上将文件压缩包下载下来,然后解压,放置在博客根目录/themes/butterfly/source/中
(我这里是把文件夹名改为live2d-widget)
clipboard2.png

2)更改 autoload.js 文件
更改 live2d-widget 下的 autoload.js 文件,其实只需要将第二行注释掉,取消第三行的注释即可
clipboard3.png

3)添加资源文件
在博客根目录的主题配置文件 _config.butterfly.yml 中找到 inject 并修改,引入 css 文件和 js 文件即可
clipboard4.png

4)启用 live2d
可以在 博客根目录的主题配置文件 _config.butterfly.yml 最后新增以下内容

1
2
live2d:
enable: true

最后,执行命令即可看到效果(同时要注意 public 文件夹中有没有生成 live2d-widget 文件夹)
clipboard5.png

1
2
3
hexo clean
hexo g
hexo s

【参考】
 Butterfly官网:https://butterfly.js.org/