Hexo

前言 搭建好 Hexo 博客之后，性能优化是提升用户体验的重要一环。本文记录了我在优化博客加载速度过程中的实践和心得。 性能分析 首先使用工具分析当前博客的性能瓶颈： Google PageSpeed Insights：综合评分工具 Lighthouse：Chrome 内置的性能审计工具 WebPageTest：详细的加载瀑布图分析 图片优化 图片通常是网页中最大的资源，优化效果立竿见影： 使用 WebP 格式替代 PNG/JPG，体积减少 30%-50% 添加图片懒加载（Lazy Load），首屏外的图片延迟加载 压缩封面图片，控制在 200KB 以内 静态资源优化 1 2 3 4 5 # 开启 Gzip 压缩 # 在 GitHub Pages 上默认已开启 # 合并 CSS/JS 文件减少请求数 # 使用 CDN 加速静态资源加载 缓存策略 合理设置缓存策略可以大幅提升回访速度： HTML 文件：短期缓存，确保内容及时更新 CSS/JS/图片：长期缓存，通过文件名哈希实现版本控制 字体文件：设置较长的缓存时间 优化效果 经过一系列优化后： 指标 优化前 优化后 首屏加载 4.2s 1.8s PageSpeed 评分 62 91 请求数 48 32 性能优化是一个持续的过程，后续还会继续探索更多优化手段。

前言 今天花了一些时间从零搭建了一个基于 Hexo 的个人博客，并成功部署到了 GitHub Pages。整个过程中踩了一些坑，也学到了不少东西，这里把完整的搭建流程记录下来，方便自己以后回顾，也希望能帮到有需要的朋友。 环境准备 在开始之前，确保你的系统已经安装了以下工具： Node.js（建议 v18 以上） npm（随 Node.js 一起安装） Git 可以通过以下命令检查版本： 1 2 3 node -v npm -v git --version 第一步：安装 Hexo 并初始化博客 首先全局安装 Hexo CLI： 1 npm install -g hexo-cli 然后初始化博客项目： 1 2 3 hexo init my-blog cd my-blog npm install 初始化完成后，目录结构如下： 1 2 3 4 5 6 my-blog/ _config.yml # 站点配置文件 source/ _posts/ # 文章目录 themes/ # 主题目录 public/ # 生成的静态页面 第二步：安装 Matery 主题 默认的 landscape 主题比较简陋，我选择了功能丰富的 Matery 主题，它采用了 Material Design 风格，界面美观大方。 ...