HEXO：github+hexo搭建个人博客流程

本文最后更新于：2024年4月21日 晚上

1、github建库

1.1、准备github账号

进入GitHub官网，点击右上角Sign up注册账户：

image-20231202160043674

填入邮箱，继续：

image-20231202160203092

自定义登录密码：

image-20231202160257867

之后填写用户名，当出现xxx is available时用户名可用：

image-20231202160538160

之后出现订阅栏，可选非必填：

image-20231202160657226

之后验证一下账户：

image-20231202160755159

完成验证之后，就可以开始创建账户了：

image-20231202160933793

之后会验证一下邮箱，填写接收到的验证码，即可成功创建账户。

1.2、创建xxx.github.io库

进入个人主页，点击页面右上角“+”，选择 New repository创建仓库：

image-20231008201212195

创建github代码仓库。注意，库名一定要为xxx.github.io做结尾，xxx部分可自定义：

image-20231008200106092

创建仓库文件：

image-20231008200326697

新建文件一定要为index.html文件，且只能有1个html文件：

加入任意html内容：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>yaorongke</title>
</head>
<body>
    <h1>演示页面</h1>
    <h1>codestar！！！</h1>
</body>
</html>

image-20231008202347446

image-20231008202533883

1.3、开启github pages

新建好了仓库之后，进入setting开启github pages功能：

image-20231008203331362

进入Pages页面：

在Branch选择main分支，点击save，之后再点击GitHub Pages：

image-20231008205155447

完成上面的步骤后，进入新的页面，选择Project site以及Start from scratch再下拉到页面底部，点击done即可：

image-20231008204951174

image-20231008203522967

之后再返回到自己的仓库，查看Pages页面，会查看到对应的网页地址已经启用：

**==注：==**由于我这边有两个仓库开放Github Pages，地址会叠加，可忽略。Github Pages功能为统一开启和统一关闭，无法单独为某个仓库开放。

image-20231008210035443

然后进入到对应的地址，就可以正常访问了：

image-20231008210524431

2、安装Node.js

进入Node.js官网，下载LTS版本，选择对应的平台下载即可：

image-20231008211513177

双击安装程序，选择完安装路径后，根据引导面板一路安装即可：

image-20231008211831706

在必要工具安装选框这，勾选上：

image-20231008212119136

安装后会新增以下工具：

image-20231008213430610

修改npm镜像源：

1
2
3
4
5
# 全局修改为淘宝镜像源
npm config set registry https://registry.npm.taobao.org 
npm config list -l             # 查看所有配置项
npm config get [<key>]         # 查看某一项的配置信息
npm config set <key> <value>   # 设置某一项的配置信息

进入Node.js command prompt，检查npm版本：

1
npm --version

正常会返回对应的版本号。

3、安装HEXO工具

HEXO为基于Node.js的静态网页生成工具，用来搭建个人博客很适合。在安装完了Node.js之后，接下来就是安装HEXO工具了，使用npm指令安装：

1
2
3
4
5
6
# 在Node.js command prompt中输入
npm install -g hexo-cli
# 或者使用下面的指令安装
npm install hexo -g
# 升级
npm update hexo -g

正常返回：

image-20231008214129313

检查hexo版本：

1
hexo -v

image-20231008214229734

新建1个空目录，在shell面板cd到对应路径下：

1
2
# 初始化：需要管理员权限
hexo init hexo_blog

初始化完成后会生成以下文件：

image-20231008215117731

image-20231008215446588

1
2
cd hexo_blog
npm install

image-20231008215556478

本地启动博客：

1
2
hexo g
hexo server

image-20231008215758391

看到这个页面就大功告成了：

image-20231008215954507

4、hexo与github仓库关联

4.1、Git配置

在博客路径下，右键选择Open Git Bash Here：

image-20231010204957690

配置github账号：

1
2
git config --global user.name "minixiaoxin"
git config --global user.email "[email protected]"

配置完成之后，可以通过git config --list查看配置的内容：

image-20231010205430422

生成密钥SSH Key：

1
ssh-keygen -t rsa -C "[email protected]"

生成的过程中一路enter敲过去就行。

查看刚才生成的Key，后面需要将它放入github中：

