Hexo博客搭建全记录 - 从零开始的深夜项目

🌙 深夜项目：个人博客的诞生

又是一个不眠之夜，我决定把自己的深夜思考和技术积累记录下来。于是，这个博客项目诞生了。

为什么选择Hexo？

在众多静态博客生成器中，我选择了Hexo，原因如下：

特性 Hexo Jekyll Hugo Gatsby
语言 Node.js Ruby Go JavaScript
速度 ⚡ 快 🐌 慢 ⚡⚡ 最快 ⚡ 快
主题 🎨 丰富 🎨 丰富 🎨 中等 🎨 现代化
学习曲线 📈 平缓 📈 中等 📈 陡峭 📈 陡峭

选择Hexo的核心原因：

  • 🚀 基于Node.js，JavaScript开发者友好
  • 📦 丰富的插件生态系统
  • ⚡ 生成速度快
  • 🎨 AnZhiYu主题颜值爆表

环境准备

1. 安装Node.js

# 检查Node.js版本
node --version

# 检查npm版本
npm --version

# 我的版本信息
# node v18.17.0
# npm 9.6.7

2. 安装Hexo CLI

# 全局安装Hexo
npm install -g hexo-cli

# 验证安装
hexo version

3. 初始化博客项目

# 创建博客目录
hexo init night-owl-blog
cd night-owl-blog

# 安装依赖
npm install

# 本地预览
hexo server
# 访问 http://localhost:4000

主题配置

选择AnZhiYu主题：

# 克隆主题
git clone https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

# 安装主题依赖
npm install hexo-generator-search hexo-generator-feed hexo-generator-sitemap hexo-generator-json-content

# 复制配置文件
cp themes/anzhiyu/_config.yml _config.anzhiyu.yml

主题个性化配置：

# _config.anzhiyu.yml

# 网站信息
nav:
  enable: true
  menu:
    文章:
      教程: /archives/ || anzhiyu-icon-box-archive
      分类: /categories/ || anzhiyu-icon-shapes
      标签: /tags/ || anzhiyu-icon-tags

# 个人信息
avatar:
  img: https://img.202520.xyz/file/1765272884357_二次元头像.png
  effect: false

# 深夜模式
darkmode:
  enable: true
  button: true
  autoChangeMode: 1

# CDN配置
CDN:
  internal_provider: elemecdn
  third_party_provider: elemecdn
  version: true

内容创作

创建新文章：

# 创建文章
hexo new "深夜编程时-我的学习之路"

# 创建页面
hexo new page "categories"
hexo new page "tags"
hexo new page "about"

文章Front Matter模板：

---
title: 文章标题
date: 2024-12-14 02:30:00
tags:
  - 标签1
  - 标签2
categories:
  - 分类名称
---

部署配置

GitHub Pages部署：

# _config.yml
deploy:
  type: git
  repository: git@github.com:username/username.github.io.git
  branch: main

自动化部署脚本：

#!/bin/bash
# deploy.sh

echo "🚀 开始部署博客..."

# 清理缓存
hexo clean

# 生成静态文件
hexo generate

# 部署到GitHub
hexo deploy

echo "✅ 部署完成！"
echo "🌐 访问地址: https://your-username.github.io"

优化技巧

1. SEO优化

# _config.yml
seo: true
canonical_url: true

# 添加sitemap和robots.txt
plugins:
  - hexo-generator-sitemap
  - hexo-generator-robots

2. 性能优化

# 启用压缩
plugins:
  - hexo-filter-optimize

# 图片懒加载
lazyload:
  enable: true
  field: site
  placeholder: /img/loading.gif

3. 评论系统

# Valine评论配置
valine:
  appId: your-app-id
  appKey: your-app-key
  avatar: robohash
  placeholder: 填写QQ邮箱就会使用QQ头像喔~
  enableQQ: true

插件生态系统

常用插件推荐：

# 搜索功能
npm install hexo-generator-searchdb

# RSS订阅
npm install hexo-generator-feed

# 压缩优化
npm install hexo-filter-optimize

# 本地搜索
npm install hexo-generator-search

# 站点地图
npm install hexo-generator-sitemap

# 文章字数统计
npm install hexo-wordcount

深夜开发心得

遇到的问题：

  1. 主题兼容性问题

    # 解决方案：检查Node.js版本兼容性
    node --version  # 确保版本符合主题要求

  2. 依赖冲突

    # 解决方案：清理并重新安装
    rm -rf node_modules package-lock.json
    npm install

  3. 部署失败

    # 检查SSH密钥配置
    ssh -T git@github.com

备份策略

自动化备份脚本：

#!/bin/bash
# backup.sh

BACKUP_DIR="backup/$(date +%Y%m%d_%H%M%S)"

# 创建备份目录
mkdir -p $BACKUP_DIR

# 备份重要文件
cp -r source $BACKUP_DIR/
cp -r themes $BACKUP_DIR/
cp _config.yml $BACKUP_DIR/
cp _config.anzhiyu.yml $BACKUP_DIR/

echo "✅ 备份完成: $BACKUP_DIR"

持续改进

TODO列表：

  • 添加更多交互功能
  • 优化移动端体验
  • 增加更多自定义样式
  • 集成更多第三方服务
  • 建立内容发布流程

🌟 总结

搭建这个博客项目是我深夜技术学习的一个重要里程碑。从零开始，一步步解决问题，最终看到自己的网站上线，那种成就感是无法言喻的。

深夜项目的意义：

  • 🎯 实践所学知识
  • 🚀 提升解决问题能力
  • 📝 建立个人品牌
  • 🌍 分享与连接世界

💡 给深夜学习者的建议：

不要害怕从零开始，每一个伟大的项目都始于第一个文件、第一行代码。深夜的孤独时光，正是创造的最佳时机。

🌙 深夜项目继续中… 下一个目标：更多有趣的功能实现！