Windows下使用Hexo+Github搭建属于你自己的免费博客

Hexo

文章字数: 2.7k

阅读时长: 10 分

嘿，朋友们！你是否曾想过拥有一个完全属于自己的、可以随心所欲定制的个人博客？不用购买服务器，不用操心数据库，今天这篇教程就手把手带你使用 Hexo 框架，在 Windows 系统下搭建一个帅气、免费、高性能的静态博客，并将其部署在 Github Pages 上。

整个过程就像搭积木一样，我们一步一步来，保证让你轻松上手！

准备工作：安装必备软件 (Git & Node.js)

在我们开始搭建博客之前，需要先安装两个“神器”：Git 和 Node.js。

Git：一个超酷的版本控制工具，我们主要用它来将我们写好的博客文章推送到 Github 上。
Node.js：Hexo 是基于 Node.js 环境运行的，所以这是必须的“地基”。

你可以从下面的官方地址下载它们：

Git 下载地址: https://git-scm.com/downloads
Node.js 下载地址: https://nodejs.org/en/

小提示：安装过程基本就是“下一步”点到底，没有什么特别的配置。安装完成后，可以打开命令行工具（Win + R，输入 cmd）分别输入 git --version 和 node -v 来检查是否安装成功。

第一步：配置 Github 仓库

我们的博客是静态网站，Github Pages 提供了完美的免费托管服务。所以，我们需要在 Github 上创建一个专门的仓库来存放我们的网站文件。

1. 创建个人仓库

登录你的 Github 账号，创建一个新的仓库。仓库名称必须遵循一个特殊的格式：你的用户名.github.io。

例如，如果你的 Github 用户名是 CoderWang，那么你的仓库名就必须是 CoderWang.github.io。请务必注意，大小写不敏感。

2. 配置 SSH 密钥

为了让我们本地的电脑能够安全地和 Github 通信（比如推送代码），我们需要配置一下 SSH 密钥。这个过程就是创建一个“密钥对”，把公钥（public key）放在 Github 上，私钥（private key）留在自己电脑里。这样每次推送代码时，它们就能对上“暗号”了。

这是一个非常标准的流程，网上有海量的教程。你可以搜索“git 添加 ssh 到 Github”来获取详细步骤，这里就不赘述啦。

第二步：配置 Node.js 和安装 Hexo

1. 更换国内镜像源

由于 Node.js 的官方源在国外，我们直接用它来下载东西会非常慢，甚至失败。幸运的是，我们可以把它换成速度飞快的淘宝源。

你有两种方法可以更换：

方法一：临时指定

每次使用 npm 命令时，在后面加上一个参数：

# 示例：安装一个包
npm install some-package --registry https://registry.npm.taobao.org

方法二：一劳永逸（推荐）

直接修改 npm 的配置文件。找到你的 Node.js 安装目录，在下面找到 ~/.npmrc 文件（如果没有就新建一个），添加以下内容：

registry = https://registry.npm.taobao.org

这样以后所有的 npm 命令都会默认使用淘宝源了，速度起飞！

2. 安装 Hexo

万事俱备，现在正式安装 Hexo！找一个你喜欢的地方，新建一个文件夹（比如 D:\Blog），然后在这个文件夹里打开命令行，输入以下命令来全局安装 Hexo 命令行工具：

npm install -g hexo-cli

安装完成后，我们来初始化我们的博客项目。blog 是你想要创建的博客文件夹的名字，可以自定义。

hexo init blog

这个命令会自动帮你下载所有需要的文件。完成后，进入这个 blog 文件夹，我们来跑一下看看效果：

cd blog
hexo new "Hello World" # 创建一篇新文章
hexo g                 # 生成静态文件 (g for generate)
hexo s                 # 启动本地服务器 (s for server)

现在，打开浏览器访问 http://localhost:4000，你应该就能看到你的博客初始页面了！

第三步：部署网站到 Github

本地能看到还不够，我们要让全世界都能访问！这一步就是将我们生成的网站文件推送到之前在 Github 上创建的仓库里。

1. 关联 Hexo 与 Github

首先，我们要告诉 Hexo 应该把网站部署到哪里去。打开博客根目录下的 _config.yml 文件（我们称之为站点配置文件），找到 deploy 部分，修改成这样：

deploy:
  type: git
  repo: https://github.com/你的用户名/你的用户名.github.io.git # 这里换成你自己的仓库地址
  branch: master

注意：这里的 repo 地址，请务必换成你自己在 Github 上创建的那个仓库的地址！

接着，我们需要安装一个 Git 部署插件，让 Hexo 能够使用 Git 来部署：

npm install hexo-deployer-git --save

现在，激动人心的时刻到了！执行以下“三连”命令，一键部署你的网站：

hexo clean # 清除旧的缓存文件
hexo g     # 重新生成静态文件
hexo d     # 部署到远端 (d for deploy)

部署成功后，稍等一两分钟，访问你的域名 https://你的用户名.github.io，就能看到和本地一模一样的网站了！

2. 更换你喜欢的主题

Hexo 默认的主题可能有点朴素，但它强大的生态系统提供了海量精美的主题供你选择。

官方主题传送门: https://hexo.io/themes/

这里以一个非常流行且漂亮的主题 Butterfly 为例。

首先，在你的博客根目录（D:\Blog\blog）下打开命令行，用 git 克隆主题文件到 themes 文件夹下：

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

然后，再次打开站点配置文件 _config.yml，修改 theme 字段：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

