🔧 从零开始：用Hexo搭建专业博客及多平台部署全指南

📋 目录

  1. Hexo环境搭建
  2. 创建并配置基础博客
  3. 主题更换与个性化
  4. 部署到GitHub Pages
  5. 通过Netlify优化国内访问
  6. 常见问题与解决方案

1. Hexo环境搭建

1.1 必备工具安装

Hexo基于Node.js运行，需要先安装以下工具：

  • Node.js（v14.0.0+）：提供运行环境
  • Git：用于版本控制和部署

验证安装是否成功

打开终端（Windows：CMD/PowerShell；Mac/Linux：Terminal），输入以下命令：

检查Node.js版本

node -v

示例输出：v16.14.2

检查npm版本（Node.js自带）

npm -v

示例输出：8.5.0

检查Git版本

git --version
示例输出：git version 2.34.1
若命令均能正常输出版本号，则表示环境准备完成。

1.2 安装Hexo脚手架

使用npm全局安装Hexo命令行工具：

全局安装Hexo

npm install -g hexo-cli

验证安装

hexo -v

示例输出：hexo-cli: 4.3.0 …

2. 创建并配置基础博客

2.1 初始化博客项目

创建博客目录并初始化

hexo init my-hexo-blog

进入博客目录

cd my-hexo-blog

安装依赖包

npm install
执行完成后，博客目录结构如下：
my-hexo-blog/
├── _config.yml # 全局配置文件
├── package.json # 项目依赖配置
├── source/ # 源文件目录
│ └── _posts/ # 博客文章存放处
└── themes/ # 主题目录

2.2 基本操作命令

新建一篇文章

hexo new “我的第一篇Hexo博客”

会在source/_posts目录下生成对应的Markdown文件

生成静态网页

hexo generate # 可简写为 hexo g

启动本地服务器预览

hexo server # 可简写为 hexo s

默认访问地址：

http://localhost:4000

清理缓存文件

hexo clean # 部署前建议执行，避免缓存导致的问题
启动服务后，打开浏览器访问 http://localhost:4000 即可看到默认主题的博客页面。

2.3 全局配置修改

编辑根目录下的 _config.yml 文件（建议使用VS Code等编辑器），修改基础信息：

Site

title: 我的技术博客 # 博客标题
subtitle: 分享技术与生活 # 副标题
description: 这是我的个人博客 # 博客描述（用于SEO）
author: 张三 # 作者名
language: zh-CN # 语言（中文）
timezone: Asia/Shanghai # 时区（上海）

URL

url: https://yourname.github.io # 博客最终访问地址
root: / # 根目录
修改后保存，执行 hexo s 重启服务即可看到变化。

3. 主题更换与个性化

Hexo默认主题为landscape，我们可以更换为更美观的主题，这里以热门的Butterfly主题为例。

3.1 安装Butterfly主题

克隆主题到themes目录

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

3.2 启用主题

修改根目录 _config.yml 中的主题配置：

找到theme配置项，修改为butterfly

theme: butterfly

3.3 主题配置优化

为了避免主题升级时覆盖自定义配置，建议使用独立配置文件：

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

cp themes/butterfly/_config.yml _config.butterfly.yml
编辑 _config.butterfly.yml 进行个性化设置：

3.3.1 配置导航菜单

menu:
首页: / || fa fa-home
归档: /archives/ || fa fa-archive
标签: /tags/ || fa fa-tags
分类: /categories/ || fa fa-folder-open
关于: /about/ || fa fa-user

3.3.2 设置社交链接

social:
Github: https://github.com/yourname || fa fa-github
知乎: https://zhihu.com/people/yourname || fa fa-book
邮箱: mailto:your@email.com || fa fa-envelope

3.3.3 配置网站图标

favicon:
icon: /img/favicon.ico # 网站图标路径
apple_touch_icon: /img/apple-touch-icon.png # 苹果设备图标
设置完成后，需要在 source 目录下创建 img 文件夹并放入对应的图片文件。

