hexo个人博客创建

[!NOTE] 三条常用命令： 1. hexo clean 2. hexo generate 3. hexo deploy

[!TIPS] 上面的这些命令以及配置文件（. yml）这些全部都是基于 source 目录下去搜索执行的。因此，如果是配置路径是就要注意这个是要基于 source 目录的，配置路径直接/img/test. jpg 这种是以 source 目录作为根目录的。因此要你就写完整相对目录，不然就在 source 文夹下创建文件夹。

Github + Hexo 实现个人博客及主题配置（超详细）

前言

现在市面上的博客很多，如 CSDN，博客园，简书等平台，可以直接在上面发表，用户交互做得好，写的文章百度也能搜索到。缺点是比较不自由，会受到平台的各种限制和恶心的广告。

而自己购买域名和服务器，搭建博客的成本实在是太高了，不光是说这些购买成本，单单是花力气去自己搭这么一个网站，还要定期的维护它，对于我们大多数人来说，实在是没有这样的精力和时间。

那么就有第三种选择，直接在 GitHub Pages 平台上托管我们的博客。这样就可以安心的来写作，又不需要定期维护，而且 Hexo 作为一个快速简洁的博客框架，用它来搭建博客真的非常容易。

Hexo 简介

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

大家可以进入 Hexo 官网进行详细查看，因为 Hexo 的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看。

Hexo 是基于 Node.js 的静态博客框架，依赖少易于安装使用，可以方便地生成静态网页托管在 GitHub 和 Coding 上，是搭建博客的首选框架。

Hexo 搭建教程

本次教程主要分为 8 个部分，看完便可搭建自己喜欢的个人博客。

安装 Git
安装 Node.js
安装 Hexo
GitHub 创建个人仓库
将 Hexo 部署到 GitHub
设置个人域名
更改主题（以 Fluid 为例）
发布文章

1. 安装 Git

Windows: 到 Git 官网下载并安装即可，下载后会有一个 Git Bash 的命令行工具，以后就用这个工具来使用 Git。
Mac: 可通过 MacPorts 或安装程序安装。
Linux (Ubuntu, Debian): sudo apt-get install git-core
Linux (Fedora, Red Hat, CentOS): sudo yum install git-core

2. 安装 Node.js

Hexo 是基于 Node.js 编写的，所以需要安装 Node.js 和 npm 工具。

Windows: 官方安装，选择 LTS 版本即可。
Linux:
1
2
sudo apt-get install nodejs sudo apt-get install npm
安装完成后，打开命令行，输入以下两行检查安装是否成功：
1
2
node -v npm -v

3. 安装 Hexo

安装好 Git 之后，选择你想要安装 Hexo 的地方（例如新建文件夹）。进入文件夹后，我们可以右击选择 "Git Bash Here" 来打开命令行窗口，输入：

1	`$ npm install -g hexo-cli`

输入 hexo -v 查看一下版本，至此环境准备完成，开始使用 Hexo 搭建个人博客。

4. 初始化 Hexo

在你选择的文件夹中，输入以下指令：

1
2
3

$ hexo init 文件夹名
$ cd 文件夹名
$ npm install

这会生成许多文件夹，不用担心，了解配置即可。

node_modules: 依赖包
public: 存放生成的页面
scaffolds: 生成文章的一些模板
source: 存放你的文章
themes: 主题
_config.yml: 博客的配置文件

接着，输入以下指令进行本地启动查看：

1
2
3

$ hexo clean
$ hexo g
$ hexo s

在浏览器中输入 localhost:4000 就可以看到生成的博客页面了。使用 ctrl + c 可以关闭服务。

5. 创建 GitHub 仓库

首先，你需要有一个 GitHub 账户。如果还没有，请去注册一个。

注册完后，登录 GitHub，在 GitHub. com 中点击 "New repository" 创建一个新的仓库。创建一个与用户名相同的仓库，后面加 .github.io。例如，如果你的 GitHub 用户名是 zjc2782171149，则仓库名称应为 zjc2782171149.github.io。

6. 生成 SSH 密钥并添加到 GitHub 仓库

如果之前已绑定 GitHub 仓库的 SSH 密钥，可跳过此步骤。在 Git Bash 中输入：

1 2	`git config --global user.name "yourname" git config --global user.email "youremail"`

替换 yourname 和 youremail 为你的 GitHub 用户名和邮箱。检查配置：

1 2	`git config user.name git config user.email`

生成 SSH 密钥：

1	`ssh-keygen -t rsa -C "youremail"`

