使用 Github Pages 和 Hexo 搭建自己的独立博客

前言

首先感谢你能来访问我的 Blog，这是我搭建的第一个博客网站，使用的是 Github Pages + Hexo 的形式搭建，从小白一路走了过来也挺不容易的 hhh，前前后后几分钟就能搭建完成了叭，现在把它记录下来，将来也许会是一种怀念叭.

入门

Github

搭建一个这样的 Blog 首先你得知道什么是 Github 和 Github Pages，你可以理解为咱们没有服务器，咱们将页面托管到了 Github 上

Github Pages

Github Pages 可以被认为是用户编写的、托管在 github 上的静态网页。使用 Github Pages 可以为你提供一个免费的服务器，免去了自己搭建服务器和写数据库的麻烦。此外还可以绑定自己的域名。

这是 Github Pages 的官网 Github Pages

Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

这是 Hexo 的官网 Hexo

node.js

安装 node.js

进入 node.js 官网：Node.js 官网
按照自己的机器选择对应的版本下载，我是 windous 64 位

然后差不多就是一直下一步 hhh~

具体可以参考Node.js 安装教程

如果遇到什么问题，一般百度都能解决，这里就不在赘述.

Git

安装 Git

这是 Git 官网：Git 官网

一般就是下载好自己对应的版本后一直下一步就好了

Git 的安装请参考：Git 安装教程

具体的 git 学习可以访问：Pro Git 中文版

检验软件是否安装成功

同时按下 Win 键和 R 键打开运行窗口,输入 cmd ，然后输入以下命令，有相应版本信息显示则安装成功，若不正确可以卸载软件重新安装。

1
2
3
git --version
node -v
npm -v

此外若安装成功，在桌面右键鼠标，可以看到菜单里多了 Git GUI Here 和 Git Bash Here两个选项，第一个是图形界面的Git操作，另一个是命令行，我们一般使用第二个

Hexo 安装

选择一个磁盘，新建一个文件夹，自己重命名文件夹（如：我的文件夹为：F\QiQi_Blog），博客相关文件将储存在此文件夹下，在该文件夹下右键鼠标，点击 Git Bash Here，输入以下 npm 命令即可安装,第一次可能需要久一点输入命令后等一等，再输入第二条命令

1
npm install hexo-cli -g

这个命令表示安装 hexo 的脚手架，如图所示即为安装成功

Hexo 初始化配置

初始化配置 Hexo

第一个命令，如图所示则安装成功如果失败了就再输入一次，比如说我就错了 ，第二个命令表示安装 hexo 部署到 git page 的 deployer

1
2
hexo init
npm install hexo-deployer-git --save

Hexo 安装完成后，将会在指定文件夹中新建所需要的文件，Hexo 文件夹下的目录如下：

本地查看效果

执行以下命令

1
2
hexo generate
hexo server

执行完即可登录 http://localhost:4000/ 查看效果

显示以下信息说明操作成功：

登录 http://localhost:4000/ 查看效果：

将博客部署到 Github Pages 上

到目前为止，我们的本地博客就成功搭建了，但是现在我们只能通过本地连接查看博客，我们要做的是让其他人也能够访问我们的博客，这就需要我们将博客部署到 Github Pages 上

部署前置步骤

一、注册 Github 账户：点击此处访问 Github 官网，点击 Sign Up 注册账户

二、创建项目代码库：点击 New repository 开始创建，步骤及注意事项见图：

三、配置 SSH 密钥：只有配置好 SSH 密钥后，我们才可以通过 git 操作实现本地代码库与 Github 代码库同步，在你第一次新建的文件夹里面（如：我的文件夹为：F\QiQi_Blog） Git Bash Here 输入以下命令

1
2
ssh-keygen -t rsa -C "your email@example.com"
//引号里面填写你的邮箱地址，比如我的是2268025923@qq.com

之后会出现：

