Hexo博客零成本搭建指南:从环境配置到云端部署

无需服务器,只需一个域名,打造极速个人博客!

为什么选择Hexo?

  • ⚡️ 极速高效:基于Node.js的静态博客框架,生成速度快
  • 💸 零成本运营:依托Cloudflare免费托管,无需服务器
  • 🛡️ 抗攻击性强:部署在Cloudflare边缘网络,自带DDoS防护
  • 📱 多设备同步:通过Git管理,可在任意设备更新内容
  • 🎨 高度可定制:丰富的主题生态系统(下期将介绍美化技巧)

准备工作

必备账号

  1. GitHub账号
  2. Cloudflare账号
  3. 域名(推荐NamecheapCloudflare注册)

软件安装

1
2
3
4
# 验证安装成功的命令
node -v # 检查Node.js版本
npm -v # 检查npm版本
git --version # 检查Git版本
软件官网备注
Node.jsnodejs.orgJavaScript运行环境
Gitgit-scm.com版本控制系统
VS Codecode.visualstudio.com代码编辑器(可选但推荐)

环境配置技巧:更换npm源加速安装

1
npm config set registry https://repo.huaweicloud.com/repository/npm/

完整搭建流程

步骤1:配置Git环境

1
2
3
4
5
6
# 设置全局用户名和邮箱(使用GitHub注册信息)
git config --global user.name "YourGitHubUsername"
git config --global user.email "your-email@example.com"

# 生成SSH密钥(一路回车使用默认设置)
ssh-keygen -t ed25519 -C "your-email@example.com"

将公钥(~/.ssh/id_ed25519.pub内容)添加到GitHub SSH设置

1
2
# 测试连接
ssh -T git@github.com

步骤2:创建GitHub仓库

  • 仓库名格式:<username>.github.io
  • 选择Public仓库

步骤3:初始化Hexo博客

1
2
3
4
5
6
7
8
9
10
11
12
# 全局安装Hexo
npm install hexo-cli -g

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

# 安装依赖
npm install

# 本地预览
hexo clean && hexo g && hexo s

访问 http://localhost:4000 查看默认博客

步骤4:部署到GitHub Pages

  1. 安装部署插件

    1
    npm install hexo-deployer-git --save
  2. 修改_config.yml末尾添加:

    1
    2
    3
    4
    deploy:
    type: git
    repo: git@github.com:<username>/<username>.github.io.git
    branch: main
  3. 首次部署执行:

    1
    hexo clean && hexo deploy

权限问题解决方案(Windows):

1
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

youngxuesong.github.io

步骤5:部署到Cloudflare Pages

  1. 登录Cloudflare控制台
  2. 进入 Workers & PagesCreate applicationPages
  3. 连接GitHub账户,选择你的仓库
  4. 保持默认设置,点击 Save and Deploy
  1. (可选) 添加自定义域名
  2. 仓库改为Private(增强安全性)

博客管理指南

创建新文章

1
hexo new "我的第一篇博文"

文章Markdown文件位于source/_posts/

插入图片(使用图床)

  1. 推荐国内图床:SM.MS, 阿里云OSS
  2. 使用Markdown语法插入:
    1
    ![图片描述](https://example.com/image.jpg)

工作流程

  1. 本地写作:hexo new "标题"
  2. 预览效果:hexo clean && hexo g && hexo s
  3. 部署更新:hexo clean && hexo deploy

效果展示

当前为默认主题,下一期将教大家使用Butterfly主题美化成专业博客

常见问题解决

问题解决方案
部署后页面无更新清除浏览器缓存,等待CDN刷新(约5分钟)
hexo deploy 报错检查SSH密钥配置和仓库权限
图片加载缓慢更换国内图床或使用Cloudflare Images
安装依赖超时使用科学上网或更换国内npm源

下期预告:博客美化实战

  • 安装Butterfly主题
  • 定制化界面设计
  • 添加实用插件(搜索/评论/分析)
  • 高级功能:音乐播放器、看板娘、特效等

技术改变生活:Hexo不仅是一个博客框架,更是你技术成长的见证。从今天开始记录你的思考与成长吧!

项目源码GitHub - hexojs/hexo
主题仓库GitHub - jerryc127/hexo-theme-butterfly

本教程完全免费,如果对你有帮助,请在点赞支持!