配置根目录_Hexo + GitHub Pages 搭建个人博客及 NexT 主题配置

最近，自己根据网上的一些教程，基于 Hexo 搭建了自己的博客，并把搭建过程整理了出来，以供参考。

博客地址：Star's Tech Blog

源码仓库：yifanzheng/yifanzheng.github.io

原文链接：https://blog.csdn.net/oschina_41790905/article/details/103452981

框架驱动：Hexo

博客主题：NexT ^6.x

博客搭建与配置

环境准备

• Node.js
• Git

Hexo 搭建

安装 Hexo，打开 Git Bash 命令窗口，输入命令：

npm install -g hexo-cli

安装好 Hexo 后，在任意目录新建一个空文件夹，名字可以为 blogs，然后进入这个文件夹，在命令行输入命令：

hexo init

执行完成后（如果命令窗口出现橙色的 WARN 不用管），生成文件结构：

├── node_modules       //依赖安装目录
├── scaffolds          //模板文件夹，新建的文章将会从此目录下的文件中继承格式
|   ├── draft.md         //草稿模板
|   ├── page.md          //页面模板
|   └── post.md          //文章模板
├── source             //资源文件夹，用于放置图片、数据、文章等资源
|   └── _posts           //文章目录
├── themes             //主题文件夹
|   └── landscape        //默认主题
├── .gitignore         //指定不纳入git版本控制的文件
├── _config.yml        //站点配置文件
├── db.json            
├── package.json
└── package-lock.json

下载依赖包，输入命令：

npm install

依赖包下载完成后，输入如下命令启动 hexo 的内置 Web 服务器：

hexo g // 打包文件

hexo s // 启动服务器

然后可以在在浏览器中通过地址 http://localhost:4000/ 访问博客了。

更换 NexT 主题

Hexo 更换主题的方式很简单，只需要将主题文件拷贝至根目录下的 themes 目录中， 然后修改根目录下 _config.yml 文件中的 theme 字段，便可完成更换。

在博客项目的根目录下，输入命令：

git clone https://github.com/theme-next/hexo-theme-next.git themes/next

打开根目录下 _config.yml 文件,将 theme 字段的值修改为 next。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

这个时候需要重启服务器 hexo g && hexo s 并刷新才能使主题生效。

重要定义

在项目文件中存在两个 _config.yml 文件，为了方便区分。

• 项目根目录下的 _config.yml 文件叫作站点配置文件。
• 主题文件夹根目录下的 themes/next/_config.yml 文件叫作主题配置文件。

部署到 GitHub Pages

GitHub 配置

• 创建 GitHub 账号
• 创建仓库，仓库名必须是：<GitHub 账号名称>.github.io，这是GitHub pages 的特殊命名规范

修改站点配置文件 _config.yml

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: 'git'
  repo: 
    github: https://github.com/yifanzheng/yifanzheng.github.io.git
  branch: master

注意：GitHub pages 仅在 master 分支下实现。

部署

• 在项目根目录下，安装 Git 部署插件：

npm install hexo-deployer-git --save

• 部署到 Github Pages

hexo g 

hexo d

部署完成后，在浏览器访问网址：https://<GitHub 账号名称>.github.io 即可查看博客。

详细过程可以参考：借助 GitHub pages 搭建静态个人网站并绑定域名

站点配置

站点配置可以查看 Hexo 官方文档。

Hexo 官方文档：https://hexo.io/zh-cn/docs/configuration.html 。

注意：所有的 : 都为英文字符，后面必须有一个空格。

主题配置

NexT 的主题配置可以先查看官方文档，写得很不错，很完善。很多配置都可以在官方文档中找到，如 文章字数统计，标签图标等。

NexT 官方文档：http://theme-next.iissnan.com/getting-started 。

NexT （最新）官方文档：https://theme-next.org/docs/getting-started/ 。

第三方配置

鼠标点击特效

从各个站点里收集了以下四个比较常用的鼠标点击特效：

• 礼花特效

下载：礼花特效

• 爆炸特效