🎉 小白搭建个人博客教程（一）

发表于 更新于 分类于 阅读次数： 本文字数： 5.5k 阅读时长 ≈ 20 分钟

说来惭愧，一直想搭建一个自己的博客，平时用来记录学习笔记、写点碎碎念、跟大佬们交流学习。但一想到可能需要自己搞服务器、配置环境、搞域名……钱包一紧，勇气直接下线😅
直到最近几个月，深度体验了一些AI产品之后，发现现在的AI用着是真香啊~帮我搞网站，搭建量化回测系统，甚至帮我把之前写的屎山代码重构的明明白白。今天突发奇想，要不让他指导我搭建一个博客试试？
万万没想到啊，从零开始到上线，全程不到1h！整个过程丝滑到怀疑人生，于是想着将整个步骤都记录下来，就当作记录生活了，也希望能帮助到有需要的朋友
（当然这个教程也是在AI的帮助下完成的😄）

在开始之前，先聊聊我们要做什么

简单来说，我们要做的事情就是：

  1. 用一个叫 Hexo 的工具，帮你把你写的文章变成一个漂亮的网站
  2. 把这个网站放到 GitHub 上，这样全世界的人都能通过网址访问你的博客
  3. **给博客穿上一件好看的”衣服”**（NexT 主题），让它看起来简洁又现代

最终效果：你在电脑上用记事本写一篇文章 → 敲几个命令 → 文章就出现在你的博客网站上了！

你的博客地址会是：https://username.github.io

第一步：检查一下你的电脑准备好了没

我们需要确认电脑上有两个东西：Node.js 和 Git。

你可以把 Node.js 想象成一个”发动机”，Hexo 需要它才能运行。
Git 是一个”快递员”，帮你把博客”寄”到 GitHub 上。

怎么检查呢？

  1. 打开你的终端（就是你现在看到的那个黑色/白色的命令行窗口，也就是 Git Bash）
  2. 输入下面这三行命令，每输一行按一次回车：
1
node -v
1
npm -v
1
git --version
  1. 如果每一行都蹦出来一个版本号（比如 v18.17.0 这样的），那就说明没问题，可以继续了 ✅

🆘 如果 node 或 npm 报错说找不到命令怎么办？
说明 Node.js 没装好。去这个网站下载安装就行：https://nodejs.org/
选那个写着 LTS 的绿色按钮，下载后一路点”下一步”安装即可。
装完之后关掉终端，重新打开，再试一次上面的命令。

第二步：安装 Hexo（博客生成工具）

在终端里输入这个命令，然后回车：

1
npm install -g hexo-cli

这行命令的意思是：用 npm（Node.js 自带的”应用商店”）去安装 Hexo 这个工具。
-g 的意思是”全局安装”，就是装一次以后哪里都能用。

等它跑完（可能需要等一会儿），然后输入：

1
hexo version

如果看到一堆版本信息蹦出来，就说明安装成功了 ✅

🐌 安装特别慢怎么办？
因为 npm 默认从国外的服务器下载东西，在国内会比较慢。你可以先执行这个命令切换到国内镜像：

1
npm config set registry https://registry.npmmirror.com

然后再重新执行安装命令就会快很多了。

第三步：创建你的博客

现在我们要让 Hexo 帮你生成一个博客的”骨架”。

首先，在终端里进入你的项目文件夹：

1
cd D:\YourProjectionName

⚠️ 重要提醒：hexo init . 这个命令要求文件夹是空的。
如果你的文件夹里已经有东西了，需要先把它们暂时移到别的地方

然后，执行初始化命令：

1
hexo init .

这里的 . 表示”就在当前这个文件夹里创建博客”。

最后，安装博客需要的依赖（可以理解为博客运行需要的一些”零件”）：

1
npm install

等它跑完，你的博客骨架就搭好了！🎉

第四步：给博客穿上漂亮的衣服（安装 NexT 主题）

博客默认的样子不太好看，我们给它换一套好看的”皮肤”——NexT 主题。

先安装主题：

1
npm install hexo-theme-next

然后复制一份主题的配置文件到项目根目录：

1
cp node_modules/hexo-theme-next/_config.yml _config.next.yml

这样做的好处是：以后更新主题不会丢失你的个性化配置。
你只需要改 _config.next.yml 这个文件就行了，不用去动主题本身的文件。

第五步：填写你的博客信息

现在要告诉 Hexo”你是谁，你的博客叫什么”。

用编辑器（你现在用的 Cursor 就行）打开项目根目录下的 _config.yml 文件。

