Hexo + Next + GitHub Page搭建个人博客

发表于 更新于 分类于 本文字数： 363 阅读时长 ≈ 1 分钟

Hexo介绍

Hexo是一款基于Node.js的开源静态博客框架，用于快速、简单且高效地搭建静态博客网站。本质上是一个静态网站生成器，新增文章只需要编辑md文件，通过运行命令再生成像html的静态文件。

环境搭建

1
2
3
4
5
6
7
8
9
10
11
# 全局安装hexo脚手架
npm install -g hexo-cli

# 创建一blog项目
hexo init blog

# 进入项目
cd blog

# 安装依赖包
npm install

其他操作

1
2
# 右键 Git Bush，用户项目自动化部署
npm install hexo-deployer-git --save

项目预览

1
2
3
4
5
6
7
8
# 清理旧的静态文件
hexo clean

# 生成静态文件
hexo g

# 运行预览项目
hexo s

Hexo配置文件详解（_config.yml）

Hexo插件

文章排序、显隐插件

插件：hexo-generator-index-custom
详细见：https://github.com/im0o/hexo-generator-index-custom

搜索插件

Next主题样式

官方文档：https://theme-next.js.org/docs/getting-started/configuration.html

安装

1
2
3
git clone https://github.com/next-theme/theme-next-docs
cd theme-next-docs
npm install

使用

  1. Hexo版本>=5.0
  2. 在Hexo项目根目录下创建Next配置文件，命名为_config.next.yml
  3. 首次创建Next配置文件时，可以直接复制theme-next-docs目录下的next默认配置文化
    1
    2
    3
    4
    # Installed through npm
    cp node_modules/hexo-theme-next/_config.yml _config.next.yml
    # Installed through Git
    cp themes/next/_config.yml _config.next.yml

站点中的icon替换

Next默认引了fontawsome样式，大部分直接替换即可 https://fontawesome.dashgame.com/

站点托管

腾讯云静态资源托管