前言

拥有一个个人博客是每个程序员的标配。今天我来分享如何从零搭建一个像本站一样精美的个人博客！

一、环境准备

安装Node.js

访问 Node.js官网 下载LTS版本。

1
2
3
# 验证安装
node -v
npm -v

安装Git

访问 Git官网 下载安装。

1
2
# 验证安装
git --version

安装Hexo

1
2
3
4
npm install -g hexo-cli

# 验证安装
hexo -v

二、创建博客

初始化项目

1
2
3
hexo init my-blog
cd my-blog
npm install

项目结构

1
2
3
4
5
6
7
8
my-blog/
├── _config.yml      # 站点配置
├── package.json     # 依赖配置
├── scaffolds/       # 模板文件夹
├── source/          # 资源文件夹
│   ├── _posts/      # 文章
│   └── _drafts/     # 草稿
└── themes/          # 主题文件夹

基础命令

1
2
3
4
5
hexo new "文章标题"    # 创建文章
hexo clean            # 清理缓存
hexo generate         # 生成静态文件
hexo server           # 本地预览
hexo deploy           # 部署

三、安装Butterfly主题

安装主题

1
npm install hexo-theme-butterfly --save

创建主题配置

在项目根目录创建 _config.butterfly.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 导航栏
menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  关于: /about/ || fas fa-user

# 头像
avatar:
  img: /images/avatar.jpg
  effect: true

# 暗黑模式
darkmode:
  enable: true
  button: true

修改站点配置

编辑 _config.yml：

1
theme: butterfly

四、创建必要页面

标签页

1
hexo new page tags

编辑 source/tags/index.md：

1
2
3
4
---
title: 标签
type: tags
---

分类页

1
hexo new page categories

关于页

1
hexo new page about

五、自定义美化

创建自定义CSS

创建 source/css/custom.css：

1
2
3
4
5
6
7
8
9
10
11
12
/* 毛玻璃效果 */
.card-widget {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  border-radius: 16px;
}

/* 卡片悬浮效果 */
.card-widget:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

引入自定义CSS

在 _config.butterfly.yml 中：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">

六、部署到GitHub Pages

创建仓库

在GitHub创建仓库：username.github.io

配置部署

安装部署插件：

1
npm install hexo-deployer-git --save

编辑 _config.yml：

1
2
3
4
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: main

部署

1
hexo clean && hexo deploy

七、进阶配置

安装实用插件

1
2
3
4
5
6
7
8
# 站点地图
npm install hexo-generator-sitemap --save

# RSS订阅
npm install hexo-generator-feed --save

# 字数统计
npm install hexo-wordcount --save

配置SEO

在 _config.yml 中添加：

1
2
3
4
5
6
7
sitemap:
  path: sitemap.xml

feed:
  enable: true
  type: atom
  path: atom.xml

总结

恭喜你！现在你拥有了一个精美的个人博客。接下来要做的就是：

  1. 📝 持续输出高质量内容
  2. 🎨 根据个人喜好调整样式
  3. 📢 分享给更多人看到

如果这篇教程对你有帮助，欢迎点赞分享！