1. Install Hexo

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

2. Add Live2d

npm install --save hexo-helper-live2d

then, insert code into _config.xml

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

pull your ‘assets’ contents from live2d model directory to ‘./live2d_models/wanko’. At last, let’s run and compile the project

hexo server
hexo deploy

3. Config Jekyll

Copy contents from ‘./public/index.html’ to your footer.

<script src="https://home.carlme.com:8001//assets/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script>
<script>
    setTimeout(() => {
        L2Dwidget.init({
            "pluginRootPath": "assets/live2dw/",
            "pluginJsPath": "lib/",
            "pluginModelPath": "assets/",
            "tagMode": false,
            "debug": false,
            "model": {"jsonPath": "/assets/live2dw/assets/wanko.model.json"},
            "display": {"position": "right", "width": 150, "height": 300},
            "mobile": {"show": true},
            "log": false
        })
    }, 1000)
</script>

Copy files of ‘./public/live2dw’ to jekyll ‘./assets’

4. Change Model

  • Modify models in hexo assets and recompile
  • Copy new ’live2dw’ directory to your jekyll ‘./assets’
  • Modify your javascript code

Reference

Live2d