1
cat ~/.ssh/id_rsa.pub

在Github中，点击个人头像，进入setting–》SSH and GPG keys，添加新的ssh key。将刚才查看的key内容复制到下面的key栏中：

image-20231010205924150

之后保存即可：

image-20231010210410735

在bash面板中输入下面的指令验证key 连接：

1
ssh -T [email protected]

出现successful authenticated说明连接成功：

image-20231010210540262

4.2、修改博客站点配置

hexo网站建立成功之后，则需要将其与我们GitHub的仓库相关联，进入博客路径，在博客根路径下，_config.yml_为站点配置文件：

image-20231008235315031

翻到最后，修改deploy这一段：

image-20231008235513160

修改为：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/minixiaoxin/codestar.github.io.git
  branch: master

填入的是仓库的地址，进入仓库，直接拷贝这个地址填入就行：

image-20231008235725193

改好了之后保存站点文件：

image-20231008235833034

4.3、连接github token

进入github，setting，找到Developer Settings，进入Personal access tokens：

新建一个token，勾选下面的访问权限，开多了不安全，过期时间保持默认就行，不建议开永不过期：

image-20231010211904548

下拉到页面最下方，点击Generator token即可。

在站点配置文件中，deploy改为以下内容，加入了一列token属性：

1
2
3
4
5
deploy:
  type: git
  repo: https://github.com/minixiaoxin/codestar.github.io.git
  branch: master
  token: your_token

然后部署网站：

1
hexo g -d

4.4、博客部署

安装git部署插件：

1
2
3
npm install hexo-deployer-git --save
# 或执行
npm i hexo-deployer-git

正常执行返回如下：

image-20231009000428664

之后，再分别输入三条命令：

1
2
# 等价于:hexo cl
hexo clean

image-20231009103530211

生成静态网页：

1
2
# 等价于:hexo generate
hexo g

image-20231009103615664

本地预览：

1
2
# 等价于:hexo server
hexo s

部署网站：

1
2
# 等价于:hexo deploy
hexo d

成功如下：

image-20231010220157027

后面就可以直接在github上看到文件提交了，在我们的网站上看到自己的博客：

image-20231010224142330

image-20231010224803391

5、关联个人域名

如果有自己的域名，可以将其关联上。我这使用的是namesoli的域名：

在namesoli控制后台添加一个解析，类型为CNAME:

image-20231010225429266

点击蓝球球：

image-20231010225457731

image-20231010225645462

之后在github中添加自定义域名：

image-20231010225155405

这样就完成了域名配置，访问域名可以直接跳转到我们的博客了。

6、修改站点显示语言

修改站点路径下的_config.yml文件来配置：

1
2
3
4
# 显示中文
language: zh-CN
# 显示英文
language: en

7、更换HEXO博客主题

这里我以fluid主题来演示：

7.1、下载主题源码

github官方库：https://github.com/fluid-dev/hexo-theme-fluid/releases

打开发布页，在最新版本下面找到Source code.zip，点击加载到本地：

image-20231010235532329

将压缩包解压，文件移动到hexo博客根目录下的theme目录：

image-20231010235718388

并将主题目录重新命名为fluid（注意目录层级，主题路径后一定要为css等资源文件，不能嵌套目录）：

image-20231010235820060

名称也可以不更改，直接使用hexo-theme-fluid-1.9.5，这样的话在_config.yml配置文件中theme字段也填入这个名称来就行。

7.2、修改站点配置并部署

修改站点配置文件_config.yml

1
2
# 字段theme，没有则手动添加该字段
theme: fluid

image-20231011001123205

完成修改之后，本地预览：

1
2
hexo g -d
hexo s

成功生成会展示如下页面：

image-20231012003828038

image-20231012003858847

之后，就可以进一步部署到github了：

1
hexo d

image-20231012005601022

把博客页面重新刷新一下就可以啦，so happy。

8、添加页面

8.1、添加分类页面

创建分类页面：

1
hexo new page categories

创建成功如下：

image-20231012224842751

image-20231012224951266

根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：

1
2
3
4
---
title: categories
date: 2023-10-12 22:48:17
---

添加type: "categories"到内容中，添加后是这样的：