在 GitHub 的设置中找到 SSH keys 选项，点击 "New SSH key" 并将 id_rsa.pub 的内容复制进去。

7. 将 Hexo 部署到 GitHub

打开 Hexo 的站点配置文件 _config.yml，修改以下内容：

deploy:
  type: git
  repo: [email protected]:zjc2782171149/zjc2782171149.github.io.git
  branch: master

安装 hexo-deployer-git 插件：

1	`npm install hexo-deployer-git --save`

进行部署：

1
2
3

hexo clean
hexo generate
hexo deploy

访问 http://你的用户名.github.io 查看部署结果。

8. 个人域名配置

购买并注册一个域名，例如通过阿里云。配置域名解析，将域名解析到 你的用户名.github.io 上。在 GitHub 仓库的 "Settings" 中，设置 Custom domain，输入你的域名。

在 source 文件夹中创建一个名为 CNAME 的文件，文件内容为你的域名。例如：

1	`blog.zhangjiancong.top`

更改默认分支为 master，并重新部署：

1
2
3

hexo clean
hexo g
hexo d

更改主题

以 Fluid 主题为例：

下载 Fluid 主题的压缩包，将其解压到 themes 文件夹下，并更名为 fluid。
修改 _config.yml 文件，将 theme 属性更改为 fluid，并将 language 属性修改为 zh-CN。
输入以下指令重新部署：
1
2
3
hexo clean hexo g hexo d

发布文章

发布新文章：

1	`hexo new newpapername`

编辑 source/_posts 中的 Markdown 文件，完成后进行重新部署：

1
2
3

hexo clean
hexo g
hexo d

每次更新文章或配置文件时都需要重新部署。

如有小伙伴觉得每次重新部署都麻烦，可以研究 GitHub Pages 的自动部署功能。

hexo 网站的完善

在 Hexo 网站上，标签页面和分类页面是两种不同的内容组织方式，但它们都可以帮助你对文章进行分类和组织。让我们先看看如何分别实现 标签页面 和 分类页面，以及如何使用 tags 和 categories 来实现文章的标签和分类。

1. 标签页面（Tags Page）

标签页面展示所有文章的标签及其对应的文章。它通常和文章的 tags 属性相结合，让读者可以通过点击某个标签来浏览该标签下的所有文章。

如何实现标签页面

创建标签页面：

在 source 目录下创建一个 tags 文件夹，并在其中创建一个 index.md 文件。

1
2
3

mkdir -p source/tags
touch source/tags/index.md

编辑 index.md：

在 index.md 文件中，添加以下内容来指定它是一个标签页面：

---
title: Tags
date: 2024-09-06 00:00:00
type: "tags"
---

这里 type: "tags" 告诉 Hexo 这是一个标签页面，Hexo 会自动生成所有标签的列表。

使用文章中的 Tags：

在你的文章（.md 文件）中使用 tags 字段来为文章指定标签。例如：

---
title: 我的文章
date: 2024-09-06
tags:
  - 技术
  - Hexo
---

在这个例子中，文章被打上了 技术 和 Hexo 两个标签。生成网站后，在标签页面 (/tags/) 中，点击这些标签会列出相关的文章。

2. 分类页面（Categories Page）

分类页面展示所有文章的分类及其对应的文章。与 tags 不同，分类是更高层次的组织方式，通常用于将文章分组为不同的主题或类型。

如何实现分类页面

创建分类页面：

和创建标签页面类似，在 source 目录下创建一个 categories 文件夹，并在其中创建一个 index.md 文件。

1
2
3

mkdir -p source/categories
touch source/categories/index.md

编辑 index.md：

在 index.md 文件中，添加以下内容来指定它是一个分类页面：

---
title: Categories
date: 2024-09-06 00:00:00
type: "categories"
---

这里 type: "categories" 告诉 Hexo 这是一个分类页面，Hexo 会自动生成所有分类的列表。

使用文章中的 Categories：

在你的文章（.md 文件）中使用 categories 字段来为文章指定分类。例如：

---
title: 我的文章
date: 2024-09-06
categories:
  - 编程
  - 前端开发
---

在这个例子中，文章被归类为 编程 和 前端开发。生成网站后，在分类页面 (/categories/) 中，点击这些分类会列出相关的文章。

3. 标签（Tags）和分类（Categories）的区别与组合使用

标签 (Tags)：标签通常用于给文章添加多个关键字，便于读者快速找到具有相似标签的文章。文章可以有多个标签，没有层级结构，通常适合更细粒度的内容分类。
分类 (Categories)：分类则是将文章组织成更大的类别，具有层级结构。例如，一个分类可以有子分类。每篇文章通常只有一个主分类，适合更广泛的内容分组。

