🚀 本站博客搭建与美化技术文档

1. 前言

本站基于 Hexo 静态博客框架搭建，使用了功能强大的 Butterfly 主题。本文档记录了从零开始搭建、配置主题以及进行个性化美化的完整过程，既是对自己折腾过程的记录，也希望能帮助到想搭建类似博客的朋友。

2. 技术栈概览

  • 核心框架: Hexo (快速、简洁且高效的博客框架)

  • 博客主题: Butterfly (一款美观且功能丰富的 Hexo 主题)

  • 托管平台: GitHub Pages (免费、稳定的静态网页托管)

  • 评论系统: Giscus (基于 GitHub Discussions 的评论系统)

  • 统计工具: 不蒜子 (Busuanzi)

3. 基础环境搭建

参考教程：【Hexo搭建】免费快速搭建Hexo博客网站并部署上线

我的搭建流程主要分为以下几步：

  1. 环境准备: 安装 Node.js 和 Git，这是 Hexo 运行的基础。

  2. 初始化博客: 使用 npm install -g hexo-cli 安装脚手架，并通过 hexo init 生成博客目录。

  3. 部署设置: 在 GitHub 创建仓库（用户名.github.io），安装 hexo-deployer-git 插件，实现一键部署 (hexo d)。

4. 主题安装与配置

参考教程：【Hexo】Hexo搭建Butterfly主题并快速美化

为了让博客更美观，我选择了 Butterfly 主题。

  • 安装: 通过 git clone 下载主题文件到 themes/butterfly 目录。

  • 配置策略: 为了方便后续升级，我采用了“覆盖配置”的方式。即在博客根目录新建 _config.butterfly.yml 文件，专门存放主题的配置项，它会覆盖主题自带的 _config.yml。

5. 本站特色功能配置

基于我的 _config.butterfly.yml 文件，本站开启了以下个性化功能：

5.1 视觉美化

  • 背景特效: 开启了 canvas_nest（动态线条背景）和 fireworks（鼠标点击烟花特效），增加页面的交互感。

  • 看板娘 (Live2D): 在页面右下角添加了 Live2D 看板娘挂件，并配置了自定义 CSS 将工具栏调整至左侧，避免遮挡。

    YAML

    # 注入的自定义 CSS
    #waifu { left: auto; right: 10px; }
    #waifu-tool { right: auto; left: -35px; }

5.2 音乐播放器 (APlayer)

为了让访问者有更好的听觉体验，我集成了 APlayer 全局播放器：

  • 歌单来源: 网易云音乐 (周杰伦精选集)

  • 配置方式: 通过 inject 在页面底部注入 MetingJS 脚本，实现了迷你模式的左下角播放器。

    HTML

    <meting-js   server="netease"   type="playlist"   id="3136952023"   mini="true"   fixed="true">
    </meting-js>

5.3 交互与功能

  • 评论系统: 选用了 Giscus，访客可以使用 GitHub 账号登录评论，数据直接存储在 GitHub 仓库的 Discussions 中，安全且无广告。

  • 搜索功能: 开启了 Local Search，支持对站内文章的快速检索。

  • 数据统计: 集成了 不蒜子 统计，在页脚和侧边栏显示网站的访问量 (PV) 和访客数 (UV)。

6. 常用维护命令

  • hexo clean: 清除缓存

  • hexo g: 生成静态网页 (Generate)

  • hexo s: 本地预览 (Server)

  • hexo d: 部署到 GitHub (Deploy)

致谢: 感谢博主 [小满@] 提供的详细教程，让我在搭建过程中少走了很多弯路。