📌 注意：项目里有两个配置文件，别搞混了：

  • _config.yml → 这是博客的总配置（改博客名字、网址等）
  • _config.next.yml → 这是主题的配置（改外观、菜单等）

这一步我们改的是 **_config.yml**。

5.1 改博客名字和作者信息

在文件的最上面，找到这一块内容（大概在前 10 行左右），改成这样：

1
2
3
4
5
6
7
8
# Site
title: Your Blog's Name
subtitle: ''
description: 'Describe Your Blog'
keywords: Your Keywords
author: Your Name
language: zh-CN
timezone: Asia/Shanghai

一个一个解释：

  • title：你博客的名字，会显示在网页标题和侧边栏
  • description：博客的一句话简介
  • author：你的名字
  • language: zh-CN：让博客显示中文（不改的话默认是英文）
  • timezone：设成中国的时区

5.2 告诉 Hexo 用 NexT 主题

在同一个文件里，找到 theme 这一行（大概在第 100 行左右），把它改成：

1
theme: next

默认值是 theme: landscape，把 landscape 改成 next 就行。

5.3 设置博客网址

还是在同一个文件里，找到 url 那一行，改成：

1
2
url: https://username(这里是你Github的用户名).github.io
root: /

这个就是你博客以后的网址，部署到 GitHub 之后，别人通过这个网址就能访问你的博客。

5.4 文章更新时间的设置

还是在 _config.yml 里，搜索 updated_option，确认它是这样的：

1
2
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

📌 updated_option 决定了博客文章”更新于 xx 时间”这个信息怎么取值：

  • mtime（默认）：使用文件的系统修改时间。好处是你不需要手动维护，改了文章就会自动更新时间
  • date：使用文章 Front-matter 里的 date 字段（也就是发布时间），这样”更新时间”永远等于”发布时间”
  • empty：不记录更新时间

⚠️ 踩坑提醒：如果你后面配了 GitHub Actions 自动化部署（教程二会讲），用 mtime 需要额外处理，因为 Git 不会保留文件的原始修改时间，所有文件在 CI 检出时会变成同一个时间。教程二里会教你怎么解决这个问题。

改完之后，记得保存文件（按 Ctrl + S）。

第六步：配置主题的外观和菜单

现在打开另一个配置文件 **_config.next.yml**（注意，这次是带 next 的那个文件）。

这个文件比较长，大概有 900 多行，别慌，我们只需要改几个地方。

💡 小技巧：按 Ctrl + F 可以在文件里搜索关键词，帮你快速找到要改的地方。

6.1 选择外观风格

按 Ctrl + F 搜索 scheme:，你会看到类似这样的内容：

1
2
3
4
5
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

我们要用 Gemini 风格，所以改成这样：

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

就是把 Muse 前面加个 #（表示注释掉、不用它），然后把 Gemini 前面的 # 去掉（表示启用它）。

6.2 配置导航菜单

搜索 menu:，你会看到一堆菜单项，大部分前面都有 # 号（被注释掉了，意思是不显示）。

把你需要的菜单项前面的 # 去掉，改成这样：

1
2
3
4
5
6
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

这样你的博客顶部/侧边就会出现五个导航按钮：

  • 首页（home）
  • 关于（about）— 你的自我介绍页
  • 标签（tags）— 按标签浏览文章
  • 分类（categories）— 按分类浏览文章
  • 归档（archives）— 按时间浏览文章

6.3 设置头像（想设就设，不设也行）

搜索 avatar，改成这样：

1
2
3
4
avatar:
  url: /images/avatar.png
  rounded: true
  rotated: false

如果你想设头像的话：

  1. 在 source 文件夹下创建一个 images 文件夹
  2. 把你喜欢的头像图片改名为 avatar.png 放进去

如果暂时不想设头像，这一步可以跳过，不影响博客运行。

6.4 开启代码复制按钮（推荐）

搜索 copy_button，改成：

1
2
3
4
codeblock:
  copy_button:
    enable: true
    style: mac

这样你文章里的代码块右上角会出现一个复制按钮，读者点一下就能复制代码，很方便。

6.5 开启返回顶部按钮（推荐）

搜索 back2top，改成：

1
2
3
4
back2top:
  enable: true
  sidebar: false
  scrollpercent: true

这样页面右下角会出现一个小按钮，点一下就能回到页面顶部，还会显示当前读了百分之多少。

6.6 开启阅读进度条（推荐）

