Hexo + Github 第一次尝试搭建个人博客

📌 前言

在这个信息爆炸的时代，拥有一个属于自己的博客空间变得越来越重要。通过个人博客，我们可以：

📝 记录学习历程和心得体会
🎯 分享经验，帮助他人
🌟 打造个人品牌
💡 提升写作和表达能力

为什么选择 Hexo + GitHub Pages 搭建博客？

🆓 完全免费，无需购买服务器
🚀 搭建简单，维护方便
🎨 主题丰富，高度可定制
✍️ 支持 Markdown，专注写作
🔒 数据安全，版本控制

让我们开始动手搭建属于自己的博客空间吧！

🛠️ 环境准备

1. Node.js 安装

访问 Node.js 官网，下载并安装 LTS 版本
验证安装是否成功：

1 2	node -v # 查看 Node.js 版本 npm -v # 查看 npm 版本

2. Git 安装与配置

从 Git 官网下载安装包
安装完成后，配置用户信息：

1 2	git config --global user.name "你的 GitHub 用户名" git config --global user.email "你的 GitHub 邮箱"

3. Hexo 安装

1 2	npm install -g hexo-cli hexo -v # 验证安装

🚀 博客创建与配置

1. 初始化博客

mkdir blog  # 创建博客目录
cd blog     # 进入目录
hexo init   # 初始化博客
npm install # 安装依赖

初始化完成后的目录结构：

💡 提示：如果缺少 node_modules 文件夹，在博客目录中执行 npm install。遇到权限问题可以使用管理员模式打开终端执行指令。

2. 本地预览

1
2
3

hexo clean   # 清理缓存
hexo generate # 生成静态文件
hexo server  # 启动本地服务器

访问 http://localhost:4000 即可预览博客效果：

🎨 主题安装与配置

1. 基础配置

首先需要配置站点的基本信息，修改 _config.yml：

2. 安装 Butterfly 主题

下载并安装主题：

1	git clone https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

安装必要的依赖：

1	npm install hexo-renderer-pug hexo-renderer-stylus --save

3. 主题配置

复制主题配置文件到根目录：

1	cp themes/butterfly/_config.yml _config.butterfly.yml

⚠️ 重要说明：

两个配置文件都必须存在于根目录中

_config.yml 控制全局设置

_config.butterfly.yml 控制主题设置

修改主题样式时修改 _config.butterfly.yml

修改网站基本信息时修改 _config.yml

确保 themes 文件夹中的主题文件夹名为 butterfly

📤 部署到 GitHub Pages

创建 GitHub 仓库

仓库名必须为：你的用户名.github.io

安装部署插件

1	npm install hexo-deployer-git --save

配置部署信息
修改 _config.yml：

deploy:
  type: git
  repo: git@github.com:你的用户名/你的用户名.github.io.git
  branch: main

部署博客

1
2
3

hexo clean
hexo generate
hexo deploy

📝 常用命令速查表

命令	说明	简写
`hexo clean`	清除缓存文件	-
`hexo generate`	生成静态文件	`hexo g`
`hexo server`	启动本地服务器	`hexo s`
`hexo deploy`	部署网站	`hexo d`
`hexo new post "标题"`	新建文章	-
`hexo new page "页面"`	新建页面	-

❓ 常见问题

部署失败
- 检查 GitHub 仓库名是否正确
- 确认 SSH key 配置
- 验证部署配置信息
图片显示问题
- 开启文章资源文件夹
- 使用正确的图片引用方式
- 检查图片路径
主题配置无效
- 确认主题名称正确
- 检查配置文件语法
- 清理缓存后重新生成

🔗 参考资源

🌟 优秀博客参考

本文持续更新中，欢迎交流讨论！