Hexo
0%

Hexo + GitHub Pages 个人博客搭建流程指南

Posted on In ,

🚀 Hexo + GitHub Pages 搭建个人博客流程总结

本文根据 Hexo 与 GitHub Pages 的标准实践，简要总结了从环境配置到最终部署上线的四个主要阶段，帮助您快速建立自己的静态博客。

阶段一：环境准备与工具安装

这是本地工作的核心基础，确保 Hexo 和 Git 能够正常运行。

  1. 安装 Node.js： Hexo 框架依赖于 Node.js 环境（版本要求 6.9+），用于安装 Hexo 本身和各种插件。
  2. 安装 Git： 用于版本控制和将本地文件推送到 GitHub 远程仓库。
  3. 安装 Hexo CLI： 通过 Node.js 的包管理器 npm 全局安装 Hexo 命令行工具。
    • 命令：npm install -g hexo-cli

阶段二：Hexo 本地框架初始化

在本地创建一个 Hexo 博客项目文件夹，并进行必要的测试。

  1. 创建项目文件夹： 选择一个目录，并初始化 Hexo 框架。
    • 命令：hexo init <文件夹名称>
    • 命令：cd <文件夹名称>
  2. 本地预览： 运行本地服务器，在浏览器中查看博客初始效果。
    • 命令：hexo s (访问 http://localhost:4000)

阶段三：GitHub 仓库与 Pages 配置

这一步将创建博客的托管空间，是实现公开访问的关键。

  1. 创建 GitHub 仓库： 在 GitHub 上创建一个新的仓库，名称必须严格遵守 <YourUserName>.github.io 的格式（这是搭建个人主页网站的要求）。
  2. 配置 Hexo 部署依赖： 确保安装了 Git 部署插件。
    • 命令：npm install hexo-deployer-git --save
  3. 配置 Hexo 部署信息： 修改本地 Hexo 项目根目录下的 _config.yml 文件，配置 deploy 部分，指向您的 GitHub 仓库地址。
    • 推荐配置示例（使用 SSH 地址）： 
      1
      2
      3
      4
      deploy:
        type: git
        repo: git@github.com:<YourUserName>/<YourUserName>.github.io.git
        branch: main # 或 master，取决于您的 GitHub 默认分支
  4. 配置 SSH Key (推荐)： 如果使用 SSH 地址，需在本地生成 SSH Key 并将其添加到 GitHub 账户中，以实现免密推送。

阶段四：编写、生成与部署

博客内容上线发布的核心操作。通常只需要这三个命令循环执行。

序号 命令 作用
1. hexo clean 清除本地已生成的静态文件，确保重新构建是基于最新内容。
2. hexo g (hexo generate) 将 Markdown 源文件转换为最终的 HTML、CSS 等静态网页文件，生成到 public 文件夹。
3. hexo d (hexo deploy) 将 public 文件夹中的静态文件推送到 GitHub 仓库，完成在线发布。

常用命令合集：

  • 新建文章： hexo new "文章标题"
  • 完整发布： hexo clean && hexo g && hexo d

💡 总结与核心原理

Hexo + GitHub Pages 的核心工作流是：

本地 Hexo 将 Markdown 编译成静态 HTML $\rightarrow$ Git 将 HTML 推送到 GitHub 仓库 $\rightarrow$ GitHub Pages 服务将该仓库内容作为网站发布。

部署成功后，您的博客即可通过地址 https://<YourUserName>.github.io 访问。

进阶优化 (可选)

  • 更换主题： 通过下载主题包并在 _config.yml 中配置 theme: 字段。
  • 自定义域名： 购买域名，配置 DNS 解析，并在 GitHub 仓库中配置 CNAME 文件。

📚 参考