HEXO

简介

Hexo 是一个静态博客框架
具有配置方便、可扩展性高、部署便捷、SEO 优化等特性。
博客的内容由 Markdown 编写,根据 md 文件头部信息以及主题的配置生成指定格式、样式的静态 html 页面。
搭配不同插件可以完成一键部署、字数统计、博客置顶、本地搜索等功能,让你的博客展现不同的风格。

中文官网
Github

主题

Hexo 中主题是一个很重要的概念
主题是基于 hexo 基础功能经过视觉设计,功能丰富改造后提供的个性化解决方案。
本站主题为 butterfly.js
其他主题:

框架 & 主题 & 配置

本文以 butterfly.js 主题为例为大家介绍 Hexo 的相关配置。

框架安装

环境要求:

  • Node.js(Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
  • Git
  • 可访问互联网以及Github

以官网教程为例,逐行输入以下代码,便能完成一个 Hexo 博客项目的创建。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
npm install hexo-cli -g
# 安装 hexo 框架脚手架

hexo init blog
# 会新建一个名为 blog 的文件夹并初始化博客项目

cd blog
# 进入博客项目文件夹

npm install
# 安装依赖

hexo server
# 运行本地服务器模式,默认监听端口为 4000,访问路径 http://localhost:4000/

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
blog
├─ .gitignore
├─ package.json
├─ scaffolds
│ ├─ draft.md
│ ├─ page.md
│ └─ post.md
├─ source
│ └─ _posts
│ └─ hello-world.md
├─ themes
│ └─ .gitkeep
├─ yarn.lock
├─ _config.landscape.yml
└─ _config.yml

主题安装

因为主题是基于 Hexo 框架开发,所以直接安装主题就自带了整个 Hexo 框架。
我们只需要将主题项目 clone 到本地。
在指定文件夹终端中输入以下命令:

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

clone 成功以后目录结构

基本配置

  1. 主页背景图片

  2. 副标题打字效果

  3. 导航

  4. 搜索

  5. 复制相关配置

  6. ICP 备案信息

侧边栏

  1. 关注我按钮

  2. 访客地图

  3. 浏览统计

1
console.log(1);

部署