Hexo+GitHub搭建个人免费博客教程

前言

近些年来很多用户都喜欢使用 GitHub Pages来搭建Hexo静态博客网站，其最吸引人的莫过于完全免费使用，并且非常稳定。
虽然搭建时比较麻烦有点折腾，但是配置完成后基本不需要操心维护的事，甚至放了几年都忘记了，打开来看文章依然还在。
本文就详细介绍下如何使用 Hexo + GitHub 搭建免费个人博客网站的教程。

1.前期工作

1.1设置

输入代码时，核对准确，最好切换成英文输入法；
将文中的 “用户名” 和 “邮箱” 替换为自己的 GitHub 账户名和绑定的邮箱。
统一使用 Git Bash 进行操作(支持 Win、Mac)。
小白请严格按步骤进行，不要跳！

1.2环境搭建

Hexo 基于 Node.js，搭建过程中还需要使用npm（Node.js 已带）和git，因此先搭建本地操作环境，安装 Node.js 和 Git。
下载 Node.js 和 Git 程序并安装，一路点 “下一步” 按默认配置完成安装。
安装完成后Win+R输入cmd 并打开，依次输入node -v、npm -v和git --version并回车，出现程序版本号即可(如图)。

2.连接GitHub

使用邮箱注册 GitHub 账户，选择免费账户（Free），并完成邮件验证。

2.1设置用户名和邮箱

1 2	git config --global user.name "GitHub 用户名" git config --global user.email "GitHub 邮箱"

2.2创建SSH秘钥

输入 ssh-keygen -t rsa -C "GitHub 邮箱"，然后一路回车。

2.3添加秘钥

进入 [C:\Users\用户名.ssh] 目录（要勾选显示“隐藏的项目”），用记事本打开公钥 id_rsa.pub 文件并复制里面的内容。
登陆 GitHub ，进入 Settings 页面，选择左边栏的 SSH and GPG keys，点击 New SSH key。
Title 随便取个名字，粘贴复制的 id_rsa.pub 内容到 Key 中，点击 Add SSH key 完成添加(如图)。

2.4验证连接

打开 Git Bash，输入ssh -T git@github.com出现 “Are you sure……”，输入 yes 回车确认,显示 “Hi xxx! You’ve successfully……” 即连接成功（如图）。

3.创建Github page 仓库

GitHub 主页右上角加号新建New repository。
Repository name 中输入用户名.github.io。
勾选 “Initialize this repository with a README”。
Description 选填。
填好后点击 Create repository 创建。
创建后默认自动启用 HTTPS，博客地址为：https://用户名.github.io（如图）。

4.本地安装Hexo博客程序

新建一个文件夹用来存放 Hexo 的程序文件，如 Hexo-Blog。打开该文件夹，右键 -> Git Bash Here。

4.1安装Hexo

使用 npm 一键安装 Hexo 博客程序：

npm install -g hexo-cli

Mac 用户需要管理员权限（sudo），运行这条命令：

sudo npm install -g hexo-cli

安装时间有点久（真的很慢！），界面也没任何反应，耐心等待，安装完成后如下图。

4.2Hexo初始化和本地预览

初始化并安装所需组件：

1 2	hexo init # 初始化 npm install # 安装组件

完成后依次输入下面命令，启动本地服务器进行预览：
1
2
hexo g # 生成页面
hexo s # 启动预览
访问 http://localhost:4000，出现 Hexo 默认页面，本地博客安装成功！
Tips：如果出现页面加载不出来，可能是端口被占用了。Ctrl+C 关闭服务器，运行 hexo server -p 5000 更改端口号后重试。
Hexo 博客文件夹目录结构如下：见图

5.部署Hexo到Github page

本地博客测试成功后，就是上传到 GitHub 进行部署，使其能够在网络上访问。
首先安装 hexo-deployer-git：
npm install hexo-deployer-git --save

修改 _config.yml 文件末尾的 Deployment 部分，修改成如下：

deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git
  branch: master

完成后运行 hexo d 将网站上传部署到 GitHub Pages。
这时访问我们的 GitHub 域名 https://用户名.github.io 就可以看到 Hexo 网站了。

6.绑定域名（可选）

博客搭建完成使用的是GitHub的子域名，我们可以为 Hexo 博客绑定自己的域名替换 GitHub 域名，更加个性化和专业，也利于 SEO。
我们使用 Namesilo 进行注册，便宜好用没啥套路，使用优惠码 okoff 优惠一美元，com 域名大概 50 块一年。

6.1域名注册和解析

域名注册和解析教程：Namesilo 域名购买及使用教程
按上面教程注册并解析域名，在 DNS 设置部分，删除自带的记录，然后添加 CNAME 记录将 www 域名解析指向用户名.github.io。

6.2邦定域名到Hexo到博客

进入本地博客文件夹的 source 目录，打开记事本，里面输入自己的域名，如http://www.example.com保存名称为 “CNAME”，格式为 “所有文件”（无 .txt 后缀）。

清除缓存等文件并重新发布网站：

1
2
3

hexo clean   # 清除缓存文件等
hexo g       # 生成页面
hexo s       # 启动预览

现在就可以使用自己的域名访问 Hexo 博客了。

6.3开启HTTPS

配置自己的域名后，需要我们手动开启 HTTPS。打开博客所在 GitHub 仓库，Settings -> 下拉找到 GitHub Pages -> 勾选 Enforce HTTPS。
HTTPS 证书部署成功需要一定时间，等大概几分钟再访问域名，就可以看到域名前面的小绿锁了，HTTPS 配置完成（如图）。

7.开始使用

7.1发布文章

进入博客所在目录，右键打开 Git Bash Here，创建博文：hexo new “My New Post”。
然后 source 文件夹中会出现一个 My New Post.md 文件，就可以使用 Markdown 编辑器在该文件中撰写文章了。
写完后运行下面代码将文章渲染并部署到 GitHub Pages 上完成发布。以后每次发布文章都是这两条命令。
1
2
hexo g # 生成页面
hexo d # 部署发布
也可以不使用命令自己创建 .md 文件，只需在文件开头手动加入如下格式 Front-matter 即可，写完后运行 hexo g 和 hexo d 发布。

7.2网站设置

包括网站名称、描述、作者、链接样式等，全部在网站目录下的 _config.yml 文件中，参考官方文档按需要编辑。
注意：冒号后要加一个空格！

7.3更换主题

在 Themes | Hexo 选择一个喜欢的主题，比如 NexT，进入网站目录打开 Git Bash Here 下载主题：
git clone https://github.com/iissnan/hexo-theme-next themes/next
然后修改 _config.yml 中的 theme 为新主题名称 next，发布。（有的主题需要将 _config.yml 替换为主题自带的，参考主题说明。）

7.4 常用命令

hexo new "name"       # 新建文章
hexo new page "name"  # 新建页面
hexo g                # 生成页面
hexo d                # 部署
hexo g -d             # 生成页面并部署
hexo s                # 本地预览
hexo clean            # 清除缓存和已生成的静态文件
hexo help             # 帮助