基于Hexo+Github搭建个人博客

[toc]

视频参考：

本篇博客以第一个视频为主要参考。

博客参考：

1.1.1 安装并配置Node.js

教程：nodejs安装和环境配置-Windows

按照教程配置完成后，在命令提示符里输入以下内容进行测试：

1
2
node -v
npm -v

image-20230411005657126

1.1.2 安装并配置Git

教程：Git 详细安装教程（详解 Git 安装过程的每一个步骤）

安装教程安装并配置后，开始菜单里出现了以下内容：

image-20230411010330834

我们最常使用的就是Git Bash。

输入以下命令将Git与你的Github账号绑定。

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

1.1.3 生成SSH keys

在生成SSH keys的过程中遇到了git@github.com: Permission denied (publickey)的问题。

这里参考博客：解决git@github.com: Permission denied (publickey)

首先打开Git Bash，输入

1
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后接连输入

1
2
3
4
5
ssh -v git@github.com

ssh-agent -s

ssh-add ~/.ssh/id_rsa

如果出现错误，就执行

1
2
3
eval `ssh-agent -s`
#继续执行
ssh-add ~/.ssh/id_rsa

打开.ssh文件夹下的id_rsa.pub，将里面的内容复制，然后进入github账号，在settings下，SSH and GPG keys下new SSH key，title随便取一个名字，然后将id_rsa.pub里的内容复制到Key中，完成后Add SSH Key。

image-20230411012114288

最后输入

1
ssh -T git@github.com

完整流程如下图。

image-20230411012011816

1.1.4 Hexo本地访问博客

在这个过程中遇到了bash: hexo: command not found问题。

这篇博客给了我启发：完美解决 bash: hexo: command not found

想到了是Path的问题。

我们先按步骤开始。

(1)在D盘根目录创建一个名为Blog的文件夹，文件夹刚被创建时是空的。Hexo框架与以后你自己发布的网页都在这个文件夹中。创建好后，进入文件夹中，按住shift键，右击鼠标点击命令行“Git Bash here”。

(2)使用npm命令安装Hexo，输入:

1
npm install -g hexo-cli

这时候我输入hexo init或者hexo s都会报错。百度到的内容无法解决问题，于是我询问了GPT-4。GPT-4的回答完美解决了我的问题，如下:

Q:你好，我的电脑系统是windows10，在安装hexo时出现了bash: hexo: command not found的问题，请问我应该如何解决

A：当你遇到 “bash: hexo: command not found” 的问题时，通常是因为 Hexo 没有正确安装或者它的可执行文件没有添加到系统的 PATH 环境变量中。以下是解决这个问题的方法：

  1. 确保你已经正确安装了 Node.js 和 npm。在命令行中输入以下命令，检查它们的版本：

    1
    2
    node -v
    npm -v

  2. 安装 Hexo。在命令行中输入以下命令：

    1
    npm install -g hexo-cli

  3. 确保 Hexo 的可执行文件已添加到 PATH 环境变量中。安装完成后，你可以在命令行中输入以下命令，查看 Hexo 的安装路径：

    1
    npm config get prefix

    这将显示 Hexo 可执行文件的安装路径。接下来，检查此路径是否在系统的 PATH 环境变量中。在 Windows 10 中，你可以右键点击 “此电脑”，选择 “属性”，然后点击 “高级系统设置”，选择 “环境变量”。在 “系统变量” 列表中找到 “Path”，双击它并检查 Hexo 的安装路径是否已添加。如果没有，请将其添加到 Path 变量中，然后重新启动命令行窗口。

    完成以上步骤后，你应该可以正常使用 Hexo 命令了。如果仍然遇到问题，请尝试卸载 Hexo，并重新按照上述步骤进行安装。

(3)我们输入hexo v测试一下是否安装成功

image-20230411013822208

(4)运行hexo init blog

(5)接下来运行hexo s时又报了错。OK，直接复制报错信息然后扔给GPT-4。

image-20230411014112540

A：这个输出信息表明您的 Hexo 安装是正常的，但是您需要在一个已经初始化的 Hexo 项目文件夹中运行 hexo s（即 hexo server）命令来启动本地服务器。

请按照以下步骤创建一个新的 Hexo 项目并启动本地服务器：

  1. 打开命令行，然后选择一个合适的目录，运行以下命令创建一个新的 Hexo 项目文件夹（例如，我们将项目命名为 myblog）：

    1
    hexo init myblog

  2. 进入新创建的项目文件夹：

    1
    cd myblog

  3. 使用 hexo s 命令启动本地服务器：

    1
    hexo s

