首先：本文基于CentOS 8.5 64位，其他操作系统请注意修改对应命令关键字，并且本文只介绍Hexo部署的方法和过程

文章目录

前情提要
〇、懒人版
一、环境配置
二、插件安装
三、自建api
- 1，安装PHP
- - ①，安装PHP
  - - 添加 EPEL 和 REMI 仓库
    - 启用PHP 7.4 Remi 仓库
    - 安装PHP 7.4
  - ②，安装PHP扩展
  - ③，配置
- 2，安装Apache
- - ①，安装Apache
  - ②，配置Apache
- *3，Nginx结合PHP
- 4，部署项目
- - ①，测试
  - ②，部署项目
  - ③，访问项目
  - ④，配置项目
四、效果展示
版权声明

前往闪闪の小窝获取更佳的阅读体验

前情提要

效果查看：闪闪の小窝

本人在给自己的Hexo博客搭建live2d过程中踩过许多坑，期间也试过使用@EYHN大佬封装好的插件[hexo-helper-live2d]来加载并显示模型，期间也找到了其他人基于此的修改版本[live2d_src]，但是确实因为官方版本[live2d-widget]仍在更新，其他路我都走过一遍出了种种问题，我解决后效果也达不到预期，自定义程度不足加上我能力有限（指只会看着文档走不会自己去改源码）等……所以我最终还是选择直接走官方版本这条路……

其他博客系统可以直接去官方库里选自己系统对应的方法来完成看板娘的搭建

效果图：

〇、懒人版

注：如果你不想进行更多自定义配置等，只想直接用cdn以启用live2d的话，这样即可（注意单引号）：

custom_html: '<!--live2d--><script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
'

在主题配置文件修改完成后执行命令刷新博客界面就可以了
本人在博客中使用pm2守护hexo运行进程使得hexo可以长期后台运行，详见此处
我的pm2守护的进程目前只有一个hexo博客，具体你的hexo进程跑在哪个序号，自己通过pm2 list命令查询

pm2 delete 0

重新编译一下博客文件进行配置文件修改后的更新

hexo g

重新启动博客运行脚本

pm2 start hexo_run.js

完成，如果不想对看板娘进行自定义就可以退出本博客了

一、环境配置

插件需要 Font Awesome 图标支持，以 Font Awesome v6 为例，在 <head> 中加入：

<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css">

此步骤在Hexo中的配置，如果你已经使用了Hexo主题，那遵循主题文档进行外部css自定义即可，我这以Fluid主题的配置为例：
在_config.fluid.yml文件中找到custom_head选项并填入如下代码即可（注意单引号）

custom_head: '<!--Font Awesome 图标支持--><link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css">
'

二、插件安装

进入你博客根目录的source文件夹（/path/to/意为去你文件夹的路径，毕竟咱也不知道你具体哪个路径）

cd /path/to/blog/source

克隆仓库

git clone https://github.com/stevenjoezhang/live2d-widget.git

为了避免这些文件被 Hexo 插件错误地修改，可能需要设置一下skip_render（避免hexo clean的时候清理了，不过现在的hexo好像不会去删用户自建的文件夹了……）
在_config.yml文件找到skip_render，写入以下内容（live2d-api后面会用到）

skip_render: - 'live2d-widget/*'- 'live2d-api/*'

克隆完仓库、改完配置文件别忘了要重新编译一下（别忘了是在blog文件夹中）

pm2 delete 0
hexo g
pm2 start hexo_run.js

修改 autoload.js 中的常量live2d_path为live2d-widget这一目录的 URL
比如说，如果你能够通过

https://example.com/path/to/live2d-widget/live2d.min.js

访问到 live2d.min.js，那么就把 live2d_path 的值修改为

https://example.com/path/to/live2d-widget/

路径末尾的/一定要加上。具体可以参考autoload.js内的注释。
完成后，在你要添加看板娘的界面，也就是Hexo主题配置文件里加入对autoload.js的引用

custom_html: '<!--live2d--><script src="https://moechun.fun/live2d-widget/autoload.js"></script>
'

传统艺能重新编译……

pm2 delete 0
hexo g
pm2 start hexo_run.js

至此，看板娘已经可以使用了，但是还没自建api所以自定义程度不高

三、自建api

这一步不管怎么说都建议做，不做就换一下autoload.js的cdnPath，因为jsdelivr在大陆现在时而可以时而不行，

// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {Promise.all([loadExternalResource(live2d_path + "waifu.css", "css"),loadExternalResource(live2d_path + "live2d.min.js", "js"),loadExternalResource(live2d_path + "waifu-tips.js", "js")]).then(() => {initWidget({waifuPath: live2d_path + "waifu-tips.json",// apiPath: "https://live2d.fghrsh.net/api/",cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/" });});
}
// initWidget 第一个参数为 waifu-tips.json 的路径，第二个参数为 API 地址
// API 后端可自行搭建，参考 https://github.com/fghrsh/live2d_api
// 初始化看板娘会自动加载指定目录下的 waifu-tips.json

待补充……我发现我建的出问题了……

问题已经解决，我咕咕咕了好久终于这两天给整好了，太多时间花在错误的配置上了……

live2d_api项目地址：点击前往

我是学后端的，在学java，PHP我是一点也不懂啊，而且作者也没有写文档，就说

环境要求
- PHP 版本 >= 5.2
- 依赖 PHP 扩展：json

既然是要用作api，肯定是部署在服务器上的一个项目，所以首先我们要干的第一步

1，安装PHP

①，安装PHP

添加 EPEL 和 REMI 仓库

yum -y install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm

yum -y install https://rpms.remirepo.net/enterprise/remi-release-7.rpm

启用PHP 7.4 Remi 仓库

yum -y install yum-utils

yum-config-manager --enable remi-php74

安装PHP 7.4

yum update

yum install php php-cli

②，安装PHP扩展

yum install php  php-cli php-fpm php-mysqlnd php-zip php-devel php-gd php-mcrypt php-mbstring php-curl php-xml php-pear php-bcmath php-json

如果有报错，可以自己康康什么原因错然后解决，如果比较懒，我们这个live2d_api用到的扩展就一个php-json

直接安装就行

yum install php-json

③，配置

查看版本

php -v

设置开机启动

systemctl enable php-fpm.service

systemctl start php-fpm.service

2，安装Apache

①，安装Apache

yum install httpd

②，配置Apache

修改一下apache的配置文件/etc/httpd/conf/httpd.conf

找到

# If your host doesn't have a registered DNS name, enter its IP address here.
#
#ServerName http://www.example.com:80

改为

# If your host doesn't have a registered DNS name, enter its IP address here.
#
ServerName localhost:80

找到

#Listen 12.34.56.78:80
#Listen

改为

#Listen 12.34.56.78:80
Listen 8080

改完记得去服务器后台开放端口，具体哪个端口都行

改完重启服务

service httpd restart

查看服务运行状态是否正常

service httpd status

我的正常

*3，Nginx结合PHP

我的vps上是有nginx做代理转发的，这样可以实现不用在域名后加端口号进入不同的项目，我一开始以为php结合nginx不好做，找了一堆博文……他们都太复杂了，实际上可以用很简单的办法来结合

没有用Nginx的同学直接跳去下一步就行：点击跳转

进入Nginx安装目录，进入conf.d文件夹（我的是/usr/local/nginx/conf/conf.d）

新建一个**.conf文件（名字自己取）

cd /usr/local/nginx/conf/conf.d
vi **.conf

我默认都是https请求，比较安全，想跟我一样的可以参考我的另外一篇博文

使用Let’s Encrypt获取免费SSL证书

server{listen    443 ssl; # 我的网站有配置ssl证书，是https请求，所以监听443端口，如果是http请求监听80端口即可listen    [::]:443 ssl; # 如果是http请求无需这两行，listen 80; 即可server_name     api.moechun.fun; # 监听的域名add_header 'Access-Control-Allow-Origin' '*'; # 设置允许跨域add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';# 这里是配置ssl证书ssl_certificate "/etc/nginx/ssl/api.moechun.fun.pem"; # 这里是.pem文件地址ssl_certificate_key "/etc/nginx/ssl/api.moechun.fun.key"; # 这里是.key文件地址ssl_session_cache shared:SSL:1m;ssl_session_timeout  10m;ssl_ciphers HIGH:!aNULL:!MD5;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;ssl_prefer_server_ciphers on;location / {add_header Access-Control-Allow-Origin *; # 设置允许跨域add_header 'Access-Control-Allow-Credentials' 'true'; # 是否允许后续请求携带cookies,该值只能是true,否则不返回。如果上面的Access-Control-Allow-Origin设置的是* 而你又需要cookie信息,则 必须设置这行。  add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';  add_header Access-Control-Allow-Headers *; if($request_method = 'OPTIONS')proxy_pass http://localhost:8080; # 转发去8080端口以访问项目root       /var/www/html; # 这里是项目路径}
}

4，部署项目

①，测试

在apache默认页面路径/var/www/html下新建一个test.php页面

cd /var/www/html
vi test.php

内容：

<?php phpinfo();?>

保存退出（在vim里）