搜索 reading_progress，改成：

1
2
3
4
5
reading_progress:
  enable: true
  position: top
  color: "#37c6c0"
  height: 3px

这样页面最顶部会出现一条彩色进度条，告诉你文章读到了哪里。

6.7 文章更新时间显示设置（推荐）

搜索 post_meta，改成这样：

1
2
3
4
5
6
7
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: true
    another_day: false
  categories: true

📌 这里的关键是 updated_at 下面的两个选项：

  • enable: true：开启”更新时间”的显示
  • another_day: false：始终显示更新时间，即使更新日期和发表日期是同一天

如果 another_day 设为 true（默认值），NexT 主题只会在更新日期和发布日期不是同一天时才显示更新时间。这意味着当天发布当天修改的文章，你在页面上看不到”更新于”信息，只有把鼠标悬停在”发表于”上才会出现。设为 false 就不会有这个问题了。

改完之后，记得保存文件。

第七步：创建几个必要的页面

还记得我们刚才在菜单里加了”分类””标签””关于”这几个页面吗？光加了菜单还不够，我们还得把这些页面实际创建出来。

7.1 创建”分类”页面

在终端里输入：

1
hexo new page categories

Hexo 会帮你在 source/categories/ 文件夹下生成一个 index.md 文件。

用编辑器打开 source/categories/index.md，把里面的内容全部替换成：

1
2
3
4
5
6
---
title: 分类
date: 2026-02-08 00:00:00
type: "categories"
comments: false
---

这里的 type: "categories" 是关键，它告诉 Hexo”这是一个分类页面”。
comments: false 是说这个页面不需要评论功能。

7.2 创建”标签”页面

在终端里输入：

1
hexo new page tags

然后打开 source/tags/index.md，把内容全部替换成：

1
2
3
4
5
6
---
title: 标签
date: 2026-02-08 00:00:00
type: "tags"
comments: false
---

7.3 创建”关于”页面

在终端里输入：

1
hexo new page about

然后打开 source/about/index.md，把内容改成你的自我介绍，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---
title: 关于我
date: 2026-02-08 00:00:00
type: "about"
comments: false
---

## 关于我

你好，我是阿巴阿巴

欢迎来到我的个人博客。这里主要记录：

- 🔧 **技术文章** — 编程学习与开发经验
- 📝 **学习笔记** — 知识整理与总结
- 🌟 **生活随笔** — 日常感悟与思考

感谢你的访问！

当然啦，自我介绍的内容你可以随便写，想写多少写多少，以后随时都能改。

第八步：让博客能显示字数和阅读时长

我们需要安装一个小插件，让每篇文章上面显示”这篇文章有多少字””大概要读多久”。

先在终端安装插件：

1
npm install hexo-word-counter

然后打开 _config.yml（博客总配置文件），在文件的最末尾加上这段：

1
2
3
4
5
6
7
8
9
# 文章字数统计
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275

不用管这些参数是什么意思，直接复制粘贴就行，默认值已经够用了。

再打开 _config.next.yml（主题配置文件），搜索 symbols_count_time，改成：

1
2
3
4
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false

保存两个文件，搞定 ✅

第九步：写你的第一篇文章！

激动人心的时刻到了！现在来写你的第一篇博客文章。

在终端输入：

1
hexo new post "我的第一篇博客"

Hexo 会在 source/_posts/ 文件夹下帮你创建一个叫 我的第一篇博客.md 的文件。

用编辑器打开这个文件，把内容改成下面这样（你可以直接复制粘贴，然后再慢慢改成自己想写的内容）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
---
title: 我的第一篇博客
date: 2026-02-08 12:00:00
categories:
  - 技术文章
tags:
  - Hexo
  - 博客搭建
---

## 前言

这是我使用 Hexo + GitHub Pages 搭建的个人博客的第一篇文章！

## 为什么要搭建博客？

- 记录自己的学习过程
- 分享技术经验
- 锻炼写作和表达能力

## 技术栈

本博客使用了以下技术：

- **Hexo** — 静态博客框架
- **NexT** — Hexo 主题
- **GitHub Pages** — 静态网站托管

<!-- more -->

## 搭建过程

（在这里写搭建过程的详细内容...）

## 总结

博客搭建完成！以后会在这里持续更新文章，敬请期待。

📝 解释：

