零基础搭建个人技术博客: Hexo + GitHub Pages 完全指南

前言

写博客是一个费事费力的事情，为什么还要搭建自己的博客？

1. 在这个信息爆炸的时代，拥有一个属于自己的技术博客不仅能记录学习心得。
2. 技术沉淀，记录自己的成长，能够见证自己在不同阶段的技术成长。
3. 提高自己组织语言的能力，能够更好的表达自己的想法。
4. 便于了解自我，写博客是一个自我思考的过程，也是自我了解的过程，博客不限于技术，可以记录自己的生活，自己的想法，自己的感悟。

那么面对众多的博客平台和搭建方法，我们该选择哪个？今天，我将使用 Hexo 和 GitHub Pages 搭建一个专业、高效且完全免费的个人技术博客。无论你是刚入门的程序员，还是想要展示自己技术实力的资深开发者，这篇教程都能帮你轻松实现博客梦想。

来自印度的 Rohit Vohra 使用 iPhone 12 Pro Max 拍摄。

为什么选择 Hexo 和 GitHub ?

Hexo的优势

Hexo是一个快速、简洁且高效的博客框架，使用 Node.js 开发。它具有以下优势:

• 支持Markdown，写作体验极佳
• 丰富的插件和主题生态系统
• 高度可定制，满足个性化需求
• 静态网页生成，加载速度快

GitHub Pages的优势

GitHub Pages提供了免费的静态网站托管服务:

• 免费且可靠的托管
• 与版本控制无缝集成
• 支持自定义域名
• 自动化部署方便

这两者的结合不仅经济实惠，还能让你专注于内容创作，无需过多关注技术细节。

准备工作

在开始之前，请确保你的电脑上已经安装了以下软件:

• Node.js (推荐使用LTS版本)
• Git

安装步骤:

1. 访问Node.js官网，下载并安装适合你操作系统的版本。
2. 访问Git官网，下载并安装Git。

安装完成后，打开命令行工具，输入以下命令验证安装:

node --version
npm --version
git --version

如果能正确显示版本号，说明安装成功。

安装和配置 Hexo

1. 全局安装Hexo-CLI:

   npm install -g hexo-cli

2. 创建博客项目:

   hexo init my-blog
   cd my-blog

3. 基本配置:编辑 _config.yml 文件，设置网站的基本信息:

   title: Your Blog Title
   author: Your Name
   language: zh-CN
   timezone: Asia/Shanghai

4. 创建新文章:

   hexo new "My First Post"

5. 本地预览:

   hexo server

访问 http://localhost:4000 查看效果。

创建GitHub Pages仓库

1. 登录GitHub，创建一个新的公开仓库，命名为 username.github.io (将username替换为你的GitHub用户名)。
2. 在本地博客目录下，安装Git部署插件:

   npm install hexo-deployer-git --save

3. 编辑 _config.yml，添加部署配置:

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

在 hexo 设置 github 账号和密码

在 Hexo 中设置 GitHub 账号认证，现在推荐使用个人访问令牌（Personal Access Token，PAT）而不是直接使用密码：

1. 生成 GitHub 个人访问令牌：

   登录 GitHub
   点击右上角头像 -> Settings
   左侧菜单栏最下方找到 "Developer settings"
   点击 "Personal access tokens" -> "Tokens (classic)"
   点击 "Generate new token" -> "Generate new token (classic)"
   设置令牌权限：
   
   填写 Note（描述）：如 "hexo blog deploy"
   选择有效期（Expiration）
   勾选 repo 权限
   
   
   点击 "Generate token"
   重要：立即复制生成的令牌，因为它只显示一次

2. 在_config.yml 中部署配置中直接包含令牌：

   deploy:
     type: git
     repo: https://用户名:你的访问令牌@github.com/用户名/用户名.github.io.git
     branch: main

便捷的开发方案

每次在本地修改完需要从新执行 hexo server 来启动项目才能看到修改后的效果，每次都需要手动执行，非常繁琐。

使用 Hexo 的监控模式启动服务器：

hexo server --watch
# 或简写为
hexo s --watch

这样当您修改文件时，服务器会自动刷新。

更推荐的方式是安装 hexo-browsersync 插件，它提供更强大的实时预览功能：

# 安装插件
npm install hexo-browsersync --save

然后正常启动服务器

hexo server

部署Hexo到GitHub Pages

1. 生成静态文件:

   hexo clean && hexo generate

2. 部署到GitHub:

   hexo deploy

访问 https://username.github.io 查看你的博客。

自定义和优化你的博客

安装主题

1. 选择主题: 访问 Hexo 主题市场，选择一个你喜欢的主题。

2. 安装主题:

   git clone https://github.com/theme-author/theme-name.git themes/theme-name

3. 修改 _config.yml:

   theme: theme-name

安装优化SEO

1. 安装SEO优化插件:

   npm install hexo-generator-sitemap hexo-generator-feed --save

2. 在 _config.yml 中添加相关配置。

结论和进阶建议
通过本教程，你已经掌握了使用Hexo和GitHub Pages搭建个人技术博客的全过程。这不仅是展示你技术实力的平台，更是促进学习和交流的有力工具。随着技术的不断发展，静态网站生成器和JAMstack架构可能会变得更加普及。建议你持续关注这个领域的新趋势，如 Next.js 或 Gatsby 等技术，它们可能为个人博客提供更多可能性。
进阶主题