:wq

访问这个页面

像我配置好域名配置好nginx，我访问的就是https://api.moechun.fun/test.php

如果没有域名或者没有配置nginx的同学，那就是http://你的地址:8080/test.php

如果有成功展示信息那就没问题，如果失败了自己康康哪一步骤出问题了

②，部署项目

cd /var/www/html

克隆项目，如果卡住就直接ctrl+c停止然后按↑重新克隆，多几次就正常克隆了

git clone https://github.com/fghrsh/live2d_api.git

③，访问项目

如同开头那边一样，将live2d-widget里的autoload.js的cdnPath注释掉，把apiPath改成你部署的地址

比如：
http://你的地址:8080/live2d_api/
https://你的域名/live2d_api/
（有启用https跟nginx的同学自然要启用一下啦，别浪费）

// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {Promise.all([loadExternalResource(live2d_path + "waifu.css", "css"),loadExternalResource(live2d_path + "live2d.min.js", "js"),loadExternalResource(live2d_path + "waifu-tips.js", "js")]).then(() => {initWidget({waifuPath: live2d_path + "waifu-tips.json",apiPath: "http://你的地址:8080/live2d_api/"// apiPath: "https://live2d.fghrsh.net/api/", //这个地址作者说：由于涉及版权问题，公共 API 接口不再添加模型，如有需要可以自建 API ...// cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/" });});
}
// initWidget 第一个参数为 waifu-tips.json 的路径，第二个参数为 API 地址
// API 后端可自行搭建，参考 https://github.com/fghrsh/live2d_api
// 初始化看板娘会自动加载指定目录下的 waifu-tips.json

④，配置项目

两个地方可以配置，原本的引擎live2d-widget可以配置，以及这个live2d_api也可以，live2d_api的GitHub页面上有写项目结构什么的，但是我不懂php所以……

api的作者还做了live2d的前端代码，有很友好的配置选项，但是就得替代live2d-widget

四、效果展示

版权声明

快来给你的Hexo博客招募亿只live2d看板娘吧(๑•̀ㅂ•́)و✧相关推荐

html网页制作看板娘原理,博客网页上添加live2D看板娘
一:前言 "看板娘",简而言之就是小店的女服务生,也有"吸引顾客,招揽生意,提高人气"等作用类似品牌形象代言人的含义.所用的技术是live2D,live2d并不 ...
html给看板娘添加语音,如何给你的Jekyll博客添加可爱的二次元看板娘(Live2D)
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 有朋友问这个右下角的小东西是怎么弄出来的,今天就手把手教你.请往下看: Live2D Add the Sseexxyyy ...
全面总结Hexo博客部署解决方案
前言在我这次搭建博客的过程中,学到了很多新东西,查找网页教程的过程中看到很多大佬的博客,在浏览他们博文的同时,了解了一些新的概念和名词,非常感谢- 整个搭建的方案经历了几次转折,我最初在什么都不懂的 ...
【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠
全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...
hexo博客搭建时遇到的一些问题
之前的WP博客荒废了好久之后终于感觉该做点正事了,所以这几天花了点时间重新弄了下hexo,毕竟是比较符合前端的一个博客框架.比起wp来说,hexo轻量级的多,而且易部署(指速度优化方面),也不需要一个 ...
ubuntu安装有道云笔记_Ubuntu 安装Node 10.16 跑 Nodeppt 加Hexo博客再来个为知笔记私有云...
几个月前偶然看到NodePPT的霸气标语 U work so hard, but 干不过 write PPTs 当时觉得挺好玩的,后来在自己的Windows笔记本上安装了,效果也确实不错,但是在Ubu ...
https 加端口_Ubuntu 安装Node 10.16 跑 Nodeppt 加Hexo博客再来个为知笔记私有云
几个月前偶然看到NodePPT的霸气标语 U work so hard, but 干不过 write PPTs 当时觉得挺好玩的,后来在自己的Windows笔记本上安装了,效果也确实不错,但是在Ubu ...
hexo博客搭建及主题优化(一)
个人博客个人博客: https://www.crystalblog.xyz/ 备用地址: https://wang-qz.gitee.io/crystal-blog/ HexoBlog 个人博客介 ...
Hexo博客使用腾讯云CDN加速及优化
原文地址:Hexo博客使用腾讯云CDN加速及优化使用公共 CDN 加载部分资源修改主题(我的是NexT主题)配置文件,使用公共CDN加载部分CSS.JS文件,我选择的是 jsDelivr 这个公共 ...

快来给你的Hexo博客招募亿只live2d看板娘吧(๑•̀ㅂ•́)و✧