用Hexo搭建Github Pages博客

发表于 更新于 分类于 阅读次数： 本文字数： 1.8k 阅读时长 ≈ 6 分钟

此博客位于 Github Pages ，利用 Hexo 博客框架，采用 Next 主题，以下一切步骤皆建立在此基础上

准备：

  1. 环境搭建： Git 和 Node.js
  2. 一个 GitHub 账户
  3. 连接 Github
  4. 创建 Github Pages 仓库
  5. 安装 Hexo 博客框架
  6. 网站配置
  7. 主题配置
  8. 新建文章
  9. 本地预览
  10. 部署 Hexo 到 Github Pages

连接 Github

  1. 创建 Github 账号

2. 在 Git 设置用户名和邮箱

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

3. 创建SSH秘钥

1
ssh-keygen -t rsa -C "GitHub 邮箱"

然后一路回车

4. 添加秘钥

  • 进入 C:\Users\用户名\.ssh 此中会有两个文件：id_rsa id_rsa.pub 分别是私钥和公钥
  • 用记事本打开 id_rsa.pub 复制所有内容
  • 登录 Github 进入 Settings 页面，选择左栏的 SSH and GPG keys ，点击 New SSH key
  • Title 填公钥的名字， Key 填刚刚复制的内容，点击 Add SSH key 完成添加。

5. 验证连接

回到 Git bash ，输入

1
ssh -T [email protected]

出现 Are you sure you want to continue connecting (yes/no/[fingerprint])? 输入 yes 回车确认。

显示 Hi xxx! You’ve successfully authenticated… 即连接成功。

创建 Github Pages 仓库

创建 Github Pages 仓库
打开并登录 Github 网站，点击右上角加号 –> New repository
之后填写 Repository name ，注意!!! 由于创建的是 Github Pages 仓库，所以 Repository name 必须填写自己的小写用户名。将其设置为 Public 之后点击最下面的 Create repository 即可创建成功。

安装 Hexo

  • 创建一个文件夹用来存放 Hexo 的程序文件和日后创建的文章及网站源码 如 D:/Hexo 右键 -> Git bash Here

  • 使用 npm 安装 Hexo

1
npm install -g hexo-cli
  • 初始化并安装所需组件
1
2
hexo init      # 初始化
npm install    # 安装组件

安装完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

网站配置

网站的站点配置文件为 Hexo/_config.yml

站点配置

1
2
3
4
5
6
7
8
# Site
title: Surfer's Blog # 网站标题
subtitle: '' # 网站副标题
description: '' # 网站描述
keywords:
author: Surfer # 网站作者
language: zh-CN # 网站使用的语言，网站所支持的语言在主题文件夹下的language中，此处填文件名
timezone: 'Asia/Shanghai' # 网站时区

网址配置

1
2
3
4
url: http://example.com # 博客网址
root: / # 网站根目录
permalink: :year/:month/:day/:title/ # 文章的永久链接格式 
permalink_defaults: # 永久链接中各部分的默认值

注意

  • 关于 url 和 root ：如果网站存放在子目录中，例如 http://example.com/blog，则将 url 设为 http://example.com/blog 并把 root 设为 /blog/
  • 关于永久链接：若按默认的 :year/:month/:day/:title/ 设置，则链接按文章创建的时间和标题来定义，例如在2022年1月1日创建的名为”Blog”的文章，则链接为http://example.com/2022/01/01/Blog/

    这样的链接太长，所以我设置为 :category/:title/ 即文章分类/标题，设置方法请 跳转此处 ，关于更多永久链接的设置，请参考 Hexo 官方文档

网站目录配置

1
2
3
4
5
6
7
8
source_dir: source # 资源文件夹，用来存放用户资源
public_dir: public # 公共文件夹，用于存放生成的站点文件
tag_dir: tags # 标签文件夹
archive_dir: archives # 归档文件夹
category_dir: categories # 分类文件夹
code_dir: downloads/code # Include code 文件夹
i18n_dir: :lang # 国际化（i18n）文件夹
skip_render: # 跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中