1
2
3
4
5
---
title: 分类
date: 2017-05-27 13:47:40
type: "categories"
---

完成修改之后，后面每创建1篇文章，属性列中，支持”categories”这个属性。

8.2、添加标签页

创建标签页与分类页面操作类似，操作如下：

1
hexo new page tags

创建成功如下：

image-20231012225453438

然后编辑生成的index.md文件，添加tags属性：

默认内容如下：

1
2
3
4
---
title: tags
date: 2023-10-12 22:54:41
---

修改为：

1
2
3
4
5
---
title: 标签
date: 2023-10-12 22:54:41
type: "tags"
---

后面每创建1篇文章，其中的属性列中，支持”tags”这个属性。

8.3、子导航栏

使用submenu来录入二级导航栏：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
menu:
    - { key: "home", link: "/", icon: "iconfont icon-home-fill" }
    # 文章归档页--二级菜单：归档、分类、标签
    - { 
        key: "文章",
          icon: "iconfont icon-icon_books",
          submenu: [
            { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" },
            { key: "category", link: "/categories/", icon: "iconfont icon-category-fill" },
            { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
          ] }
    - { 
        key: "个人", 
          icon: "iconfont icon-user-fill",
          submenu: [
            { key: "about", link: "/about/", icon: "iconfont icon-info" }
          ] }

实际效果：

image-20231027235342913

8.4、添加关于页

关于我页面，需要手动创建：

1
hexo new page about

会生成相应的页面：

image-20231012211032250

根据自己需求，修改对应的MD文件,，添加layout属性：

1
2
3
4
5
6
7
---
title: MiniXiaoxin
date: 2023-10-12 21:09:51
layout: about
---
正文内容：
这是MiniXiaoxin的博客，记录在知识的海洋里学习到的每一点小小的知识。

添加完成后，重新生成页面，并本地预览后可部署：

1
2
3
hexo g -d
hexo s
hexo d

9、发布新文章

9.1、markdown新建文章配置

文章以markdown格式进行存储，可以修改一些配置方便新建文章：

修改站点文件_config.yml，修改下面的配置可以在新建文章的时候，生成一个同名的资源目录用于存放图片文件：

1
post_asset_folder: true

image-20231012212413325

9.2、新建博文

1
hexo n "我的第一篇文章"

执行完成之后，会在source\_posts下生成一个新的md文件和一个同名的资源目录：

image-20231012213940917

image-20231012214019324

打开之后，是下面的这些内容：顶部为文章的一些属性信息，可以方便做文章归类

**==注意：==**在属性”:”符号后面，需要添加一个空格，否则文章不生效

image-20231202171219218

可以添加的属性有这些：

1
2
3
4
5
6
7
title: postName               文章标题
date: 2013-12-02 15:30:16     文章编写的时间，这里可以随意修改
updated: 2013-12-02 15:30:16  文件的修改日期
categories:                   文章分类目录，可以为空
tags:                         文章标签，可空，多标签请用格式[tag1,tag2,tag3]
author:                       文章作者声明
description:                  对本页的描述，相当于是一个简介，如果这个定义了，就会在首页中出现这里的内容而不会出现整个文章详细内容。

9.3、博文Front-matter配置

hexo中有Front-matter这个概念，是文件最上方以 — 分隔的区域，用于指定个别文件的变量。配置tags和categories: 示例：

1
2
3
4
5
6
7
8
9
10
11
---
title: 我的博文
date: 2023-10-12 21:35:14
categories: 
	- 分类一
	- 子分类
tags: 
	- 标签一
	- 子标签
---
我的博文

子标签和子分类支持多个，每个标签或分类占一行。

9.3、删除文章

如果需要删除一篇历史文章，只需要在source\_posts下，删除相应的markdown文件和资源目录就行，然后重新生成静态页面，预览并部署：

1
2
3
hexo g
hexo s
hexo d

9.5、文章管理

1）标签及分来管理

分类及标签管理：

创建了分类和标签页面之后，就可以在文章中配置分类和页签属性了，通过这两个属性来管理发布的文章了：

对上面的第一篇文章做修改，添加分类和标签如下：

1
2
3
4
5
6
7
8
9
---
title: 我的第一篇文章
date: 2023-10-12 21:35:14
categories: 
	- 测试内容
tags: 
	- 测试文章
---
我的第一篇博客文章

image-20231012230610082

重新生成静态页面并预览：

1
2
hexo g -d
hexo s

image-20231012232517358

2）源文件夹分类管理

通过发布文章的资源文件夹来管理文章：

在hexo中，可以在_post文章源路径下创建不同的路径来标识文章，方便自己管理。在生成页面的时候不会根据这个路径来标识，依旧会通过前面配置的分类和标签属性来标识，创建路径示例：

image-20231110003802687

之后同样执行hexo g生成静态页面：

image-20231110003911612

文章依旧可以正常的访问，但页面URL会有所不同，方便自己本地进行文章管理。

9.6、新建草稿文章

如果文章还没写完，或者暂时不想公开，这时候可以将文章保存为草稿。

1
hexo new draft "new draft"

执行上面命令，会在 source/_drafts 目录下生成一个 new-draft.md 文件。但是这个文件不被显示在页面上，链接也访问不到。也就是说如果你想把某一篇文章移除显示，又不舍得删除，可以把它移动到 _drafts 目录之中。

如果你希望强行预览草稿，更改配置文件：

1
render_drafts: true

或者，如下方式启动 server：

1
hexo server --drafts

下面这条命令可以把草稿变成文章，或者页面：

1
hexo publish [layout]

9.7、文章属性

属性名称 作用 属性名称 作用
layout Layout 类型 excerpt_link 摘要链接文本
title 文章标题 reward 是否启用文章打赏功能
date 创建日期 reward_comment 打赏功能的评论提示文本
updated 修改日期 no_reward 是否禁用全局的打赏功能
comments 是否开启评论 hide_in_summary 是否在文章列表中隐藏该文章
tags 标签 password 访问文章所需密码
categories 分类 Disqus_shortname 用于集成 Disqus 评论系统的短名称
permalink 自定义 URL Duoshuo_shortname 用于集成多说评论系统的短名称
author 作者 Facebook_comments 是否启用 Facebook 评论插件
excerpt 文章摘要 Instagram 嵌入 Instagram 相册到文章中
top_img 置顶图片 Weibo_frame 在文章中嵌入微博帖子
cover_img 封面图片 gitment_owner Gitment 评论系统的仓库拥有者
toc 是否启用目录 gitment_repo Gitment 评论系统的仓库名称

示例1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
---
title: "Hello, Hexo"
date: 2022-01-01 10:00:00
categories:
  - 技术
tags:
  - Hexo
  - 静态网站生成器
comments: true
layout: post
author: John
excerpt: "这是一篇测试文章"
top_img: "/images/top.jpg"
cover_img: "/images/cover.jpg"
toc: true
toc_depth: 2
slides: true
excerpt_link: "继续阅读"
reward: true
reward_comment: "如果觉得本文对您有帮助，欢迎打赏支持！"
no_reward: false
hide_in_summary: false
password: "123456"
---

示例2：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
title: "Hello, Hexo"
date: 2022-01-01 10:00:00
updated: 2022-02-15 13:30:00
comments: true
tags:
  - Hexo
  - 静态网站生成器
categories:
  - 技术
permalink: "/hello-hexo/"
author: John
excerpt: "这是一篇测试文章"
top_img: "/images/top.jpg"
cover_img: "/images/cover.jpg"
toc: true
toc_depth: 2
layout: post
---

示例3：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: "Hello, Hexo"
date: 2022-01-01 10:00:00
categories:
  - 技术
tags:
  - Hexo
  - 静态网站生成器
comments: true
layout: post
author: John
excerpt: "这是一篇测试文章"
top_img: "/images/top.jpg"
cover_img: "/images/cover.jpg"
toc: true
toc_depth: 2
---

9.8、添加文章脚注

主题内置了脚注语法支持，可以在文章末尾自动生成带有锚点的脚注，该功能在主题配置_config.yml中默认开启：

1
2
3
4
post:
  footnote:
    enable: true
    header: ''

脚注语法如下：

1
2
这是一句话[^1]
[^1]: 这是对应的脚注

更优雅的使用方式，是将脚注写在文末，比如：

1
2
3
4
5
正文

## 参考
[^1]: 参考资料1
[^2]: 参考资料2

当然你也可以通过修改上方配置项 header 来自动加入节标题，如下所示：

1
2
3
4
post:
  footnote:
    enable: true
    header: '<h2>参考</h2>'  # 等同于手动写 `## 参考`

9.9、多标签及子分类

1
2
3
4
5
6
7
8
# 多标签：标签只存在并列关系，无上下级关系
tags: 
	- JAVA
	- Windows
# 子分类：-Linux即为子分类
categories: 
	- Linux技术
	- Linux

image-20231026225821444

image-20231026225713983

9.10、文章在首页的封面图

1
2
3
4
5
6
7
---
title: 文章标题
tags: [Hexo, Fluid]
index_img: /img/example.jpg
date: 2019-10-10 10:00:00
---
以下是文章内容

将图片放入到img文件夹中。

9.11、文章页顶部大图

默认显示主题配置中的 post.banner_img，如需要设置单个文章的 Banner，在 front-matter (opens new window)中指定 banner_img 属性。

本地图片存放位置同上。

1
2
3
4
5
6
7
8
---
title: 文章标题
tags: [Hexo, Fluid]
index_img: /img/example.jpg
banner_img: /img/post_banner.jpg
date: 2019-10-10 10:00:00
---
以下是文章内容

10、删除页面

直接删除hexo/source路径下的非_post路径即可，删除后，重新生成静态页面部署即可完成页面的删除：

image-20231027235438283

11、启用404页面

通过github配置的站点，不需要额外配置404页面，主题默认支持。

12、修改头像等图片信息

图像资源路径：

1
hexo_blog\themes\fluid\source\img

修改其中的”default.png”为网站首页背景图、”avatar.png”为头像、”fliud.png”为网页图标、”loading.gif”为加载动图，另外一个为备案图标。

image-20231018003807575

12.1、修改网页背景图

查询替换掉所有的”default.png”

image-20231018010517213

12.2、启用头像并修改

在主题的_config.yml配置文件中，修改about关于页面中avatar属性来配置头像，图源为上面的图源资源路径：

1
2
3
4
5
6
7
8
about:
  enable: true
  banner_img: /img/wall-1.png
  banner_img_height: 60
  banner_mask_alpha: 0.3
  avatar: /img/mini小新-blackavatar.png
  name: "mini小新"
  intro: "一个追逐知识，记录知识的少年。"

12.3、修改网页图标

在主题的_config.yml文件中修改下面的内容，j将其中的/img/fluid.png替换为自己的图标：

1
2
3
4
5
6
7
# 用于浏览器标签的图标
# Icon for browser tab
favicon: /img/web-icon1.png

# 用于苹果设备的图标
# Icon for Apple touch
apple_touch_icon: /img/web-icon1.png

13、版权声明

在主题下的_config.yml配置文件下，开启：

**==注：==**需要文章设置author字段值。

配置为’BY-NC-SA’类型：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
copyright:
    enable: true

    # CreativeCommons license
    # Options: BY | BY-SA | BY-ND | BY-NC | BY-NC-SA | BY-NC-ND
    license: 'BY-NC-SA'
    

    # 显示作者
    author:
      enable: true

    # 显示发布日期
    # Show post date
    post_date:
      enable: true
      format: "LL"

    # 显示更新日期
    # Show update date
    update_date:
      enable: true
      format: "LL"

实际效果：

image-20231024013253080

关于许可协议，可以学习这篇文章：

https://kevin-okay.github.io/2019/08/25/%E5%85%B3%E4%BA%8E%E7%9F%A5%E8%AF%86%E5%85%B1%E4%BA%AB%E8%AE%B8%E5%8F%AF%E8%AF%81/

博客搭建 > HEXO
#建站指南 #HEXO
HEXO：github+hexo搭建个人博客流程
http://www.codestar.top/2023/12/02/BLOG/HEXO：github+hexo搭建个人博客流程/
作者
mini小新
发布于
2023年12月2日
更新于
2024年4月21日
许可协议