现在，您应该能够在浏览器中访问 http://localhost:4000 并查看您的 Hexo 博客了。

为了避免将来出现类似的问题，请确保您在 Hexo 项目文件夹中运行与项目相关的命令。

image-20230411014446278

这里简单说一下，按照参考博客的步骤，我输入了hexo init blog来进行初始化。而这条命令确实成功执行了，并且在D盘的Blog文件夹下又生成了一个blog文件夹。运行hexo s报错是因为没有进入blog文件夹下运行。

不过后来我听从GPT-4的建议，重命名了blog文件夹为myblog。然后进入myblog文件夹下执行hexo s就一切正常。

(6)打开浏览器访问http://localhost:4000/

image-20230411015150012

1.1.5 发布网站（上传到github）

我们需要创建一个新仓库。

image-20230411020203437

上面1.1.4只是在本地预览，接下来要做的就是就是推送网站，也就是发布网站，让我们的网站可以被更多的人访问。在设置之前，需要解释一个概念，在myblog根目录里的_config.yml文件称为站点配置文件，如下图

image-20230411015349527

我们用记事本打开后，拉到底部，将

1
2
3
4
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

修改为：

1
2
3
4
deploy:
type: git
repo: 这里填入你之前在GitHub上创建仓库的完整路径，记得加上 .git
branch: main（以前是branch）

参考如下：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: https://github.com/maets-906/maets-906.github.io.git
  branch: main

img

保存站点配置文件。

其实就是给hexo d这个命令做相应的配置，让hexo知道你要把blog部署在哪个位置，很显然，我们部署在我们GitHub的仓库里。最后安装Git部署插件，输入命令：

1
npm install hexo-deployer-git --save

这里注意，要以管理员身份打开Git Bash，否则会出现权限问题。

image-20230411021254330

接下来我们分别输入三条命令：

1
2
3
hexo clean 
hexo g 
hexo d

其实第三条的 hexo d 就是部署网站命令，d是deploy的缩写。完成后，打开浏览器，在地址栏输入你的放置个人网站的仓库路径，即xxxx.github.io 。

你就会发现你的博客已经上线了，可以在网络上被访问了。

image-20230411023030901

访问博客，我的博客地址是：

1
https://maets-906.github.io/

image-20230411023353373

在手机浏览器上也可以访问。

ffe5ccb21f07baa3d9f7505642394bb

这说明我们的博客已经可以在网络上被访问了。只是页面是初始页面，没有进行美化。

进行到这里，先给自己鼓个掌

1.2.1 撰写博客

博客参考：博客搭建日志

接下来重点介绍source文件夹。新建的博客中，source文件夹下默认只有一个子文件夹——_posts。我们写的博客都放在这个子文件夹里面。我们还可以在source里面新建各种子文件夹满足自己的个性化需求，对初学者而言，我们先把精力放在主线任务上，然后再来搞这些细节。

D:\Blog\myblog\source\_posts下有个hello-world.md文件，我们点进去修改它，然后保存。

image-20230411093951800

然后在Git Bash里执行：

1
2
3
hexo cl
hexo g
hexo s

hexo cl命令用于清除缓存文件（db.json）和已生成的静态文件（public）。

例如：在更换主题后，如果发现站点更改不生效，可以运行该命令。

然后打开浏览器，输入localhost:4000/，就能发现自己的网站更新了！不过这只是在本地进行了更新，要想部署到网上（Github上），输入如下代码：

1
hexo d

然后在浏览器地址栏输入https://yourname.github.io，或者yourname.github.io就能在网上浏览自己的博客了！

以上，我们的博客网站1.0版本就搭建完成了，如果没有更多的需求，做到这里基本上就可以了。如果有更多的要求，还需要进一步的精耕细作！

1.2.2 Hexo基础修改

参考博客：Hexo+阿里云&GitHub 搭建个人博客

首先需要建立博客文件夹，建议建在非系统盘，例如 ~E:/Hexo/，那么这个目录就是我们博客的根目录了。
因为每个人的命名习惯不同，本帖之后会以 [Blogroot] 指代博客根目录。

我的博客根目录其实是~D:/Blog/。

Hexo 初始化后，博客网站有一些关键信息是默认的，需要修改为我们自己的信息。

网站资料

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改博客根目录的站点配置文件 _config.yml：

1
2
3
4
5
6
7
8
# Site
title: Cutedog
subtitle: '用博客学习、分享'
description: ''
keywords:
author: cutedog
language: zh-CN
timezone: ''

1.2.3 Butterfly

官方文档：Butterfly 安装文档(一) 快速开始

参考博客：Butterfly 主题美化（一）

Butterfly 主题安装
1
npm i hexo-theme-butterfly

