使用GitHub+Hexo+live2d搭建個人博客

使用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即可看到博客頁面

安裝主題

主題官網可以查看

https://hexo.io/themes/

我使用的是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/live2d-widget@3.x/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/live2d-widget-model-wanko@1.0.5/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

萬能的網絡

以及勤勞的自己
關注公眾號： 歸子莫，獲取更多的資料，還有更長的學習計划