enjoyduck

没有梦想，何必远方

0%

搭建轻量博客 Hexo

发表于 更新于 分类于

Hexo 是一个用 Node.js 构建的快速、简洁且强大的博客框架

  • 官方网站：Hexo

部署

Git

  1. 下载 Git windows 64 位版，打开 Git Bash ，设置 user.name 和 user.email 配置信息：
    1
    2
    git config --global user.name "你的GitHub用户名"
    git config --global user.email "你的GitHub注册邮箱"
  2. 生成 ssh 密钥文件：
    1
    ssh-keygen -t rsa -C "你的GitHub注册邮箱"
  3. 将生成的.ssh的文件夹中的 id_rsa.pub 密钥配置到 GitHub

Node.js

  1. 下载 Node.js ，输入命令，检测 Node.js 是否安装成功:
    1
    node -v
  2. 输入命令，检测 npm 是否安装成功 :
    1
    npm -v
  3. 安装 Hexo 的环境已经全部搭建完成

Hexo

  1. 安装 hexo
    1
    npm install -g hexo-cli
  2. 安装完成后，初始化 Hexo
    1
    hexo init blog
  3. 进入这blog文件夹，新建
    1
    npm install

启动

通过 http://localhost:4000 访问

1
2
hexo g
hexo s

常用命令

1
2
3
npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

命令简写

1
2
3
4
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

配置

添加 live2d 看板猫

  • Live2D 是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。
  • Live2D Github 项目地址：EYHN/hexo-helper-live2d
  1. 安装 live2d 模块
    1
    npm install --save hexo-helper-live2d
  2. 可选模型
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    live2d-widget-model-chitose
    live2d-widget-model-epsilon2_1
    live2d-widget-model-gf
    live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
    live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
    live2d-widget-model-haruto
    live2d-widget-model-hibiki
    live2d-widget-model-hijiki
    live2d-widget-model-izumi
    live2d-widget-model-koharu
    live2d-widget-model-miku
    live2d-widget-model-ni-j
    live2d-widget-model-nico
    live2d-widget-model-nietzsche
    live2d-widget-model-nipsilon
    live2d-widget-model-nito
    live2d-widget-model-shizuku
    live2d-widget-model-tororo
    live2d-widget-model-tsumiki
    live2d-widget-model-unitychan
    live2d-widget-model-wanko
    live2d-widget-model-z16
  3. 安装模型
    1
    npm install 模型的包名
  4. 配置看板娘，在 Hexo 配置 _config.yml 中，增加如下内容：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    live2d:
      enable: true    # 是否启用看板娘
      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-hijiki # npm-module 包的名字
        scale: 1
        hHeadPos: 0.5
        vHeadPos: 0.618
      display:
        superSample: 2
        width: 200
        height: 400
        position: right    # 左侧还是右侧
        hOffset: 30
        vOffset: -20    # 距底部距离
      mobile:
        show: false    # 手机端是否可见，建议不可见否则可能影响阅读
        scale: 0.5
      react:
        opacityDefault: 1.0
        opacityOnHover: 0.2