使用Hexo搭建Github静态页面与域名绑定

1. 简介

Hexo是一个基于Node.js的静态博客框架，能够快速生成静态网页。通过将 Hexo生成的静态网页部署到GitHub Pages，用户可以轻松搭建一个免费的个人网站。本教程将详细介绍如何使用Hexo搭建静态页面并将其托管到GitHub Pages上，同时绑定自定义域名。

2. 环境准备

在开始搭建Hexo静态页面之前，你需要完成以下环境配置：

1. Node.js：Hexo基于Node.js运行，因此需要安装Node.js和npm。可以通过以下方式安装：

# 安装Node.js和npm
brew install node

2. Git：Hexo生成的静态页面需要通过Git提交到GitHub Pages上，因此需要安装Git。可以通过以下方式安装：

# 安装 Git
brew install git

3. GitHub账号：需要注册一个GitHub账号，用于托管Hexo生成的静态页面。

4. Hexo：安装Hexo命令行工具，可以通过以下方式安装：

# 安装Hexo
npm install -g hexo-cli

3. 初始化Hexo项目

在完成环境准备后，可以开始初始化Hexo项目。

1. 首先，创建一个新的Hexo项目，并进入该文件夹：

mkdir my-blog
cd my-blog

2. 然后，初始化Hexo项目：

hexo init

初始化完成后，Hexo 会在项目文件夹中生成一系列文件和文件夹，包括 source/和_config.yml 等。

3. 安装Hexo依赖：

npm install

4. 启动Hexo本地服务器，查看Hexo默认生成的页面：

hexo server

在浏览器中输入 http://localhost:4000，即可查看Hexo默认生成的页面。

4. 部署到GitHub Pages

4.1 创建GitHub仓库

1. 在GitHub上创建一个新的仓库，用于托管Hexo生成的静态页面。仓库名称必须是以下格式之一：

• username.github.io：用于个人网站，其中username是你的GitHub用户名。（用于个人主页）
• project-name：用于项目网站，其中project-name是项目名称。（用于项目页面）

2. 获取仓库的SSH地址，用于后续提交Hexo生成的静态页面。

4.2 配置Hexo部署

1. 安装Hexo部署插件：

npm install hexo-deployer-git --save

2. 修改Hexo配置文件_config.yml，配置部署信息：

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

将username替换为你的GitHub用户名。需注意： - repo字段填写你的GitHub仓库SSH地址或者HTTPS地址。（推荐使用SSH地址） - branch字段填写你的GitHub Pages分支，如果你的仓库默认分支为master，则填写master；如果默认分支为main，则填写main。

3. 部署Hexo生成的静态页面到GitHub Pages：

hexo clean  # 清除缓存
hexo generate  # 生成静态页面
hexo deploy  # 部署到 GitHub Pages

（可以缩写为hexo d -g）

4. 在浏览器中输入 https://username.github.io，即可查看Hexo生成的静态页面。

5. 绑定自定义域名

你可以为你的 GitHub Pages绑定自定义域名，使网站更具个性化。以下是具体步骤。

5.1 获取域名(注册域名)

首先，你需要拥有一个域名。你可以通过域名注册商购买域名，例如阿里云、腾讯云、Godaddy等。

5.2 配置域名DNS解析

在域名注册商的控制台中，找到DNS设置（或者类似的设置），添加以下记录：

• 类型：CNAME，主机记录：www，记录值：username.github.io（将username替换为你的GitHub用户名）。
• 类型：CNAME，主机记录：@，记录值：username.github.io。

5.3 配置Hexo项目

在Hexo项目的source目录下创建一个名为CNAME的文件，并在文件中写入你绑定的自定义域名。例如：

www.yourdomain.com
yourdomain.com

将文件保存后，重新部署Hexo生成的静态页面到GitHub Pages：

hexo clean  # 清除缓存
hexo g  # 生成静态页面
hexo d  # 部署到 GitHub Pages

5.4 GitHub Pages设置

• 在GitHub仓库的Settings中，找到Custom domain，填写你的自定义域名，例如www.yourdomain.com，保存即可。

• 如果你的域名支持HTTPS，可以在Settings中启用Enforce HTTPS，开启HTTPS访问。

5.5 验证域名绑定

在浏览器中输入你的自定义域名，例如www.yourdomain.com，即可访问你的Hexo生成的静态页面。

6. 常见问题

6.1 部署时遇到Permission denied错误（权限问题）

如果使用SSH方式部署时遇到权限问题，请确保：

1. 你的SSH公钥已经添加到GitHub账号中。
2. 使用ssh-add命令将私钥添加到ssh-agent中：

ssh-add ~/.ssh/id_rsa

6.2 自定义域名访问出现404错误

确保一下事项：

1. 域名DNS解析已经生效，可以通过dig命令或者在线工具查询域名解析情况。
2. GitHub Pages设置的Custom domain填写正确。
3. 确保CNAME文件中填写的域名与GitHub Pages设置的Custom domain一致。
4. 等待一段时间，有时候DNS解析需要一段时间生效。

7. 总结

通过Hexo和GitHub Pages，搭建一个免费的静态博客非常简单且高效。希望本教程对你有所帮助，欢迎关注我的博客，获取更多技术教程和资源。