↓ 跳过正文
ICE345のBLOG
ICE345のBLOG
  1. Posts/

hexo个人博客创建

·3643 字·8 分钟· loading · loading · · ·
个人博客 Hexo 博客搭建 GitHub Pages 主题配置
ICE345
作者
ICE345
CS Student | System | Linux | OCaml
Obsidian
目录

三条常用命令：

  1. hexo clean
  2. hexo generate
  3. hexo deploy

上面的这些命令以及配置文件（. 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 个部分，看完便可搭建自己喜欢的个人博客。

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

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:
    sudo apt-get install nodejs
sudo apt-get install npm
    安装完成后，打开命令行，输入以下两行检查安装是否成功：
    node -v
npm -v

3. 安装 Hexo
#

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

$ npm install -g hexo-cli

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

4. 初始化 Hexo
#

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

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

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

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

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

$ 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 中输入：

git config --global user.name "yourname"
git config --global user.email "youremail"

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

git config user.name
git config user.email

生成 SSH 密钥：

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 插件：

npm install hexo-deployer-git --save

进行部署：

hexo clean
hexo generate
hexo deploy

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

8. 个人域名配置
#

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

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

blog.zhangjiancong.top

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

hexo clean
hexo g
hexo d

更改主题
#

以 Fluid 主题为例：

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

发布文章
#

发布新文章：

hexo new newpapername

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

hexo clean
hexo g
hexo d

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

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

hexo 网站的完善
#

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

1. 标签页面（Tags Page）
#

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

如何实现标签页面
#

  1. 创建标签页面：

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

mkdir -p source/tags
touch source/tags/index.md
  1. 编辑 index.md：

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

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

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

  1. 使用文章中的 Tags：

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

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

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

2. 分类页面（Categories Page）
#

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

如何实现分类页面
#

  1. 创建分类页面：

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

mkdir -p source/categories
touch source/categories/index.md
  1. 编辑 index.md：

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

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

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

  1. 使用文章中的 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 文件：

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 自定义“关于页面”的样式。

相关文章