零基础用 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 常规命令

命令	语法	描述	选项
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 主题

• 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 新建页面类型

页面类型	命令	生成文件	关键配置项	关联文件
分类页	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"	无

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 其他主题推荐

主题名称	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

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: gitrepo: [e-mail]:<github-name>/<repo-name>.gitbranch: 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. 如需部署到自己的服务器，需要自己配置域名解析，并上传博客文件到服务器。