使用 Hexo 在 Github Pages 上搭建个人博客

Hexo 和 GitHub Pages

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页
GitHub Pages 可以被认为是用户编写的、托管在 GitHub 上的静态网页

系统环境配置

GitHub Pages 配置

注册 GitHub 账号

访问 GitHub 官网 注册账号(已有 GitHub 账号的话可跳过此步骤)。

创建与 GitHub 同名的 Repository

  1. 点击右上角 + 号,选择 New repository
  2. Repository name 中输入 你的 GitHub 账号名称 .github.io
  3. 点击 Create repository 完成注册

配置 SSH key

SSH key 提供了一种与 GitHub 通信的方式,通过这种方式,能够在不输入密码的情况下,将 GitHub 作为自己的 remote 端服务器,进行版本控制

在文件管理中单击右键,选择 Git Bash here,打开 Git Bash ,输入一下命令

检查是否已经存在 SSH keys

1
ls -al ~/.ssh // 列出已经存在的 SSH keys

创建新的 SSH keys

如果没有已经存在的 SSH keys,或者不想用已有的 keys,可创建一个新的,创建一个长度为 4096 的 SSH key,指令如下:

1
ssh-keygen -t rsa -b 4096 -C "your_email@example.com" // 此处输入你的注册邮箱

显示如下:

1
2
3
4
Generating public/private rsa key pair. // 生成一对 SSH key
Enter a file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter] // 选择存储位置,直接回车就好
Enter passphrase (empty for no passphrase): [Type a passphrase] // 输入 SSH key 密码,不设密码的话,直接回车确认就好
Enter same passphrase again: [Type passphrase again] // 再次确认密码

把 SSH key 添加至 Github 账户信息中

执行以下命令

1
clip < ~/.ssh/id_rsa.pub // 将 SSH key 复制到剪贴板

  1. 打开 Github 官网,登陆后进入到个人设置 (点击头像->Settings)
  2. 点击左侧 SSH and GPG keys,点击 New SSH key 或者 Add SSH key
  3. Title栏填写名称,将之前复制的内容粘贴到Key栏中,最后点击Add SSH key即可

测试 SSH key 是否配置成功

1
ssh -T git@github.com

可能会弹出如下警告

1
2
3
The authenticity of host 'github.com (192.30.252.1)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

输入 yes 即可,最终显示

1
2
Hi username! You've successfully authenticated, but GitHub does not
provide shell access.

即表明配置成功

Hexo 安装及配置

官方文档:

安装 Hexo

任意位置新建一个文件夹, 如 D:\hexo,在此文件夹中单击右键,选择 “Git Bash Here”,打开 Git Bash 命令行界面。 执行以下命令

1
npm install hexo-cli -g

初始化博客

执行以下命令,hexo 会新建并初始化一个 “blog” 的文件夹,之后入该目录

1
2
hexo init blog
cd blog

安装 server 模块以供本地调试

执行以下代码并加载 server 模块

1
npm install hexo-server --save

参考:配置 hexo 为什么运行到 hexo server 这步就没用了?

启动服务器以供本地调试

1
hexo server // 或者 hexo s

现在打开 http://localhost:4000/ 就可以看到一篇内置的 blog 了,使用 Ctrl+C可以停掉服务器。

Tips

win10 系统 http://localhost:4000/ 可能无法打开, 可以使用以下命令换尝试其他端口

1
hexo s -p 3600 // -p 后面加端口号

参考:issues #1568

创建新的博文

1
hexo new "Hello Hexo"

命令执行后,会在 \source\_posts\ 目录下生成一个名为 Helli Hexo.md的文件,这个 markdown 文件就是你要编辑的博文了,可以再次启动hexo server 查看新生成的博文。对于文章具体的写作,请参考官方文档 Hexo 写作

生成静态文件

1
hexo generate

命令执行完毕后,会在\public\目录下生成一系列文件用于网页部署

部署至 GitHub Pages

安装 hexo-deployer-git

1
npm install hexo-deployer-git --save

_config.yml中修改参数,首先找到如下内容

1
2
3
4
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:

修改deploy段将其修改为

1
2
3
4
deploy:
type: git
repo: git@github.com:yuan-ji/yuan-ji.github.io.git // 替换为自己的 repo
branch: master

Tips:

: 号之后注意有一个空格

部署

1
hexo deploy // 或 hexo d

部署命令执行后,hexo 会自动把 public/ 目录下的文件上传至之前参数中的 GitHub 的 repo 中,并建立 commit ,之后就在浏览器中打开页面(例;https://yuan-ji.github.io/ ),查看是否部署成功。

总结

配置完成后,之后每次写新博文的步骤如下:

1
2
3
4
5
6
hexo new "new blog" // 生成新博文
hexo server // 启动服务器本地调试(非必须),简化为 hexo s
hexo clean // 清除缓存
hexo generate // 生成静态文件, 简化为:hexo g
hexo deploy // 部署至 GitHub,简化为:hexo d

到现在就已经完成 Hexo 的基本配置,可以开始写博文了。

Hexo 优化配置

更改 Hexo 主题

Hexo 提供了非常多的主题,具体参见 Themes 。默认官方主题为 landscape , 参考知乎推荐 有哪些好看的 Hexo 主题?,我选择了 Next 主题。Next 主题的官方文档十分详细,请参考以下链接:Next 主题配置官方文档

绑定个人域名

GitHub 提供绑定域名的功能,可将个人拥有的域名指向在 GitHub 上创立博客。

注册域名

域名供应商推荐:万网 (阿里云旗下)或者 国外的 GoDaddy

DNS 解析规则设置

  1. 进入 万网,登陆到 控制台,点击左侧的 域名, 在之前已购买的域名栏右侧 , 点击解析
  2. 点击添加解析记录类型 选择 CNAME, 主机记录 填写 www, 记录值 填写要指向的自己博客的地址,点击 保存

DNS 解析设置一段时间后,可通过在 WindowsCMDping 自己的域名地址查看是否解析成功

创建 CNAME 文件

在本地 source/ 目录下添加文佳 CNAME,内容为你所申请的域名地址 www.xxxxx.com,使访问你博客的地址跳转至所设置的域名上。
保存后,执行以下命令部署,使设置生效

1
2
3
hexo clean
hexo g
hexo d

此时在浏览器中输入自己的域名,即可直接跳到自己的博客了。

搜索引擎相关优化

请参考 Hexo-优化:提交sitemap及解决百度爬虫抓取-GitHub-Pages-问题

参考链接