示例文章使用标签和分类

---
title: 我的博客文章
date: 2024-09-06
tags:
  - Hexo
  - 博客搭建
categories:
  - 技术
  - Web开发
---

Tags (标签)：文章有两个标签 Hexo 和 博客搭建，点击这些标签可以找到所有有这些标签的文章。
Categories (分类)：文章被归类为 技术 -> Web开发，读者可以通过分类页面找到属于该分类的所有文章。

4. 关于我（about）页面

在 Hexo 中，你可以通过创建“关于页面”（About Page）来展示个人信息，比如 GitHub 链接、博客、QQ 等。可以通过创建一个单独的 Markdown 文件，并在其中定义这些信息。接下来，我会详细介绍如何设置“关于页面”以及如何在其中展示和跳转到你的个人信息。

1. 创建“关于页面”

首先，你需要在 Hexo 的 source 目录下创建一个新的文件夹，并在其中添加一个 index.md 文件：

1 2	`mkdir -p source/about touch source/about/index.md`

2. 编辑 `index.md` 文件

在 index.md 文件中，你可以使用 Markdown 来书写内容并添加个人信息。Hexo 会将这个文件渲染成 HTML 页面。你可以使用 HTML 或 Markdown 链接来跳转到 GitHub、博客等。

以下是一个“关于页面”的示例：

---
title: 关于我
date: 2024-09-06
type: "about"
---

# 关于我

你好，我是 [你的名字]，这是一段关于我的介绍。

## 联系方式

- **GitHub**: [我的 GitHub](https://github.com/yourusername)
- **博客**: [我的博客](https://yourblog.com)
- **QQ**: 123456789

欢迎通过以上方式联系我！

3. 显示个人信息并添加链接

你可以用 Markdown 格式轻松展示个人信息并添加超链接，比如：

GitHub 链接可以写成我的 GitHub。
博客链接可以写成我的博客。
QQ 号可以直接展示为文本或通过一些 QQ API 实现联系跳转。

4. 在导航栏中添加“关于”页面

为了让用户可以轻松访问“关于页面”，你可以在 Hexo 的主题配置文件（通常是 themes/your-theme/_config.yml）中，将“关于”页面的链接添加到导航栏中。

找到 menu 配置项，并添加 about 页面：

menu:
  Home: /
  Archives: /archives
  About: /about

这样，导航栏中就会出现“关于”链接，点击后会跳转到 /about 页面。

5. 自定义样式

如果你想要让“关于页面”更加个性化，可以在主题的 CSS 文件中添加自定义样式。例如，可以为页面的个人信息部分定义一些自定义的样式，以美化显示效果。

在 themes/your-theme/source/css/ 中的样式文件（例如 style.css 或 custom.css）中，添加以下内容：

.about-info {
    font-size: 18px;
    color: #333;
}

.about-info a {
    color: #007bff;
    text-decoration: none;
}

.about-info a:hover {
    text-decoration: underline;
}

然后，在 index.md 文件中将内容包裹在一个 div 里：

<div class="about-info">
  ## 联系方式

  - **GitHub**: [我的 GitHub](https://github.com/yourusername)
  - **博客**: [我的博客](https://yourblog.com)
  - **QQ**: 123456789
</div>

这样，你就可以通过 CSS 自定义“关于页面”的样式。

个人博客

#个人博客

hexo个人博客创建

http://example.com/2024/09/07/hexo个人博客创建/

作者

JunBin Liang

发布于

2024年9月7日

许可协议

java_set 上一篇

内存区域介绍下一篇

hexo个人博客创建

Github + Hexo 实现个人博客及主题配置（超详细）

前言

Hexo 简介

Hexo 搭建教程

1. 安装 Git

2. 安装 Node.js

3. 安装 Hexo

4. 初始化 Hexo

5. 创建 GitHub 仓库

6. 生成 SSH 密钥并添加到 GitHub 仓库

7. 将 Hexo 部署到 GitHub

8. 个人域名配置

更改主题

发布文章

hexo 网站的完善

1. 标签页面（Tags Page）

如何实现标签页面

2. 分类页面（Categories Page）

如何实现分类页面

3. 标签（Tags）和分类（Categories）的区别与组合使用

示例文章使用标签和分类

4. 关于我（about）页面

1. 创建“关于页面”

2. 编辑 index.md 文件

3. 显示个人信息并添加链接

4. 在导航栏中添加“关于”页面

5. 自定义样式

2. 编辑 `index.md` 文件