配置部署

1
2
3
4
deploy:
  type: git # 部署类型
  repo: [email protected]:你的用户名/你的用户名.github.io.git # 你的 Github Pages 存储库的SSH网址
  branch: master # 部署的分支

主题配置

安装主题

用Git安装 Hexo-Next 主题

1
git clone https://github.com/next-theme/hexo-theme-next themes/next

选择主题

打开网站配置文件_config.yml，找到theme更改为以下内容

1
theme: next

使用代替主题配置文件

传统的方法是使用 next/_config.yml 配置主题，但此方法在主题更新时并不顺利

建议使用独立的 _config.[theme].yml 文件，防止更新主题时丢失以前所做的更改

  • 在站点根目录 Hexo/ 下创建 _config.next.yml 文件
  • 要更改主题，要在 _config.next.yml 定义值，例如要开启菜单中的分类页面，就在 _config.next.yml 中添加 去掉 # 的值
1
2
menu:
  categories: /categories/ || fa fa-th

建议添加所有关于menu的值以便日后更改

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

更改只需要去掉 # 注释

⚠️ 注意缩进!!!

新建文章

在 Hexo 文件夹 右键 –> Git bash Here

1
hexo n "标题"

之后会在 Hexo\source\_posts 下创建一个名为 “标题.md” 的文件，打开即可编辑

创建”分类” “标签”选项

创建分类

在 Git bash 执行

1
hexo new page categories

成功后提示

1
INFO  Created: ~/Hexo/source/categories/index.md

根据上面的路径，打开 index.md 内容如下

1
2
3
4
---
title: categories
date: 2022-01-30 17:42:47
---

接下来添加一行 type: "categories" 使其变为

1
2
3
4
5
---
title: categories
date: 2022-01-30 17:42:47
type: "categories"
---

保存并关闭文件

创建标签

在 Git bash 执行

1
hexo new page tags

成功后提示

1
INFO  Created: ~/Hexo/source/tags/index.md

根据上面的路径，打开 index.md 内容如下

1
2
3
4
---
title: tags
date: 2022-01-30 17:43:56
---

接下来添加一行 type: "tags" 使其变为

1
2
3
4
5
---
title: tags
date: 2022-01-30 17:43:56
type: "tags"
---

保存并关闭文件

使用模板

修改模板后，每次新建的文章都会采用这个模板

修改方法：打开 Hexo\scaffolds\post.md 修改为以下内容

1
2
3
4
5
6
7
8
---
title: {{ title }}
date: {{ date }}
updated: {{ date }}
permalink:
categories:
tags:
---

保存并关闭文件

使用”分类” “标签”

修改完模板，新建文章后打开文章，为文章添加 categories tags 属性

1
2
3
4
5
6
7
8
9
10
---
title: 用Hexo搭建Github Pages博客
date: 2022-01-30 17:43:56
categories: 
- 博客
tags:
- Hexo
- 博客
- Github
---

注意 分类建议只创建一个，标签可以创建多个。

将永久链接改为分类+标题的格式

默认的永久链接 :year/:month/:day/:title/ 层级太多且比较长，所以我改为简短一点的 :category/:title/ ，这样给文章加了分类后，文章的永久链接就改为 http://example.com/分类/标题/

如果这样修改就要给每一篇文章定义分类

本地阅览

首先生成页面，执行

1
hexo g

然后进行本地阅览，执行

1
hexo s

浏览器打开 http://localhost:4000/ 就可以看到效果了

部署

确保在 站点配置文件 中 配置部署，信息更改无误后，执行 clean 命令

1
hexo clean

此命令会清除缓存文件 (db.json) 和已生成的静态文件 (public)。然后生成页面

1
hexo g

最后部署

1
hexo d

出现如下信息

1
INFO  Deploy done: git

以上三条命令可以一气呵成，只需要执行

1
hexo clean && hexo g && hexo d

大功告成