可能会遇到的坑：
如果更换 butterfly 主题后部署报错，提示类似 extends includes/layout.pug 的错误，那是因为缺少了对应的渲染器。执行以下命令安装即可：
npm install hexo-renderer-pug hexo-renderer-stylus --save
安装完后，重新 hexo clean hexo g hexo d 部署。

每个主题都有自己的配置项，可以让你高度自定义。这些配置项通常在 blog/themes/主题名/_config.yml（我们称之为主题配置文件）里修改。

第四步：日常博客操作

网站搭好了，接下来就是愉快地写作了！

1. 发布新博客

在博客根目录下执行：

hexo n "我的第一篇技术博客"

Hexo 会在 source/_posts 文件夹下创建一个名为 我的第一篇技术博客.md 的文件。你只需要用 Markdown 编辑器打开它，就可以开始写作了。

写完后，还是老规矩三连：hexo clean, hexo g, hexo d，你的新文章就发布到线上啦！

2. 添加分类和标签页

一篇篇的文章太乱了？我们需要分类和标签来管理它们。

首先，创建分类和标签页面：

# 创建标签页
hexo new page tags
# 创建分类页
hexo new page categories

然后，修改对应的页面文件：

打开 source/tags/index.md，修改内容为：

---
title: tags
date: 2023-10-27 10:00:00
type: "tags"
---

打开 source/categories/index.md，修改内容为：

---
title: categories
date: 2023-10-27 10:01:00
type: "categories"
---

最后，在文章中指定分类和标签：

在你写的每一篇 .md 文件的头部（我们称之为 Front-matter），可以这样设置：

---
title: 我的第一篇技术博客
date: 2023-10-27 10:30:00
tags: 
 - Hexo
 - 教程
categories: 
 - 技术
 - 建站
---

这里是你的正文内容...

3. 删除博客

想删除一篇文章？非常简单，直接去 source/_posts 文件夹下，找到对应的 .md 文件，删掉它。然后重新 hexo g hexo d 部署，线上的文章就也跟着删除了。

第五步：进阶玩法

1. 多台电脑同步写作

如果你有两台电脑（比如家里的台式机和公司的笔记本），想在任何一台上都能写博客，怎么办？答案是利用 Git 的分支功能。

原理：

我们 hexo d 命令推送到 Github master 分支的，其实是编译后的网页文件（public 目录下的内容）。而我们写的 .md 源文件、配置文件等并没有上传。我们可以创建一个新的分支（比如叫 source），专门用来存放这些源文件。

操作步骤：

在你的 Github 仓库 你的用户名.github.io 中，创建一个新分支，命名为 source。
在仓库的 Settings -> Branches 中，将 source 设置为默认分支。
在本地，将整个博客文件夹（除了 .git 和 node_modules 目录）提交到这个 source 分支。
当你换到一台新电脑时，只需 git clone 这个 source 分支，然后执行 npm install 安装依赖，就可以开始写作和部署了。
重要：每次写完文章，执行完 hexo d 后，记得也要把源文件 git push 到 source 分支，以保持同步。

# 部署网站到 master 分支
hexo d

# 提交源文件到 source 分支
git add .
git commit -m "更新了我的博客文章"
git push origin source

2. 解决数学公式显示问题

如果你是理工科的小伙伴，需要在博客里写数学公式，可能会发现默认的渲染器会出问题（比如把下划线 _ 渲染成斜体）。

解决方法：

卸载默认的渲染器，安装一个更强大的 kramed 渲染器。

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

修改 kramed 的渲染规则，防止它错误地解析公式里的符号。找到文件 node_modules/kramed/lib/rules/inline.js，将 escape, em, strong 这几行规则修改为：

var inline = {
  // escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*{}\[\]()# +\-.!_>])/,
  autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
  url: noop,
  html: /^<!--[\s\S]*?-->|^<(\w+(?!:\/|[^\w\s@]*@)\b)*?(?:"[^"]*"|'[^']*'|[^'">])*?>([\s\S]*?)?<\/\1>|^<(\w+(?!:\/|[^\w\s@]*@)\b)(?:"[^"]*"|'[^']*'|[^'">])*?>/,
  link: /^!?\[(inside)\]\(href\)/,
  reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
  nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
  reffn: /^!?\[\^(inside)\]/,
  // strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
  strong: /^\*\*([\s\S]+?)\*\*(?!\*)/,
  // em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
  br: /^ {2,}\n(?!\s*$)/,
  del: noop,
  text: /^[\s\S]+?(?=[\\<!\[_*`$]| {2,}\n|$)/,
  math: /^\$\$\s*([\s\S]*?[^\$])\s*\$\$(?!\$)/,
};

修改后重新部署即可完美支持 LaTeX 公式。

总结

恭喜你！到这里，你已经成功搭建并掌握了属于自己的 Hexo 博客。从安装环境到发布部署，再到主题更换和多端同步，你已经从一个新手变成了一个合格的“博主”。

Hexo 和 Butterfly 主题还有更多强大的功能（比如添加友链、评论系统、音乐播放器等），你可以查阅它们的官方文档慢慢探索。享受写作的乐趣吧！

Hexo 博客 Windows GitHub

轻松上手：从零开始搭建你的个人博客（Hexo + Matery 主题）

2025-09-09 Hexo

Hexo Matery 博客

将Hexo博客部署到阿里云轻量服务器（保姆级教程）

2025-09-09 Hexo

Hexo 服务器博客部署