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

一、Hexo

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

1.1 依赖

• Node.js
  根据下载指南下载安装适合当前系统的 Node.js 和 npm（Node.js 包管理器）。
  安装完成后，打开终端，输入以下命令，检查是否安装成功：

  # 需要大于10.13，建议使用 Node.js 12.0 及以上版本
  node -v
  npm -v
  

  如果显示版本号，则说明安装成功。

• Git
  根据下载指南下载安装适合当前系统的 Git。
  安装完成后，打开终端，输入以下命令，检查是否安装成功：

  git --version
  

  如果显示版本号，则说明安装成功。

1.2 快速使用

# 安装
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 常规命令

1.4.2 全局选项

二、主题安装

2.1 安装 Matery 主题

• Github
• 说明文档

2.1.1 下载

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

2.1.2 配置

2.1.2.1 基础配置

修改 Hexo 根目录下的_config.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 新建页面类型

1. 基础页面配置（分类/标签/关于/留言板/404）
   文件路径：source/[page_type]/index.md

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

2. 友情链接数据文件
   文件路径：source/_data/friends.json

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

3. 404页面特殊配置
   文件路径：source/404.md

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

2.1.2.3 其他配置

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

2.2 其他主题推荐

更多主题请查看 Hexo官网。

三、部署

3.1 部署到 Github Pages

1. 在 Github 上创建一个 Public 类型仓库，仓库名 <repo-name> 不重复即可。

2. 在博客项目根目录下创建个文件，保证仓库已有分支，假设为 main 分支。

3. 在博客项目 settings -> Pages 中，将 Branch 设置为 main 分支，点击 Save 保存。(首次部署需要等待一段时间)

4. 等待部署完成后，复制 Github Pages 提供的链接，形如 https://<github-name>.github.io/<repo-name>，后续通过该链接在浏览器中打开即可访问博客。

5. 在博客项目根目录下安装 hexo-deployer-git 插件：

   npm install hexo-deployer-git --save
   

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

   deploy:
     type: git
     repo: git@github.com:<github-name>/<repo-name>.git
     branch: main
   url: https://<github-name>.github.io/<repo-name>
   

7. 执行以下命令，将博客部署到 Github Pages：

   hexo clean && hexo g -d
   

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

四、总结

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