使用 Github Pages 和 Hexo 搭建博客 使用 Github Pages 和 Hexo 搭建博客引言在当今技术社区拥有一个个人技术博客是展示技能、记录学习历程的绝佳方式。GitHub Pages 提供免费静态网站托管服务而 Hexo 是一个快速、简洁且高效的博客框架。本文将带您从零开始实战搭建一个完全属于自己的博客系统。我们将通过大量代码示例让您不仅能搭建成功还能理解背后的原理。## 环境准备与 Hexo 安装### 前置条件在开始之前请确保您的机器上已安装以下工具-Node.js(版本 10.13建议使用 LTS 版本)-Git(用于版本控制和 GitHub 部署)### 安装 Hexo CLI打开终端执行以下命令全局安装 Hexo 命令行工具bash# 全局安装 hexo-clinpm install -g hexo-cli# 验证安装是否成功hexo --version### 初始化博客项目选择一个目录例如~/my-blog并初始化 Hexo 项目bash# 创建并进入博客目录mkdir ~/my-blogcd ~/my-blog# 初始化 Hexo 项目这会自动生成基础文件hexo init# 安装项目依赖npm install初始化完成后你的项目结构应如下所示my-blog/├── _config.yml # 博客配置文件 (核心)├── package.json # Node.js 依赖管理├── scaffolds/ # 模板文件夹├── source/ # 内容源文件│ └── _posts/ # 文章存放位置└── themes/ # 主题文件夹## 配置博客与撰写第一篇文章### 修改全局配置编辑_config.yml文件这是博客的核心配置。以下是关键配置项示例yaml# 博客的标题、副标题和描述title: 我的技术博客subtitle: 记录学习与成长description: 一个全栈工程师的成长日记author: 张三language: zh-CN# URL 设置url: https://your-username.github.io # 替换为你的 GitHub Pages urlroot: /# 文章永久链接格式permalink: :year/:month/:day/:title/# 主题设置稍后我们会更换主题theme: landscape### 创建第一篇文章使用 Hexo 命令创建新文章bash# 创建一个名为 hello-world 的文章hexo new Hello World 我的第一篇博客这会在source/_posts/目录下生成一个 Markdown 文件例如2023-10-01-hello-world.md。打开该文件编写内容markdown---title: Hello World 我的第一篇博客date: 2023-10-01 10:00:00tags: [入门, 教程]categories: 技术分享---# Hello World!这是我的第一篇博客文章使用 **Hexo** 和 **GitHub Pages** 搭建。## 代码示例Python 打印斐波那契数列下面是一个可运行的 Python 代码示例用于生成斐波那契数列python# 斐波那契数列生成器def fibonacci(n): “” 生成前 n 个斐波那契数列 :param n: 需要生成的项数 :return: 包含前 n 个斐波那契数的列表 “” if n 0: return [] elif n 1: return [0] elif n 2: return [0, 1] fib_sequence [0, 1] for i in range(2, n): next_fib fib_sequence[-1] fib_sequence[-2] fib_sequence.append(next_fib) return fib_sequence# 测试生成前 10 个斐波那契数print(“前10个斐波那契数列:”, fibonacci(10))# 输出: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]## 另一个代码示例JavaScript 数组去重下面是一个 JavaScript 数组去重函数javascript/** * 数组去重函数 * param {Array} arr - 输入数组 * returns {Array} - 去重后的新数组 */function uniqueArray(arr) { // 使用 Set 数据结构实现去重 return […new Set(arr)];}// 测试去重const testArray [1, 2, 2, 3, 4, 4, 5, 5];console.log(“去重结果:”, uniqueArray(testArray));// 输出: [1, 2, 3, 4, 5]## 小结通过这篇文章我学会了1. 使用 Markdown 编写博客文章2. 在 Hexo 中嵌入可运行的代码示例3. 配置文章的元数据标题、日期、标签等欢迎在评论区交流## 选择与配置主题### 安装热门主题Hexo 有丰富的主题生态。我们以经典的NexT主题为例bash# 进入博客目录cd ~/my-blog# 克隆 NexT 主题到 themes 文件夹git clone https://github.com/theme-next/hexo-theme-next themes/next### 启用主题修改_config.yml文件中的主题配置yaml# 将默认的 landscape 改为 nexttheme: next### 自定义 NexT 主题NexT 提供了丰富的配置选项。进入themes/next/_config.yml文件可以调整以下内容yaml# 选择主题样式Muse/Mist/Pisces/Geminischeme: Gemini# 菜单设置menu: home: / || fa fa-home archives: /archives/ || fa fa-archive tags: /tags/ || fa fa-tags categories: /categories/ || fa fa-th about: /about/ || fa fa-user# 社交链接social: GitHub: https://github.com/your-username || fab fa-github Twitter: https://twitter.com/your-username || fab fa-twitter# 开启数学公式支持适用于技术博客math: enable: true engine: mathjax## 本地预览与调试### 启动本地服务器在项目根目录运行bash# 清理缓存并生成静态文件hexo cleanhexo generate# 启动本地服务器默认端口 4000hexo server打开浏览器访问http://localhost:4000即可预览博客效果。修改文章或配置后服务器会自动刷新。### 常见问题排查如果遇到样式错乱可以尝试bash# 完全重新生成hexo clean hexo generate# 如果主题配置未生效检查 _config.yml 缩进是否正确# 注意YAML 对缩进敏感必须使用两个空格作为缩进## 部署到 GitHub Pages### 配置部署插件首先安装 Hexo 的 GitHub 部署插件bashnpm install hexo-deployer-git --save### 配置部署参数在_config.yml文件末尾添加部署配置yaml# Deployment 配置deploy: type: git repo: https://github.com/your-username/your-username.github.io.git branch: main # GitHub Pages 通常使用 main 分支 message: Site updated: {{ now(YYYY-MM-DD HH:mm:ss) }}### 一键部署执行以下命令Hexo 会自动构建并推送到 GitHubbashhexo cleanhexo generatehexo deploy### 设置 GitHub Pages1. 在 GitHub 上创建一个仓库命名为your-username.github.io注意必须与你的 GitHub 用户名一致。2. 进入仓库 Settings Pages将 Source 设置为Deploy from a branch选择main分支和/ (root)目录。3. 等待几分钟访问https://your-username.github.io即可看到你的博客。## 进阶优化技巧### 添加评论系统在 NexT 主题配置中启用Valine或Giscus基于 GitHub Discussionsyaml# themes/next/_config.yml 中comments: active: giscus giscus: repo: your-username/your-repo repo-id: your-repo-id category: Announcements### 配置自定义域名如果你有自己的域名可以在source/目录下创建CNAME文件bash# 在 source 目录下创建 CNAME 文件echo yourdomain.com source/CNAME# 重新部署hexo deploy然后在 DNS 提供商处添加 CNAME 记录指向your-username.github.io。## 总结通过本文的实战演练您已经掌握了使用 GitHub Pages 和 Hexo 搭建个人博客的核心流程。从环境安装、项目初始化、文章编写、主题配置到最终部署每一步都有详细的代码示例支撑。现在您拥有了一个完全属于自己、可扩展的技术博客平台。您可以持续撰写文章、更换主题、集成第三方服务如搜索引擎、统计代码等让博客成为您技术成长的最好见证。记住最好的博客始于第一篇文章——现在就动手写吧