新手零门槛搭建个人博客：从0到1完整教程

本文将以「Hexo+GitHub Pages」组合为例（免费、稳定、新手友好），从准备工具到博客上线、个性化设置，每一步都配详细说明、参考链接和实用代码。

一、搭建前准备：明确目标+必备工具

1.1 明确博客核心需求

新手先想清楚3个问题，再选择搭建方案：

  • 是否需要免费方案？（推荐GitHub Pages，零成本）

  • 是否想自定义样式？（Hexo主题丰富，可视化配置）

  • 是否需要后期升级？（Hexo支持插件扩展，满足后续需求）

本文方案：Hexo（静态博客框架，轻量快速）+ GitHub Pages（免费托管）+ 主题（Next/Butterfly，新手友好），适合90%的新手。

1.2 必备工具下载与安装（附官方教程）

搭建前需要安装3个工具，全部免费，按步骤来就行：

  1. Git（版本控制工具，用于部署博客）

  2. Node.js（运行Hexo的环境）

    • 下载地址：Node.js官方下载（新手推荐下载“长期支持版LTS”，兼容性更好）

    • 安装教程：菜鸟教程Node.js安装（图文+视频）

    • 验证是否安装成功：终端输入 node -v 和 npm -v，均显示版本号则安装成功（npm是Node.js自带的包管理工具，无需单独安装）。

  3. 代码编辑器（可选，推荐VS Code，方便编辑博客内容和配置）

    • 下载地址：VS Code官方下载

    • 新手必备插件：Chinese (Simplified)（中文汉化）、Markdown All in One（Markdown编辑优化）、Hexo Helper（Hexo快捷命令）

二、核心步骤：从注册到博客上线

2.1 注册GitHub账号（免费托管博客）

GitHub是全球最大的代码托管平台，其Pages功能可以免费托管静态网站（博客就是静态网站），新手注册完全免费：

  1. 打开GitHub官网：https://github.com/，点击右上角“Sign up”注册。

  2. 填写注册信息：用户名（将作为博客域名的一部分，如xxx.github.io，建议简单好记）、邮箱、密码。

  3. 验证邮箱：注册后GitHub会发验证邮件，点击邮件中的链接完成验证（必须验证，否则无法创建仓库）。

  4. 创建博客仓库（关键！）：

    • 登录后，点击右上角“+”→“New repository”（新建仓库）。

    • Repository name（仓库名称）：必须填写 你的用户名.github.io（例如我的用户名是zhangsan，就填zhangsan.github.io），否则无法通过GitHub Pages访问。

    • Description（描述）：可选，填写“我的个人博客”即可。

    • Visibility（可见性）：选择“Public”（公开，免费），Private需要付费。

    • 勾选“Add a README file”（添加README文件），然后点击“Create repository”（创建仓库）。

参考教程：GitHub官方创建仓库教程 | 视频教程：B站GitHub注册+仓库创建（3分钟）

2.2 安装Hexo框架（本地搭建博客雏形）

Hexo是一款基于Node.js的静态博客框架，能快速生成博客页面，新手只需执行几个命令就能安装：

  1. 打开终端（Windows用PowerShell，Mac用终端），先切换到你想存放博客文件的目录（例如D盘的blog文件夹，命令：cd D:\blog，Mac用户直接cd ~/Documents/blog）。

  2. 全局安装Hexo：输入命令 npm install -g hexo-cli，等待安装完成（如果报错，Windows用户以管理员身份运行终端，Mac用户在命令前加sudo，即sudo npm install -g hexo-cli）。

  3. 验证Hexo安装成功：输入 hexo -v，显示Hexo版本号则安装成功。

  4. 初始化博客项目：输入命令 hexo init myblog（myblog是博客项目的名称，可自定义，比如blog），等待初始化完成（会自动下载博客所需的基础文件）。

  5. 进入博客项目目录：输入 cd myblog（如果你的项目名称不是myblog，替换成自己的名称）。

  6. 安装依赖包：输入 npm install，等待依赖安装完成。

  7. 本地预览博客：输入 hexo s（s是server的缩写），终端显示“Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.”，说明本地博客已启动。

  8. 访问本地博客：打开浏览器，输入 http://localhost:4000，就能看到默认的Hexo博客页面啦！

