从零搭建 Hexo 博客：2025年最保姆级的简明教程

Hexo 博客 GitHub
Hexo
文章字数:   2.4k
阅读时长:   9 分

你是不是早就厌倦了某些博客平台那千篇一律的界面？是不是受够了无穷无尽的广告和信息推送？是不是也想拥有一个完全属于自己的、可以随心所欲定制的博客，但一看到复杂的教程和代码就头疼？

别担心，这篇教程就是为你准备的！我会用最简单直白的方式，手把手带你从零开始，用 Hexo 和 GitHub 搭建一个漂亮、免费、属于你自己的博客。你只需要一点点耐心，跟着步骤走就行。

为什么选择 Hexo + GitHub？

简单来说，Hexo 是一个超赞的博客框架，它能把我们写的 Markdown 文章（一种很简单的写作语法）快速生成漂亮的静态网页。而 GitHub 是全球最大的代码托管平台，它提供了一个免费的服务叫做 GitHub Pages，刚好可以用来托管我们用 Hexo 生成的网页。

这个组合的优点是：

  • 免费：不需要购买服务器，省钱！
  • 快速：静态网页加载速度飞快。
  • 高定制性：从主题到插件，你可以掌控一切。
  • 专注写作：用 Markdown 写作，体验极佳。

话不多说，我们开干！

第一步：准备工作 (磨刀不误砍柴工)

在开始之前，我们需要在电脑上安装两个必备软件：Node.js 和 Git。

  1. Node.js: 这是 Hexo 运行所需的环境。直接去 Node.js 官网 下载推荐的 “LTS” 版本，然后像安装普通软件一样下一步到底即可。
  2. Git: 这是一个代码版本管理工具，我们用它来下载主题和部署博客。同样，去 Git 官网 下载对应你操作系统的版本，一路下一步安装。

安装完成后，打开你电脑的命令行工具（Windows 用户可以搜索 cmd 或 PowerShell，Mac 用户使用 Terminal），我们来验证一下。

第二步：在本地搭建你的博客框架

准备工作就绪，现在正式开始搭建博客主体。

1. 安装 Hexo 脚手架

在命令行里输入并执行以下命令，这个命令是全局安装 Hexo 的命令行工具，这样以后在任何地方都能使用 hexo 命令了。

npm install -g hexo-cli

2. 创建博客文件夹

找个你喜欢的位置，新建一个文件夹，比如我叫它 MyBlog。然后进入这个文件夹，在文件夹地址栏输入cmd并回车，或者在文件夹内右键选择“在终端中打开”。

接着，输入初始化命令：

hexo init

这个命令会自动帮你把 Hexo 的所有模板文件下载到 MyBlog 文件夹里。

3. 安装依赖

继续在命令行里执行，安装所有必需的插件和依赖包。

npm install

4. 见证奇迹的时刻！

没错，你的博客主体已经搭好了！不信？跑起来看看。

hexo server

命令行会提示 Hexo is running at http://localhost:4000/。现在打开浏览器，访问 http://localhost:4000，你应该能看到一个原始的 Hexo 博客页面了！

是不是有点小激动？先别急，在命令行里按 Ctrl + C 停止本地服务，我们来给它“装修”一下。

第三步：个性化你的博客

默认主题有点朴素，我们来换个更流行、功能更强大的主题，比如 NexT。

1. 更换主题

在你的博客根目录（也就是 MyBlog 文件夹）下运行 Git 命令，把 NexT 主题下载到 themes 文件夹里。

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

下载好之后，需要告诉 Hexo 我们要用这个新主题。打开博客根目录下的 _config.yml 文件（我们称之为站点配置文件），找到 theme 字段，修改它：

# ... 其他配置 ...
theme: next
# ... 其他配置 ...

2. 站点信息配置

趁着打开了站点配置文件 _config.yml，我们顺便把博客的基本信息改一下。注意，冒号后面必须有一个空格！

# Site
title: 未知的世界                # 你的博客名称
subtitle:                       # 副标题，可以留空
description: Do something cool  # 一句签名或描述，会出现在搜索引擎结果里
author: LulalaP                 # 你的大名
language: zh-CN                 # 网站语言，改为 zh-CN 更符合中文习惯
timezone:                       # 时区，可以留空

3. 设置头像和菜单

接下来我们主要修改主题的配置。打开 /themes/next/_config.yml（我们称之为主题配置文件）。

  • 设置头像：

    1. 在博客根目录的 source 文件夹里，新建一个 uploads 文件夹。

    2. 把你准备好的头像图片（比如 avatar.jpg）放进去。

    3. 在主题配置文件中，找到 avatar 字段并修改：

      avatar:
  url: /uploads/avatar.jpg # 图片路径
  rounded: true           # 是否圆形头像
  rotated: false          # 鼠标悬浮时是否旋转

  • 添加菜单：
    在主题配置文件中，找到 menu 字段，把你想显示的菜单项前面的 # 去掉就行了。

    menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