1
2
3
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):
//到这里可以直接回车将密钥按默认文件进行存储

然后会出现：

1
2
3
Enter passphrase (empty for no passphrase):
//这里是要你输入密码，其实不需要输什么密码，直接回车就行
Enter same passphrase again:

接下来屏幕会显示：

1
2
3
4
5
6
Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:
这里是各种字母数字组成的字符串，结尾是你的邮箱
The key's randomart image is:
这里也是各种字母数字符号组成的字符串

运行以下命令，将公钥的内容复制到系统粘贴板上

1
clip < ~/.ssh/id_rsa.pub

四、在 GitHub 账户中添加你的公钥

1.登陆 GitHub，进入 Settings：

2.点击 SSH and GPG Keys：

3.选择 New SSH key：

4.粘贴密钥：

五、测试

直接在桌面右键 点击 Git Bash Here，输入以下命令输入以下命令：

1
ssh -T git@github.com

之后会显示：

输入 yes 后会显示：

此时表示设置正确

六、配置 Git 个人信息

Git 会根据用户的名字和邮箱来记录提交，GitHub 也是用这些信息来做权限的处理，输入以下命令进行个人信息的设置，把名称和邮箱替换成你自己的，名字可以不是 GitHub 的昵称，但为了方便记忆，建议与 GitHub 一致

1
2
git config --global user.name "此处填你的用户名"
git config --global user.email "此处填你的邮箱"

到此为止 SSH Key 配置成功，本机已成功连接到 Github

将本地的Hexo文件更新到Github的库中

一、登录 Github 打开自己的项目 yourname.github.io

二、鼠标移到 Code 按钮，点击按钮复制，或者直接把 SSH 全部复制

三、一键复制地址

四、打开你创建的 Hexo 文件夹（如：F:\QiQi_Blog\Hexo），右键用记事本（或者 Notepad++、Vs Code 等）打开该文件夹下的 _config.yml 文件

五、滑到最下面,按下图修改 _config.yml 文件并保存

六、在 Hexo 文件夹下分别执行以下命令

1
2
hexo g
hexo d

或者直接执行

1
hexo g -d

执行完之后会让你输入你的 Github 的账号和密码，如果此时报以下错误，说明你的 deployer 没有安装成功

1
ERROR Deployer not found: git

需要执行以下命令再安装一次：

1
npm install hexo-deployer-git --save

再执行

1
hexo g -d

你的博客就会部署到 Github 上了

七、访问博客

你的博客地址：https://你的用户名.github.io， 比如我的是：https://waterchen520.github.io ，现在每个人都可以通过此链接访问你的博客了

如何在博客上发表文章

博客已经成功搭建了，但是我们该怎么写博客呢？

一、新建一个空文章，输入以下命令，会在项目 \Hexo\source_posts 中生成 文章标题.md 文件，文章标题根据需要命名

1
hexo n "文章标题"

也可以直接在 \Hexo\source_posts 目录下右键鼠标新建文本文档，改后缀为 .md 即可，这种方法比较方便

二、用编辑器编写文章

md 全称 Markdown， Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法，非常的简单实用，常用的标记符号屈指可数，几分钟即可学会， .md 文件可以使用支持 Markdown 语法的编辑器编辑，然后将写好的文章（.md 文件）保存到 \Hexo\source_posts 文件夹下即可当我们用编辑器写好文章后，可以使用以下命令将其推送到服务器上

1
2
hexo g
hexo d

或者将两个命令合二为一输入以下命令：

1
hexo d -g

现在访问你的博客就可以看见写好的文章啦！

如何为博客更换自己喜欢的主题

博客也搭建好了，文章也会写了，但是！！！默认的主题并不喜欢怎么办？现在，我们就来为自己的博客更换自己喜欢的主题

比如我的主题是butterfly
里面也有一些安装教程, 可以自行学习
butterfly 主题官网: https://butterfly.js.org/

选择主题