如果本地预览时无法访问，可能是4000端口被占用，可更换端口：hexo s -p 5000（5000是新端口，可自定义），然后访问http://localhost:5000。

参考链接：Hexo官方安装教程（中文） | 视频教程：B站Hexo本地搭建教程（10分钟）

2.3 配置Hexo，连接GitHub（实现博客线上访问）

本地博客搭建好后，需要配置Hexo，让它能将博客内容部署到GitHub Pages，这样别人就能通过互联网访问你的博客了。

步骤1：配置Git用户名和邮箱（关联GitHub账号）

在终端输入以下两个命令（替换成你GitHub的用户名和邮箱）：

1
2
3

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

步骤2：安装部署插件（Hexo部署到GitHub的工具）

在博客项目目录（myblog）下，输入命令：

1
2

npm install hexo-deployer-git --save

步骤3：修改Hexo配置文件（关键！）

打开博客项目目录（myblog），找到_config.yml文件（这是Hexo的核心配置文件，用VS Code打开编辑更方便），拉到文件最底部，找到“deploy”部分，修改为以下内容：

1
2
3
4
5

deploy:
  type: git
  repo: https://github.com/你的GitHub用户名/你的GitHub用户名.github.io.git
  branch: main  # 注意：GitHub新仓库默认分支是main，不是master，别写错！

示例（假设我的GitHub用户名是zhangsan）：

1
2
3
4
5

deploy:
  type: git
  repo: https://github.com/zhangsan/zhangsan.github.io.git
  branch: main

注意：配置文件中冒号后面必须加空格（YAML语法要求），否则会报错！比如“type: git”不能写成“type:git”。

步骤4：部署博客到GitHub（上线！）

在博客项目目录下，依次执行以下3个命令（部署核心步骤）：

1
2
3
4

hexo clean  # 清理缓存（每次部署前执行，避免残留文件导致报错）
hexo g      # 生成静态文件（g是generate的缩写，将博客内容生成HTML等文件）
hexo d      # 部署到GitHub（d是deploy的缩写，将生成的文件推送到GitHub仓库）

执行hexo d后，可能会弹出GitHub登录窗口，输入你的GitHub用户名和密码（或令牌）登录即可（如果是2021年后注册的GitHub账号，需要用个人访问令牌登录，获取令牌教程：GitHub官方令牌创建教程）。

部署成功后，打开浏览器，输入https://你的GitHub用户名.github.io（例如https://zhangsan.github.io），就能看到你的博客已经上线了！（如果无法访问，可能是DNS缓存问题，等待1-5分钟再试，或刷新浏览器）。

三、个性化博客

默认的Hexo博客样式比较简单，新手可以通过更换主题、修改配置，让博客更符合自己的风格，以下是最常用的个性化设置（全程可视化，无需复杂代码）。

3.1 更换主题（推荐2个新手友好主题）

Hexo有很多免费主题，新手推荐「Next」或「Butterfly」，样式美观、配置简单，且有详细的中文文档。

方案1：更换Next主题（简洁大气，适合技术博客）

  1. 在博客项目目录下，输入命令下载Next主题：

  2. 修改Hexo核心配置文件_config.yml，找到“theme”字段，将默认的“landscape”改为“next”：

  3. 本地预览效果：输入hexo clean && hexo g && hexo s（一键清理、生成、预览），打开浏览器访问http://localhost:4000，就能看到新主题了。

  4. Next主题配置：进入themes/next/_config.yml（Next主题的配置文件），可修改博客标题、副标题、头像、菜单等（参考官方文档：Next主题官方配置文档（中文））。