4. 创建新页面

我们开启了“关于”、“标签”、“分类”菜单，但还没有对应的页面。现在来创建它们。在博客根目录下运行：

hexo new page "about"
hexo new page "tags"
hexo new page "categories"

然后分别编辑 source/tags/index.md 和 source/categories/index.md，添加 type 字段，这样主题才知道如何渲染它们。

  • 编辑 source/categories/index.md:
---
title: 分类
date: 2024-04-10 23:40:31
type: "categories"
---
  • 编辑 source/tags/index.md:
---
title: 标签
date: 2024-04-10 23:41:25
type: "tags"
---
  • 对于 about 页面（source/about/index.md），你可以在 --- 分割线下面用 Markdown 语法自由地写下你的自我介绍。

现在，你可以重新运行 hexo g && hexo s 来预览你的新外观了！（hexo g 是生成静态文件，hexo s 是本地预览）

第四步：部署到 GitHub，让全世界看到！

本地玩得差不多了，是时候让你的博客上线了。

1. 准备 GitHub 仓库

首先，你需要一个 GitHub 账号。注册后，登录并创建一个**新的仓库 (New repository)**。

这个仓库的命名有特殊格式，必须是：你的用户名.github.io。比如，你的 GitHub 用户名是 LulalaP，那么仓库名就必须是 LulalaP.github.io。

2. 配置部署信息

回到你的博客，打开站点配置文件 _config.yml，找到 deploy 字段，修改成这样：

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

3. 安装部署插件

Hexo 需要一个插件才能把代码推送到 Git。在博客根目录运行：

npm install hexo-deployer-git --save

4. 部署！

万事俱备，只需两步。在博客根目录依次执行：

hexo g    # 生成静态文件
hexo d    # 部署到 GitHub

第一次部署时，可能会弹窗让你输入 GitHub 的用户名和密码。执行成功后，稍等一两分钟，访问 https://你的用户名.github.io，你会发现，你的博客已经可以在线访问了！恭喜！

第五步：发布你的第一篇文章

博客建好了，总得写点东西。

  1. 创建文章：在博客根目录运行命令。

    hexo new "我的第一篇文章"

  2. 编辑文章：这个命令会在 source/_posts 文件夹下生成一个 我的第一篇文章.md 文件。打开它，你会看到类似下面的内容，这叫做 Front-matter，用来配置文章信息。

    ---
title: 我的第一篇文章
date: 2024-09-07 10:00:00
tags: [技术, 教程]
categories: [日常折腾]
---

这里是你的正文内容，用 Markdown 语法尽情写作吧！

    你可以在 --- 下方开始你的创作。

  3. 发布文章：写完后，保存文件，然后执行我们熟悉的部署命令。

    hexo g -d

    -d 是 deploy 的缩写，这个命令相当于 hexo g && hexo d，一步到位。

第六步（可选）：绑定独立域名

如果你觉得 github.io 的域名不够酷，可以绑定自己的域名。

  1. 购买域名：去 NameSilo、GoDaddy 等域名服务商购买一个你喜欢的域名。
  2. 解析域名：在你的域名提供商的 DNS 设置里，添加以下记录：
    • 添加 4 条 A 记录，主机名填 @，指向 GitHub Pages 的服务器 IP： 
      185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
    • 添加 1 条 CNAME 记录，主机名填 www，指向你的 GitHub Pages 地址 你的用户名.github.io。
  3. 博客设置：在博客的 source 文件夹下，创建一个名为 CNAME 的文件（没有后缀名），里面只写一行你的域名，比如 www.yourdomain.com。
  4. 重新部署：最后，执行 hexo g -d。等待 DNS 生效后，你就可以通过自己的域名访问博客了！

常用命令汇总

最后，附上几个最常用的命令，帮你快速上手：

  • hexo new "文章标题"：新建一篇文章。
  • hexo clean：清除缓存和已生成的静态文件。
  • hexo g 或 hexo generate：生成静态文件。
  • hexo s 或 hexo server：启动本地服务器预览。
  • hexo d 或 hexo deploy：部署博客。
  • hexo g -d：生成并部署，懒人必备。

到这里，你的个人博客就已经完全搭建好了！从更换主题、添加评论、数据统计到各种炫酷的特效，Hexo 和 NexT 主题还有海量的配置和插件等着你去探索。

这只是一个开始，真正有趣的是用它记录你的想法、分享你的知识。祝你玩得开心，写作愉快！

Hexo 博客 GitHub
  目录