零基础用 Hexo + Matery 搭建博客｜Github Pages 免费部署教程

文章目录

- 一、Hexo
- - [1.1 依赖](#1.1 依赖)
  - [1.2 快速使用](#1.2 快速使用)
  - [1.3 目录说明](#1.3 目录说明)
  - [1.4 命令说明](#1.4 命令说明)
  - - [1.4.1 常规命令](#1.4.1 常规命令)
    - [1.4.2 全局选项](#1.4.2 全局选项)
- 二、主题安装
- - [2.1 安装 Matery 主题](#2.1 安装 Matery 主题)
  - - [2.1.1 下载](#2.1.1 下载)
    - [2.1.2 配置](#2.1.2 配置)
    - - [2.1.2.1 基础配置](#2.1.2.1 基础配置)
      - [2.1.2.2 新建页面类型](#2.1.2.2 新建页面类型)
      - [2.1.2.3 其他配置](#2.1.2.3 其他配置)
  - [2.2 其他主题推荐](#2.2 其他主题推荐)
- 三、部署
- - [3.1 部署到 Github Pages](#3.1 部署到 Github Pages)
- 四、总结

一、Hexo

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

1.1 依赖

Node.js

根据下载指南下载安装适合当前系统的 Node.js 和 npm（Node.js 包管理器）。

安装完成后，打开终端，输入以下命令，检查是否安装成功：
bash 复制代码
```
# 需要大于10.13，建议使用 Node.js 12.0 及以上版本
node -v
npm -v
```
如果显示版本号，则说明安装成功。
Git

根据下载指南下载安装适合当前系统的 Git。

安装完成后，打开终端，输入以下命令，检查是否安装成功：
bash 复制代码
```
git --version
```
如果显示版本号，则说明安装成功。

1.2 快速使用

bash 复制代码

# 安装
npm install -g hexo-cli
# 初始化，<folder>输入博客名称，后续hexo会在<folder>中新建所需要的文件
hexo init <folder> && cd <folder>
npm install
# 生成静态文件
hexo generate
# 启动服务器
hexo server

现在，打开浏览器，访问 http://localhost:4000，即可看到博客本地已经搭建成功。

1.3 目录说明

初始化完成后，hexo 会在当前目录下生成一个名为 <folder> 的文件夹，该文件夹包含以下内容：

_config.yml：网站的配置文件，用于配置博客的标题、描述、作者等信息。
package.json：应用程序的信息。
scaffolds：存放博客文章的模板文件夹，用于生成博客文章的框架。
source：资源文件夹，是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 (下划线)的文件 / 文件夹 和 隐藏的文件 将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。新创建的帖子被保存到 source/_post 文件夹。
themes：主题文件夹，用于存放博客的主题。

1.4 命令说明

详细说明请参考指令

1.4.1 常规命令

命令	语法	描述	选项
init	`hexo init [folder]`	新建一个网站。如果没有设置`folder`，Hexo默认在目前的文件夹建立网站。	无
new	`hexo new [layout] <title>`	新建一篇文章。如果没有设置`layout`，默认使用`_config.yml`中的`default_layout`参数代替。使用布局 `draft` 来创建草稿。如果标题包含空格的话，请使用引号括起来。	`-p, --path`: 自定义文章路径 `-r, --replace`: 替换当前文章 `-s, --slug`: 自定义文章URL
generate	`hexo generate`	生成静态文件。	`-d, --deploy`: 生成完成后部署 `-w, --watch`: 监视文件变动 `-b, --bail`: 异常时抛出错误 `-f, --force`: 强制重新生成 `-c, --concurrency`: 设置同时生成文件的最大数量
publish	`hexo publish [layout] <filename>`	发表草稿。	无
server	`hexo server`	启动服务器，默认访问`http://localhost:4000/`。	`-p, --port`: 重设端口 `-s, --static`: 只使用静态文件 `-l, --log`: 启用日志
deploy	`hexo deploy`	部署网站。	`-g, --generate`: 部署前生成
render	`hexo render <file1> [file2] ...`	渲染文件。	`-o, --output`: 输出目标地址
migrate	`hexo migrate <type>`	从其他博客系统迁移内容。	无
clean	`hexo clean`	清除缓存文件(`db.json`)和已生成的静态文件(`public`)。	无
list	`hexo list <type>`	列出所有路由。	无
version	`hexo version`	显示版本信息。	无
config	`hexo config [key] [value]`	列出或修改网站配置(`_config.yml`)。	无

1.4.2 全局选项

选项	描述
`--safe`	安全模式：不加载插件和脚本
`--debug`	调试模式：显示调试信息并记录到`debug.log`
`--silent`	简洁模式：静默输出
`--config`	自定义配置文件的路径（可接受逗号分隔的列表）
`--draft`	显示`source/_drafts`文件夹中的草稿文章
`--cwd`	自定义当前工作目录的路径

二、主题安装

2.1 安装 Matery 主题

2.1.1 下载

bash 复制代码

# 进入博客目录
cd <folder>
# 安装主题
git clone https://github.com/blinkfox/hexo-theme-matery.git themes/matery

2.1.2 配置

2.1.2.1 基础配置

修改 Hexo 根目录下的_config.yml 文件

yml 复制代码

# 修改主题为 matery
theme: matery
# 修改url为你自己的url（没有的话先不修改）
url: http://your-url.com
# matery建议分页条数值为 6 的倍数，如：12、18 等
per_page: 6
# 修改语言为中文
language: zh-CN

2.1.2.2 新建页面类型

页面类型	命令	生成文件	关键配置项	关联文件
分类页	`hexo new page "categories"`	`source/categories/index.md`	需设置 `type: "categories"`	无
标签页	`hexo new page "tags"`	`source/tags/index.md`	需设置 `type: "tags"`	无
关于页	`hexo new page "about"`	`source/about/index.md`	需设置 `type: "about"`	无
留言板	`hexo new page "contact"`	`source/contact/index.md`	需设置 `type: "contact"`	需配置第三方评论系统
友情链接	`hexo new page "friends"`	`source/friends/index.md`	需设置 `type: "friends"`	`source/_data/friends.json`
404页面	手动创建	`source/404.md`	需设置 `type: "404"`	无

基础页面配置（分类/标签/关于/留言板/404）

文件路径：source/[page_type]/index.md

markdown 复制代码

---
title: 页面标题
date: 2023-01-01 00:00:00
type: "[page_type]"  # categories/tags/about/contact
layout: "[page_type]"
---

友情链接数据文件

文件路径：source/_data/friends.json

json 复制代码

[
  {
    "avatar": "http://example.com/avatar.jpg",
    "name": "好友名称",
    "introduction": "好友简介",
    "url": "http://example.com/",
    "title": "前去学习"
  }
]

404页面特殊配置

文件路径：source/404.md

markdown 复制代码

---
title: 404
date: 2018-09-30 17:25:30
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面 :("
---

2.1.2.3 其他配置

其他配置可参考Matery主题配置详细说明

2.2 其他主题推荐

主题名称	Github 链接	演示链接	说明链接
Fluid	https://github.com/fluid-dev/hexo-theme-fluid	https://hexo.fluid-dev.com/	https://github.com/fluid-dev/hexo-theme-fluid/blob/master/README.md
Butterfly	https://github.com/jerryc127/hexo-theme-butterfly	https://butterfly.js.org/	https://github.com/jerryc127/hexo-theme-butterfly/blob/dev/README_CN.md
Matery	https://github.com/blinkfox/hexo-theme-matery	https://blinkfox.github.io/	https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md
NexT	https://github.com/theme-next/hexo-theme-next	https://theme-next.js.org/	https://github.com/theme-next/hexo-theme-next/blob/master/README.md
Hacker	https://github.com/CodeDaraW/Hacker	http://blog.daraw.cn/	https://github.com/CodeDaraW/Hacker/blob/master/README_zh-CN.md

更多主题请查看 Hexo官网。

三、部署

3.1 部署到 Github Pages

在 Github 上创建一个 Public 类型仓库，仓库名 <repo-name> 不重复即可。
在博客项目根目录下创建个文件，保证仓库已有分支，假设为 main 分支。
在博客项目 settings -> Pages 中，将 Branch 设置为 main 分支，点击 Save 保存。(首次部署需要等待一段时间)
等待部署完成后，复制 Github Pages 提供的链接，形如 https://<github-name>.github.io/<repo-name>，后续通过该链接在浏览器中打开即可访问博客。
在博客项目根目录下安装 hexo-deployer-git 插件：
bash 复制代码
```
npm install hexo-deployer-git --save
```

修改博客配置文件 _config.yml，添加以下内容：

yml 复制代码

deploy:
  type: git
  repo: [email protected]:<github-name>/<repo-name>.git
  branch: main
url: https://<github-name>.github.io/<repo-name>

执行以下命令，将博客部署到 Github Pages：
bash 复制代码
```
hexo clean && hexo g -d
```

部署完成后，即可通过 https://<github-name>.github.io/<repo-name> 访问博客。

四、总结

本地搭建博客，需要安装 Node.js 和 Hexo。
主题推荐使用 Matery，配置简单，功能强大。
部署到 Github Pages，需要创建一个 Public 类型的仓库，并配置 hexo-deployer-git 插件。
后续美化博客，可以参考主题的官方文档，进行个性化配置。然后通过 hexo clean && hexo g -d 命令，将博客部署到 Github Pages。
如需部署到自己的服务器，需要自己配置域名解析，并上传博客文件到服务器。