使用 `gitee|github + hexo` 快速搭建 `hexo-theme-matery` 闪烁之狐主题の个人博客

前言

随着编程时间的推移，接触到的技术越来多，记录的文档也越来越多，在巩固回忆的时候寻找起来也越来越繁琐，在此从零搭建一个免费的个人博客，来方便管理文档便于快速查询。

GitHub 博客效果预览：GitHub个人博客
Gitee 博客效果预览：Gitee个人博客

环境需求

下载安装： Git

下载安装： nodc.js

`hexo + gitee`部署

1, 创建 `gitee` 仓库

2, 搭建 `Hexo`

创建文件夹 gitee_personal_blog

打开 cmd 控制台

安装博客的框架(hexo)

npm install -g hexo-cli

初始化 hexo

hexo init

目录介绍

│  .gitignore
│  package.json
│  yarn.lock
│  _config.landscape.yml
│  _config.yml	博客的配置文件
├─.github
├─node_modules 	依赖包
├─scaffolds 	生成文章的一些模板
├─source        用来存放你的文章
└─themes		主题

本地运行 hexo

hexo s

INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
Hexo正在运行的信息http://localhost:4000/.按Ctrl+C键停止。

3, 选择主题进行配置

Hexo 官网主题

闪烁之狐

1, 下载 hexo-theme-matery 闪烁之狐主题

切换至 gitee_personal_blog/themes 目录下

# 克隆闪烁之狐主题
git clone https://github.com/blinkfox/hexo-theme-matery.git

在 gitee_personal_blog\themes\hexo-theme-matery 文件夹中 README_CN.md 有着详细的主题配置文档。

2, Hexo 使用 hexo-theme-matery 闪烁之狐主题

编辑 gitee_personal_blog/_config.yml 文件

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## theme: landscape
theme: hexo-theme-matery

注：Hexo 的主题一般都存放到 theme 目录下。

4, 实现动态渲染

1, 指定 gitee 仓库地址

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: https://gitee.com/tuntun-rat/gitee_personal_blog.git	# gitee仓库地址
  branch: master	# 分支

2, gitee_personal_blog/blog 目录下安装 git 部署插件

npm install --save hexo-deployer-git

3, 将当前配置部署至 gitee

# 修改 _config.yml 文件后清除缓存文件
hexo clean

# 重新生成静态文件
hexo g

# 部署网站
## 出现 ERROR Deployer not found: git
## 需运行 npm install --save hexo-deployer-git
hexo d

部署成功后,gitee 效果图

4, 启动项目站点

因 Gitee Pages 服务目前需要实名认证后才可使用;

官方文档：Gitee Pages

实名认证审批后,选择项目分支启动 Gitee Pages 服务

5, 配置 _config.yml

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
## 网址发布地址：http://tuntun-rat.gitee.io/gitee_personal_blog
url: http://tuntun-rat.gitee.io/gitee_personal_blog
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

修改配置后重新发布至 github

# 修改 _config.yml 文件后清除缓存文件
hexo clean

# 重新生成静态文件
hexo g

# 部署网站
## 出现 ERROR Deployer not found: git
## 需运行 npm install --save hexo-deployer-git
hexo d

因为文件被修改，更新网站

6, 效果预览图

Gitee个人博客

`hexo + github` 部署

部署流程与 gitee 相似
注：因为国内访问 GitHub不太稳定，运行命令报错时，可能是GitHub 官网无法访问了；可以打开网页查看GitHub官网看是否能正常访问，或多运行几次;

1, 创建 `github` 仓库

2, 搭建 `Hexo`

创建文件夹 github_personal_blog

打开 cmd 控制台

安装博客的框架(hexo)

npm install -g hexo-cli

初始化 hexo

hexo init

目录介绍

│  .gitignore
│  package.json
│  yarn.lock
│  _config.landscape.yml
│  _config.yml	博客的配置文件
├─.github
├─node_modules 	依赖包
├─scaffolds 	生成文章的一些模板
├─source        用来存放你的文章
└─themes		主题

本地运行 hexo

hexo s

INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
Hexo正在运行的信息http://localhost:4000/.按Ctrl+C键停止。

3, 选择主题进行配置

Hexo 官网主题

闪烁之狐

1, 下载 hexo-theme-matery 闪烁之狐主题

切换至 github_personal_blog/themes 目录下

# 克隆闪烁之狐主题
git clone https://github.com/blinkfox/hexo-theme-matery.git

在 github_personal_blog\themes\hexo-theme-matery 文件夹中 README_CN.md 有着详细的主题配置文档。

2, Hexo 使用 hexo-theme-matery 闪烁之狐主题

编辑 github_personal_blog/_config.yml 文件

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## theme: landscape
theme: hexo-theme-matery	# 访问 theme 目录下的 hexo-theme-matery

注：Hexo 的主题一般都存放到 theme 目录下。

4, 实现动态渲染

1, 指定 github 仓库地址

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: https://github.com/13361842554/github_personal_blog.git	# github 仓库地址
  branch: master	# 分支

2, github_personal_blog 目录下安装 git部署插件

npm install --save hexo-deployer-git

3, 将当前配置部署至 github

# 修改 _config.yml 文件后清除缓存文件
hexo clean

# 重新生成静态文件
hexo g

# 部署网站
## 出现 ERROR Deployer not found: git
## 需运行 npm install --save hexo-deployer-git
hexo d

部署成功后,github 效果图

4, 启动项目站点

进入 github_personal_blog 仓库,设置 setting, 找到 GitHub Pages

5, 配置 _config.yml

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
## 网址发布地址：https://13361842554.github.io/github_personal_blog/
url: https://13361842554.github.io
root: /github_personal_blog/	# GitHub 项目名称
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

修改配置后重新发布至 github

# 修改 _config.yml 文件后清除缓存文件
hexo clean

# 重新生成静态文件
hexo g

# 部署网站
## 出现 ERROR Deployer not found: git
## 需运行 npm install --save hexo-deployer-git
hexo d

6, 效果预览图