使用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

萬能的網絡

以及勤勞的本身 關注公衆號： 歸子莫，獲取更多的資料，還有更長的學習計劃