进入 Hexo 官网的主题专栏，我们可以看见有许多的主题供我们选择: 主题商店

我们要做的就是把主题克隆过来，在此我们以主题 butterfly 为例，点进去我们就可以看见该主题作者的博客，鼠标滑到底，我们可以看见 主题 butterfly 的字样（其他主题类似），点击 butterfly ，页面就会跳转到该主题所有的相关文件在 Github 上的地址，复制该地址

再打开 Hexo 文件夹下的 themes 目录（如：E:\TRHX_Blog\Hexo\themes），右键 Git Bash Here，输入以下命令：

1
git clone 此处填写你刚才复制的主题地址

比如要安装 butterfly 主题，则输入命令：

1
git clone git@github.com:jerryc127/hexo-theme-butterfly.git

等待下载完成后即可在 themes 目录下生成 butterfly 文件夹，然后打开 Hexo 文件夹下的配置文件 _config.yml ，找到关键字 theme，修改参数为：theme：butterfly（其他主题修改成相应名称即可），再次注意冒号后面有一个空格！

返回 Hexo 目录，右键 Git Bash Here ，输入以下命令开始部署主题：

1
2
hexo g
hexo s

此时打开浏览器，访问 http://localhost:4000/ 就可看见我们的主题已经更换了，如果感觉效果满意，我们就可以把它部署到 Github 上了

打开 Hexo 文件夹，右键 Git Bash Here ，输入以下命令：

1
2
3
hexo clean
//该命令的作用是清除缓存，若不输入此命令，服务器有可能更新不了主题
hexo g -d

此时访问自己的博客即可看见更换后的主题，但我们仍然需要对主题的相关配置进行修改，比如网站标题，图标等等，Hexo 中有两份主要的配置文件，名称都是 _config.yml ，它们均是用于站点配置使用的。其中，一份位于站点根目录下（比如我的：F:\QiQi_Blog\Hexo_config.yml），主要包含 Hexo 本身整站的配置；另一份位于主题目录下（比如我的：F:\Blog\Hexo\themes\butterfly_config.yml），这份配置由主题作者提供，主要用于配置主题相关的选项，一般 _config.yml 文件里都有相关注释，按需修改即可

为你的 Hexo 博客配置个性域名

为了方便用户记住我们的博客站点的话，我们可以配置域名

配置域名

首先我们要购买域名，阿里云，腾讯云都可以，也不贵，一年几十

块钱，最便宜几块钱也能买到，以阿里云为例，我购买的域名是 anheyu.com，购买过程就不赘述了，选择阿里云的解析平台，来到阿里云的

域名控制台，点击进入域名解析列表或者直接点击域名后面的解析

方法一：点击添加记录，需要添加两个记录，两个记录类型都是 CNAME ，第一个主机记录为 @ ，第二个主机记录为 www ，记录值都是填你自己的博客地址（比如我的是：[](waterchen520.github.io)），保存之后域名解析就完成了！

方法二：两个记录类型为 A ，第一个主机记录为 @ ，第二个主机记录为 www，记录值都为博客的 IP 地址，IP 地址可以 cmd 中输入 ping 你的博客地址 获得（比如我的：ping waterchen520.github.io），保存之后域名解析就完成了！

为了使 GitHub 接收我们的域名，还需要在博客的根目录下添加一个名为 CNAME 的文件（注意不要加.txt，没有任何后缀名！），这个文件放到 Hexo 文件夹的 source 里面，（比如我的是：F:\QiQi_Blog\Hexo\source），文件里面填写你的域名（加不加 www 都行），比如要填写我的域名，文件里面就写：www.anheyu.com 或者 anheyu.com，经过以上操作，别人就可以通过 www.anheyu.com 、anheyu.com 、waterchen520.github.io 三个当中任意一个访问我的博客了！你的也一样！

有关加不加 www 的问题有以下区别：

教程就到这里啦，晚安

​