文件最上面被两个 --- 包裹的那部分，叫做”文章信息“（专业术语叫 Front-matter），它不会显示在文章里，而是告诉 Hexo 这篇文章的一些基本信息：

  • title：文章标题
  • date：发布日期
  • categories：这篇文章属于哪个分类（比如”技术文章””生活随笔””学习笔记”）
  • tags：给文章打的标签，方便以后按标签查找

第二个 --- 下面的内容才是文章的正文，用的是 Markdown 格式：

  • ## 表示二级标题
  • **加粗** 会显示成 加粗
  • - 开头的行会变成列表项
  • <!-- more --> 这行很有用：它上面的内容会作为”摘要”显示在首页，读者点进去才能看到完整文章

第十步：在自己电脑上先看看效果

文章写好了，先别急着发到网上，我们先在自己电脑上预览一下效果。

在终端里依次输入这三行命令：

1
hexo clean

这一步是清理之前生成的旧文件，就像打扫干净桌子再重新摆东西。

1
hexo g

这一步是让 Hexo 把你的 Markdown 文章变成网页（g 是 generate 的缩写，意思是”生成”）。

1
hexo s

这一步是在你电脑上启动一个临时的小服务器（s 是 server 的缩写），让你能在浏览器里看到博客效果。

你也可以把三步合成一行来执行（效果一样的）：

1
hexo clean && hexo g && hexo s

执行完之后，终端会显示类似这样的信息：

1
INFO  Hexo is running at http://localhost:4000/

打开浏览器，在地址栏输入 http://localhost:4000/，回车，你就能看到你的博客了！🎉

🔍 看看这几个地方对不对：

  • 博客标题是不是你设的名字？
  • 左边/右边有没有出现侧边栏？（Gemini 风格是双栏布局）
  • 上面的菜单（首页、分类、标签、归档、关于）点一下能不能跳转？
  • 文章上面有没有显示字数和阅读时长？
  • 你写的第一篇文章内容显示正常吗？

如果有什么不对的地方，回去检查一下配置文件有没有写错。

看完了之后，回到终端，按 Ctrl + C 就可以停掉这个预览服务器。

第十一步：在 GitHub 上创建一个”仓库”

你可以把”仓库”理解成 GitHub 上的一个文件夹，我们的博客网页就放在这个文件夹里。

  1. 打开浏览器，登录你的 GitHub 账号：https://github.com

  2. 点击页面右上角的 + 号，选择 **”New repository”**（新建仓库）

  3. 在 “Repository name”（仓库名）那里，输入：

    1
    username.github.io

    ⚠️ 这个名字一定要写对！ 格式必须是 你的用户名.github.io，一个字母都不能错，否则博客无法正常访问。

  4. 下面的选项这样设置：

    • Description：随便写点描述，比如 My personal blog，也可以不写
    • 选 Public（公开）—— GitHub Pages 免费版要求仓库必须是公开的
    • 其他选项全部不要勾选，保持默认就好

  5. 点击绿色的 “Create repository” 按钮

仓库就创建好了！先放着，我们回到终端继续操作。

第十二步：把博客发布到网上！

这是最后一步了，坚持住！

12.1 安装一个”部署助手”

在终端里输入：

1
npm install hexo-deployer-git --save

这个插件的作用是帮你把博客一键推送到 GitHub 上。

12.2 告诉 Hexo 要发布到哪里

打开 _config.yml（博客总配置文件），翻到文件的最底部，找到 deploy 部分，改成：

1
2
3
4
5
# Deployment
deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: main

这段话的意思是：用 Git 把博客推送到你的 GitHub 仓库的 main 分支。

保存文件。

12.3 一键部署！

在终端里输入这个命令：

1
hexo clean && hexo g && hexo d

hexo d 就是 hexo deploy 的缩写，意思是”部署”（把博客发到网上去）。

执行过程中，可能会弹出一个浏览器窗口让你登录 GitHub 账号，正常登录就行。

当你看到终端最后一行显示：

1
INFO  Deploy done: git

就说明 部署成功了！！！ 🎉🎉🎉

12.4 来看看你的博客吧！

等 1-2 分钟（GitHub 需要一点时间来处理），然后打开浏览器，输入：

1
https://username.github.io

你的个人博客正式上线了！ 🥳🎊

如果第一次打开显示 404（页面找不到），别慌，多等几分钟再刷新试试。
第一次部署 GitHub Pages 生效会稍微慢一点，这是正常的。

🎯 以后写新文章只需要三步

博客搭好之后，每次写新文章就特别简单了：

第一步：创建新文章

1
hexo new post "你的文章标题"

第二步：用编辑器打开 source/_posts/你的文章标题.md，写你的内容