此安装方法只适合hexo 5.0.0以上。

应用主题

在根目录Blog下的_config.yml中将theme:后面的内容修改为butterfly

安装插件

如果你没有 pug 以及 stylus 的渲染器，请下载安装：

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

image-20230411100214547

Git Bash很多安装操作如果报错，尝试以管理员权限运行。

测试是否成功

依然是使用

1
2
3
hexo cl
hexo g
hexo s

image-20230411155906800

打开本地localhost:4000查看页面。

image-20230411160029208

可以看到是安装成功了的。

升级建议

参考博客：Butterfly 主题美化（一）

参考视频：使用Hexo搭建个人博客手摸手教学(8)|butterfly主题页面配置

为了减少升级主题后带来的不便，请使用以下方法：

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去，以后只需要在 _config.butterfly.yml 进行配置就行。

一定要注意是主题目录的_config.yml。

由于我们是通过npm i hexo-theme-butterfly安装的，所以我们的主题不在theme里，而在D:\Blog\myblog\node_modules\hexo-theme-butterfly路径下。

在这个路径下我们可以看到_config.yml文件。

image-20230411164533598

注意，这里_config.butterfly.yml要在路径D:\Blog\myblog下创建，即和配置文件_config.yml平行的目录。

将D:\Blog\myblog\node_modules\hexo-theme-butterfly下的_config.yml里的内容复制到_config.butterfly.yml中即可。

导航菜单

image-20230411105634938

博客关键页面生成

博客有一些关键页面需要手动生成。

标签页

进入 Hexo 博客的根目录，执行：

我这里是在目录D:\Blog\myblog下执行的

1
hexo new page tags

image-20230411105918304

打开 source/tags/index.md 文件，修改如下：

1
2
3
4
5
---
title: 标签
date: 2023-04-11 16:29:01
type: "tags"
---

我们暂时还没有设置到达标签页的方法，不过可以在浏览器地址栏中输入http://localhost:4000/tags/来查看。

image-20230411163032582

可以看到标签页是设置成功了的。

分类页

进入 Hexo 博客的根目录，执行：

1
hexo new page categories

打开 source/categories/index.md 文件，修改如下：

1
2
3
4
5
---
title: 分类
date: 2023-04-11 16:32:23
type: "categories"
---
友情链接

创建友情链接页面

进入Hexo博客的根目录，执行：

1
hexo new page link

打开 source/link/index.md 文件，修改如下：

1
2
3
4
5
---
title: 友情链接
date: 2023-04-11 16:34:16
type: "link"
---

友情链接添加

在Hexo博客目录中的 source/_data（如果没有 _data 文件夹，请自行创建），创建一个文件 link.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- class_name: 本站
  class_desc: 交换友链可在下方评论，或者微信/QQ联系我
  link_list:
    - name: Cutedog
      link: https://maets-906.github.io/
      avatar: https://picgo-1309174103.cos.ap-beijing.myqcloud.com/cf04448f70e83077ba66648b726e6b94_1.jpg
      descr: 分享

- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: none
      link: none
      avatar: none
      descr: none
    - name: none
      link: none
      avatar: none
      descr: none
关于我

进入 Hexo 博客的根目录，执行：

1
hexo new page about

打开 source/about-me/index.md 文件，修改如下：

1
2
3
4
5
---
title: 关于我
date: 2023-04-11 16:35:42
type: "about"
---

至此，简单的 Hexo 博客框架就完成搭建了。

1.2.4 Butterfly 主题美化

参考博客：Butterfly 主题美化（一）

参考视频：使用Hexo搭建个人博客手摸手教学(10)|ButterFly主题配置一

这个视频内容比较长，官方文档也比较长- -

所以照着博客简单弄了一下。

在这个过程中报了很多次错，通过排查发现是在_config.yml文件中，有的冒号后面没有跟空格的缩进错误。

还有很多错误是js的缩进格式错误或者没有安装插件，不过通过GPT-4逐一排查后全部解决。

image-20230411221850478

本地预览下效果，还是不错的。

1.2.5 发布博客

1
hexo new post "新建博客文章名"

hexo new post "新建博客文章名" 是一个命令，用于在您的 Hexo 博客项目中创建一篇新文章。这个命令会在 source/_posts 目录下生成一个新的 Markdown 文件，文件名就是您在命令中指定的文章名。您可以编辑这个 Markdown 文件来撰写您的博客文章内容。当您运行 hexo generate（或简写为 hexo g）命令时，Hexo 将会把这篇文章生成为一个静态 HTML 文件，然后可以通过部署到托管服务来展示给访问者。 ——来自GPT-4