3.4 安装主题依赖

Butterfly主题需要额外依赖：

安装必要插件

npm install hexo-renderer-pug hexo-renderer-stylus --save
执行 hexo clean && hexo s 查看效果。

4. 部署到GitHub Pages

GitHub Pages提供免费的静态网站托管服务，适合展示博客。

4.1 准备GitHub仓库

  1. 登录GitHub账号，点击右上角 + 号，选择 New repository
  2. 仓库名称必须为：用户名.github.io（例如：octocat.github.io）
  3. 选择 Public 公开仓库
  4. 点击 Create repository 完成创建

4.2 配置Hexo部署参数

  1. 安装部署插件：
    npm install hexo-deployer-git --save
  2. 编辑根目录 _config.yml，配置部署信息：
    deploy:
    type: git
    repo: https://github.com/你的用户名/你的用户名.github.io.git

例如：https://github.com/octocat/octocat.github.io.git

branch: main # 主分支（GitHub新仓库默认分支为main）

4.3 部署博客

清理缓存

hexo clean

生成并部署

hexo g -d # 等同于 hexo generate && hexo deploy
首次部署会要求输入GitHub账号和密码（或token），验证通过后即可完成部署。

几分钟后，访问 https://你的用户名.github.io 即可看到你的博客。

5. 通过Netlify优化国内访问

GitHub Pages在国内访问速度较慢，使用Netlify可以显著提升访问速度。

5.1 注册并连接仓库

  1. 访问 Netlify官网 注册账号（可使用GitHub账号直接登录）
  2. 登录后点击 New site from Git
  3. 选择 GitHub，授权访问你的博客仓库
  4. 选择你的博客仓库（用户名.github.io）

5.2 配置构建参数

在部署设置页面，填写：

  • Build command: hexo clean && hexo generate
  • Publish directory: public

点击 Deploy site 开始部署，Netlify会自动执行构建命令并部署。

5.3 配置自定义域名（可选）

  1. 在Netlify站点控制台，点击 Domain settings
  2. 点击 Add custom domain，输入你购买的域名（例如：blog.example.com）
  3. 在域名提供商的DNS管理界面，添加以下记录：
    • 类型：CNAME
    • 主机记录：blog（或@表示主域名）
    • 记录值：你的Netlify子域名（例如：xxxxxx.netlify.app）

5.4 启用HTTPS

Netlify会自动为你的域名配置SSL证书，在 Domain settings 中找到 HTTPS 选项，开启强制HTTPS访问。

6. 常见问题与解决方案

6.1 本地预览样式错乱

1. 清理缓存并重新生成

hexo clean && hexo g

2. 检查主题是否正确安装

ls themes/butterfly # 应显示主题文件

3. 确认依赖已安装

npm list hexo-renderer-pug

6.2 部署后页面空白

  • 检查 _config.yml 中的 url 配置是否正确
  • 确认部署分支是否为 main 或 master
  • 查看部署日志（GitHub Actions或Netlify构建日志）排查错误

6.3 图片无法显示

  • 使用相对路径引用图片：![描述](img/图片名.jpg)
  • 确保图片放在 source/img 目录下
  • 避免使用中文文件名，可能导致部署后无法访问

6.4 国内访问速度优化

  • 确保已通过Netlify部署
  • 图片资源可使用阿里云OSS、七牛云等国内CDN存储
  • 禁用不必要的外部资源（如Google字体、国外评论系统）

🎉 总结

通过以上步骤，你已经成功搭建了一个基于Hexo的博客，并实现了多平台部署。后续只需专注于内容创作，通过以下命令发布新文章：

新建文章

hexo new “文章标题”

编辑完成后部署

hexo clean && hexo g -d
博客会自动同步到GitHub Pages和Netlify，国内外用户都能快速访问你的内容。

说些什么吧！

waline