前言

本网站基于 Hexo 框架Butterfly主题将 Markdown文件 渲染为 HTML网页 并使用 GitHub Pages 进行发布。
本文中使用的环境配置如下：

  • Windows 11系统
  • Node.js v18.18.2
  • Git v2.40.0
  • Hexo v4.3.1

下面介绍该博客网站的搭建过程。

安装Node.js和Git

  1. 安装Node.js，安装教程参考教程。安装完成后，在安装路径下打开命令行终端，输入node -v 查看是否安装成功，输入npm -v查看npm版本号

    • 切换镜像-淘宝：npm config set registry http://registry.npm.taobao.org/
    • 查看版本命令：npm get registry
    • 切换镜像-官方：npm config set registry http://www.npmjs.org

  2. 安装Git，安装教程参考教程

安装HEXO

  1. 新建文件夹 blog，用于存储本地文件，右键文件夹，选择 Git Bash Here，在git终端中输入 npm install -g hexo-cli

  2. hexo安装路径为：C:\Users\Liu\AppData\Roaming\npm

  3. 卸载hexo命令：npm uninstall hexo-cli -g，卸载完之后npm文件夹会消失

    • hexo v 查看版本

  4. 使用 hexo init 命令，初始化 blog 文件夹

    初始化完成后，blog 文件夹中的目录结构如下图所示：

    • _config.yml：站点配置文件，可以配置网站标题、关键字、语言、时区、文件夹目录等等功能
    • scaffolds：模板文件夹，一般在新建文章的时候才会用到，会根据你选择的模板来创建文件，会省掉不少时间
    • source：资源文件夹，通过hexo命令生成的页面文件会统一放在这个文件夹下面
    • themes：主题文件夹，下载的主题就会放在这个文件夹下面。（ps: 主题是用来让你网站变的花里胡哨的东西，官方主题商店：https://hexo.io/themes/ ）

  5. hexo generate ：生成静态文件，产生 public文件夹

  6. hexo server ：启动服务器

安装Butterfly主题

在 blog 目录下：

  1. 安装依赖：npm install hexo-renderer-pug hexo-renderer-stylus
  2. 安装主题：git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly，themes文件夹下出现butterfly文件夹——成功！
  3. 使用VS Code打开 blog 文件夹，方便编辑
  4. 修改blog目录下_config.yml配置文件中的 theme: butterfly
    1. hexo clean
    2. hexo g
    3. hexo s
    4. 通过本地地址：http://localhost:4000/ 访问

部署到GitHub

  1. GitHub中创建新仓库 blog
  2. 配置仓库的GitHub Pages
    1. 新建 gh-pages 分支
    2. Settings$\rightarrow$Pages$\rightarrow$Build and deployment$\rightarrow$Source(Deploy from a branch)$\rightarrow$Branch(gh-pages$\rightarrow$root$\rightarrow$save)
  3. 安装 hexo-deployer-git 插件：npm install hexo-deployer-git --save
  4. 修改blog目录下_config.yml中的内容：
    1
    2
    3
    4
    5
    deploy:
      type: git
      repo: https://github.com/***/blog.git  # ***处为你的GitHub用户名称
      branch: gh-pages
      ignore_hidden: false
  5. 修改blog目录下_config.yml中： url: https://***.github.io/blog/

部署三步骤

  • hexo clean
  • hexo g
  • hexo d

初步胜利：以上步骤后成功通过 [GitHub用户名].github.io/blog 就可以访问博客网站啦！！！

Butterfly主题配置及美化

字体设置

侧边栏时钟（参考教程）

  1. 如果有安装店长的插件版侧边栏电子钟（与店长的电子钟冲突），在博客根目录 blog 下打开终端，运行以下指令
    1
    2
    # 卸载原版电子钟
    npm uninstall hexo-butterfly-clock
  2. 安装插件，在博客根目录 blog 下打开终端，运行以下指令：
    1
    npm install hexo-butterfly-clock-anzhiyu --save
  3. 添加配置信息，以下为写法示例在站点配置文件_config.yml 或者主题配置文件_config.butterfly.yml 中添加
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    # electric_clock
    # see https://anzhiy.cn/posts/fc18.html
    electric_clock:
      enable: true # 开关
      priority: 5 #过滤器优先权
      enable_page: all # 应用页面
      exclude:
      # - /posts/
      # - /about/
      layout: # 挂载容器类型
        type: class
        name: sticky_layout
        index: 0
      loading: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif #加载动画自定义
      clock_css: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css
      clock_js: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js
      ip_api: https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0
      qweather_key: # 和风天气key
      gaud_map_key: # 高德地图web服务key
      default_rectangle: false # 开启后将一直显示rectangle位置的天气，否则将获取访问者的地理位置与天气
      rectangle: 112.982279,28.19409 # 获取访问者位置失败时会显示该位置的天气，同时该位置为开启default_rectangle后的位置
    其中 qweather_key 和 gaud_map_key 最好自己去申请对应的 api key，默认使用安知鱼的，可能会被限制，不保证可靠性

添加评论区

博客写作

to be continued…