方案2：更换Butterfly主题（颜值高，功能全）

  1. 在博客项目目录下，输入命令下载Butterfly主题：

  2. 安装依赖包：

  3. 修改Hexo核心配置文件_config.yml，将“theme”改为“butterfly”：

  4. 本地预览：输入hexo clean && hexo g && hexo s，查看效果。

  5. Butterfly主题配置：参考官方文档（新手友好，图文教程）：Butterfly主题官方文档（中文）

3.2 修改博客基础信息（标题、头像等）

打开Hexo核心配置文件_config.yml，找到以下字段，修改为自己的信息（冒号后加空格）：

1
2
3
4
5
6
7
8

title: 我的个人博客  # 博客标题
subtitle: 记录生活，分享知识  # 博客副标题（可选）
description: 这是一个新手搭建的Hexo博客  # 博客描述（搜索引擎收录用）
author: 你的名字  # 作者名称
language: zh-CN  # 语言（中文）
timezone: Asia/Shanghai  # 时区（上海）
avatar: /images/avatar.jpg  # 头像路径（将头像图片放在source/images目录下，替换文件名）

修改完成后，执行hexo clean && hexo g && hexo s，本地预览效果。

四、发布第一篇博客（新手实操）

博客搭建好后，最重要的就是发布文章了，Hexo支持Markdown格式（新手推荐用Markdown写文章，简单易上手，Markdown语法教程：Markdown基础语法（中文））。

  1. 在博客项目目录下，输入命令创建新文章：

  2. 找到文章文件：执行命令后，会在source/_posts目录下生成一个我的第一篇博客.md文件（Markdown格式）。

  3. 编辑文章：用VS Code打开这个.md文件，按Markdown语法写文章，开头需要保留Front-matter（文章配置信息），示例如下：

  4. 发布文章：编辑完成后，执行以下命令部署到GitHub：

  5. 查看效果：打开浏览器，访问你的博客地址（https://你的用户名.github.io），就能看到刚发布的文章了！

五、新手常见问题排查（避坑指南）

问题1：执行命令时报错“bash: hexo: command not found”（Hexo未找到）

解决方法：

  • Windows用户：以管理员身份运行终端，重新执行npm install -g hexo-cli，安装完成后关闭终端重新打开。

  • Mac用户：执行sudo npm install -g hexo-cli（输入电脑密码），然后关闭终端重新打开。

  • 参考链接：Hexo官方问题排查

问题2：部署后访问博客显示404（页面找不到）

解决方法：

  • 检查仓库名称是否正确：必须是“用户名.github.io”，大小写一致。

  • 检查部署分支是否正确：Hexo配置文件中“branch”是否为“main”（GitHub新仓库默认分支是main，不是master）。

  • 等待1-5分钟：DNS缓存需要时间，部署后可能不会立即生效。

问题3：博客图片不显示

解决方法：

  • 图片路径：将图片放在source/images目录下，文章中引用路径为/images/图片名称.jpg（例如![图片描述](/images/photo.jpg)）。

  • 批量图片处理：推荐安装插件hexo-asset-image，支持相对路径引用图片，安装命令：npm install hexo-asset-image --save（使用教程：hexo-asset-image插件文档）。

六、进阶推荐（新手后期可尝试）

如果想让博客更专业，可以后期尝试以下功能：

  • 购买自定义域名（如www.你的名字.com），替换默认的github.io域名（教程：GitHub Pages自定义域名教程）。

  • 添加评论功能（推荐Valine，无需注册，教程：Valine评论功能快速上手）。

  • 添加网站统计（推荐Google Analytics或百度统计，查看博客访问量）。

  • 使用图床（如PicGo+阿里云OSS，存储博客图片，避免图片丢失）。

七、总结

新手搭建个人博客，核心流程就是：安装工具→注册GitHub→搭建Hexo本地博客→部署上线→个性化设置→发布文章

如果在搭建过程中遇到问题，优先查看官方文档或本文的参考链接

最后，博客的核心是内容，搭建完成后，坚持更新文章，慢慢就能形成自己的个人品牌啦！祝你搭建顺利，早日拥有属于自己的个人博客～