记得在文件开头的信息区设置分类和标签：

1
2
3
4
5
6
7
8
9
10
11
---
title: 你的文章标题
date: 2026-02-08 12:00:00
categories:
  - 技术文章
tags:
  - 标签1
  - 标签2
---

这里写文章正文...

分类可以写这三种（也可以自己加新的）：

  • 技术文章
  • 生活随笔
  • 学习笔记

第三步：部署上线

1
hexo clean && hexo g && hexo d

就这么简单！三步搞定，新文章就发到网上了 ✅

📁 你的项目长什么样？

搭建完成后，你的项目文件夹里大概会有这些东西：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
My_Blog/
│
├── _config.yml          ← 博客总配置（改名字、网址这些）
├── _config.next.yml     ← 主题配置（改外观、菜单这些）
├── package.json         ← 记录项目用了哪些插件（一般不用管它）
│
├── source/              ← 你的内容都放在这里面 ⭐
│   ├── _posts/          ← 你写的文章就放在这里
│   ├── about/           ← "关于"页面
│   ├── categories/      ← "分类"页面
│   ├── tags/            ← "标签"页面
│   └── images/          ← 图片（比如头像）
│
├── scaffolds/           ← 文章模板（一般不用管）
├── themes/              ← 主题文件夹（npm 安装方式下这里是空的，正常的）
├── node_modules/        ← 插件和依赖（自动生成的，千万别手动改）
├── public/              ← Hexo 生成的网页文件（自动生成的，不用管）
└── docs/                ← 你的项目文档

💡 划重点：平时你只需要关注 source/_posts/ 文件夹就行了，文章都在这里面。
偶尔需要改一下 _config.yml 或 _config.next.yml 来调整博客设置。

🔧 常用命令小抄

你想做什么 在终端输入什么
创建新文章 hexo new post "文章标题"
本地预览博客 hexo clean && hexo g && hexo s
发布博客到网上 hexo clean && hexo g && hexo d
清除缓存 hexo clean

记不住没关系，常用的就那么两三个，用几次就记住了。

❓ 遇到问题了？别慌，看看这里

😱 输入 hexo 命令，终端说”不是内部或外部命令”

说明 Hexo 没装好。重新执行一下：

1
npm install -g hexo-cli

然后关掉终端窗口，重新打开一个，再试试。

😱 执行 hexo init . 说目录不为空

把文件夹里的东西暂时移到别的地方，等初始化完再移回来。详见第三步的说明。

😱 部署完了但是网站打开是 404

三种可能：

  1. 仓库名写错了 — 去 GitHub 检查一下仓库名是不是 2023Andrewyang.github.io（必须和你的用户名一模一样）
  2. 还没生效 — GitHub Pages 第一次部署可能要等几分钟，多刷新几次
  3. GitHub Pages 没开启 — 去仓库的 Settings → Pages 页面看看，Source 那里有没有正确选择 main 分支

😱 部署的时候要我输密码，但是输了不对

GitHub 已经不支持直接用密码了，你需要用一个叫 Personal Access Token 的东西（可以理解为”专用通行证”）：

  1. 打开 https://github.com/settings/tokens
  2. 点 “Generate new token (classic)”
  3. Note 随便写个备注（比如 blog deploy）
  4. Expiration 选择你想要的有效期
  5. 下面的权限勾选 **repo**（第一个大项，全选即可）
  6. 拉到最下面，点 “Generate token”
  7. 复制生成的 Token（⚠️ 这个只会显示一次，一定要复制保存好！）
  8. 部署的时候，密码那里粘贴这个 Token 就行了

😱 本地预览正常，但是部署到网上之后样式全乱了

打开 _config.yml，确认 url 那里写的是：

1
2
url: https://2023Andrewyang.github.io
root: /

改完之后重新部署一次就好了。

🤔 怎么给文章设置不同的分类？

在文章开头的信息区里写 categories 就行：

1
2
3
4
5
---
title: 我的文章
categories:
  - 生活随笔
---

想归到”技术文章”就写 技术文章，想归到”学习笔记”就写 学习笔记。

也可以搞多级分类（比如”技术文章”下面再分”JavaScript”子分类）：

1
2
3
4
---
categories:
  - [技术文章, JavaScript]
---

🎉 恭喜你！

到这里，你已经拥有了自己的个人博客！虽然过程可能有点长，但是一次搭好，以后写文章就非常轻松了。

以后想写东西的时候，打开终端，三步操作就能发布一篇新文章。