使用GitHub+Hexo+live2d搭建個人博客 博客說明 文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗彙總，如有什麼地方侵權，請聯繫本人刪除，謝謝！ 安裝hexo sudo npm install hexo-cli -g 創建博客目錄 hexo init username.g ...
使用GitHub+Hexo+live2d搭建個人博客
博客說明
文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗彙總，如有什麼地方侵權，請聯繫本人刪除，謝謝！
安裝hexo
sudo npm install hexo-cli -g
創建博客目錄
hexo init username.github.io
cd username.github.io
npm install
運行
hexo clean #清理文件
hexo g #生成文件
hexo s #運行
打開瀏覽器，輸入地址localhost:4000即可看到博客頁面
安裝主題
主題官網可以查看
我使用的是volantis，文檔地址
https://volantis.js.org/v2/getting-started/
下載主題
git clone https://github.com/xaoxuu/hexo-theme-volantis themes/volantis
修改配置文件
項目根目錄下_config.yml文件
theme: volantis
安裝依賴
npm i -S hexo-generator-search hexo-generator-json-content
npm i -S hexo-renderer-stylus
配置文件
一般在/_config.yml配置網頁圖標名稱等
一般在/theme/{theme}/_config.yml配置主題等頁面顯示的問題
部署到Github
在GitHub創建一個<username>.github.io的public倉庫，如果你的用戶名是xxx,則需要創建一個xxx.github.io的public倉庫，這個步驟很簡單就跳過了
安裝依賴
npm install hexo-deployer-git --save
網站配置git
在網站的_config.yml中配置deploy
deploy:
type: git
repo: <repository url> #你的倉庫地址
branch: master
部署
hexo d
需要Github的用戶名和密碼，填入即可
現在的樣子
當然這個需要你們根據主題裡面的文檔進行配置
配置live2d
hexo可以直接當做插件使用live2d，不過很慢
下載依賴
npm install --save hexo-helper-live2d
下載主題
可以選擇主題下載，選擇不同的人物
npm install live2d-widget-model-shizuku
配置主題
在/_config.yml配置文件裡面添加一段配置
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
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-shizuku
# 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: left
width: 150
height: 300
mobile:
show: true # 是否在移動設備上顯示
scale: 0.5 # 移動設備上的縮放
react:
opacityDefault: 0.7
opacityOnHover: 0.8
可以自己選擇大小和位置
配置好了之後再次部署
hexo clean
hexo g
hexo d
測試
下麵那個人物等了一會再出現的
感謝
hexo+github+live2d+volantis
萬能的網路
以及勤勞的自己
關註公眾號： 歸子莫，獲取更多的資料，還有更長的學習計劃
