hexo博客部署搭建

效果演示

欢迎访问我的个人博客，并期待您的友链申请。

前置条件

为了顺利搭建 Hexo 博客，请确保您已经正确安装了以下工具：

• Git
• Node.js（推荐使用稳定的 v16 或 v18 版本，避免使用最新的 v22 版本以防止兼容性问题）

---

安装Git

Windows

1. 访问官网下载：https://git-scm.com/download/win
2. 运行安装程序，默认选项一路下一步（建议勾选 Use Git from the Windows Command Prompt）
3. 安装完成后，打开命令行输入验证：

git --version

macOS

方法一 （ 推荐）使用 Homebrew：

brew install git

方法二 下载安装包：
官网下载：https://git-scm.com/download/mac

验证安装：

git --version

Linux（Ubuntu/Debian）

sudo apt update
sudo apt install git -y
git --version

---

安装 Node.js（含 npm）

Windows/macOS

1. 访问官网下载 LTS 版本：https://nodejs.org
2. 运行安装程序，默认选项完成安装
3. 验证安装：

node -v  # 查看 Node 版本
npm -v   # 查看 npm 版本

macOS（Homebrew 方式）

brew install node

Linux（Ubuntu/Debian）

1. 使用 NodeSource 仓库安装：

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs

2. 验证：

node -v && npm -v

---

配置 Git 用户信息（首次使用必做）

git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

---

简单测试

1. 新建一个项目文件夹，运行：

   git init  # 初始化 Git 仓库
   npm init -y  # 初始化 Node 项目

2. 创建一个 app.js 文件并写入：

   console.log("Hello Git & Node!");

3. 运行脚本：

   node app.js

---

Hexo博客搭建

---

安装hexo

1. 通过以下命令全局安装 Hexo CLI：

npm install hexo-cli -g

2. 验证安装是否成功：

hexo -v

若出现 Hexo 的版本号，则表示安装成功。

---

本地环境初始化

1. 创建博客站点

   在您想要存放博客项目的目录中，依次执行以下命令：

   hexo init myblog
   cd myblog
   npm install

   如果一切正常，您会看到类似如下的提示信息，表明初始化已完成：

   

2. 项目结构概览

   使用 VSCode 打开 myblog 目录，其主要文件夹和文件包括：

   • _config.yml: 博客的主要配置文件
   • source/_posts: 存储博客文章的位置

---

预览博客

在项目根目录下运行以下命令来清理缓存、生成静态文件并启动服务器：

hexo clean && hexo generate && hexo server

此时，您可以打开浏览器访问 http://localhost:4000 查看本地博客的效果。

---

更换主题

我们推荐使用美观且功能丰富的 Fluid 主题。

1. 安装主题

   在博客根目录中执行以下命令：

   npm install --save hexo-theme-fluid

2. 配置主题

   创建并编辑 _config.fluid.yml 文件，将其内容从官方提供的模板复制粘贴过来。

3. 指定主题

   修改 _config.yml 文件中的 theme 字段为 fluid，同时设置语言选项：

   theme: fluid
   language: zh-CN

4. 创建“关于”页面

   运行命令：

   hexo new page "about"

   编辑 /source/about/index.md 文件，确保包含 layout: about 属性。

5. 重启服务器

   再次运行：

   hexo clean && hexo generate && hexo server

   浏览器刷新后即可查看新主题的效果。

---

部署至 GitHub Pages

1. 创建 GitHub 仓库

   登录 GitHub 并创建一个新的公共仓库，命名为 <username>.github.io，其中 <username> 替换为您自己的 GitHub 用户名。

2. 配置部署信息

   打开博客目录下的 _config.yml 文件，在末尾添加或修改 deploy 模块，填入刚创建的仓库地址：

   deploy:
     type: git
     repo: <仓库克隆链接>
     branch: main

3. 安装 Git 部署插件

   执行命令：

   npm install hexo-deployer-git --save

4. 执行部署

   最后一步，运行以下命令完成部署：

   hexo clean && hexo generate && hexo deploy

   成功后，您可以通过 [<username>.github.io](http://<username>.github.io) 访问您的在线博客。