hexo官方文档

butterfly官方文档

1. hexo安装和butterfly主题安装

  1. 安装nodejs
  2. 安装git
  3. 安装hexo
1
$ npm install -g hexo-cli

2. 创建hexo 相关文件

执行如下命令

1
2
3
$ hexo init <folder>  
$ cd <folder>  
$ npm install

image.png
image.png

3. 运行 hexo server

此时已经可以运行服务，看见

1
hexo server

image.png
image.png

想要创建新的文章，执行

1
hexo new "My New Post"

4. 安装 butterfly 主题

默认的主题 landscape 不够美观。我们可以去官方主题寻找自己喜欢的主题

这里推荐下butterfly。页面美观，功能丰富，对中文支持较好

  1. 安装butterfly。
    butterfly官方文档 有两种安装方式，git安装和npm安装。我这边推荐npm安装，对后续更新和其它搭配功能安装更加简单方便

    通过 npm 安装并不会在 themes 里生成主题文件夹，而是在 node_modules 里生成

1
npm install hexo-theme-butterfly

image.png

  1. 应用主题
    修改 Hexo 根目录下的 _config.yml ,把主题改为 butterfly

image.png

  1. 为了减少升级主题后带来的不便，请使用以下方法（建议，可以不做）

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。

注意:

复制的是主题的 _config.yml ，而不是 hexo 的 _config.yml

不要把主题目录的 _config.yml 删掉

以后只需要在 _config.butterfly.yml 进行配置就行。如果使用了 _config.butterfly.yml， 配置主题的 _config.yml 将不会有效果。

Hexo 会自动合併主题中的 _config.yml 和 _config.butterfly.yml 里的配置，如果存在同名配置，会使用 _config.butterfly.yml 的配置，其优先度较高。

  1. 现在运行就可以看见主题的默认配置了
    image.png

5. 配置 butterfly 主题

5.1 安装插件

如果你没有 pug 以及 stylus 的渲染器，请下载安装：

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

5.2 创建图片文件夹

hexo 生成静态文件的时候默认的根目录是source文件夹。我们可以在source文件夹下创建自己的图片文件夹，供后续配置和文章进行引用

比如可以创建 myimg 。后续配置头像的时候，指定引用路径就是 /myimg/xxx.png

5.3 配置主题的引用cdn为本地

主题使用的一些样式和js的cdn被国内屏蔽了，所以可以将这些都下载到本地使用

安装 hexo-butterfly-extjs

1
npm install hexo-butterfly-extjs

修改配置 _config.butterfly.yml 

1
2
3
4
5
6
7
CDN:
  # The CDN provider for internal and third-party scripts
  # Options for both: local/jsdelivr/unpkg/cdnjs/custom
  # Note: Dev version can only use 'local' for internal scripts
  # Note: When setting third-party scripts to 'local', you need to install hexo-butterfly-extjs
  internal_provider: local
  third_party_provider: local

5.4 修改站点信息

  1. _config.yml 中的 site 属性是基本的站点信息。修改为你自己的
    image.png

  2. _config.butterfly.yml 中的 nav 信息配置主题的logo等信息。可以引用前面创建的myimg 文件夹下的图片

1
2
3
4
5
6
7
nav:
  # Navigation bar logo image
  logo: /myimg/logo_demo.png
  display_title: true
  display_post_title: true
  # Whether to fix navigation bar
  fixed: false

  1. _config.butterfly.yml 中的 Image Settings 信息配置主题的icon等信息。可以引用前面创建的myimg 文件夹下的图片
    image.png

  2. Aside Settings 修改侧边的卡片信息。公告信息等
    image.png

  3. 404 page 开启

1
2
3
4
5
# A simple 404 page
error_404:
  enable: true
  subtitle: 'Page Not Found'
  background: /img/error-page.png
  1. default top img
1
default_top_img: /myimg/top_img.png
  1. default_cover img
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
cover:

  # Disable the cover or not

  index_enable: true

  aside_enable: true

  archives_enable: true

  # When cover is not set, the default cover is displayed

  default_cover:

     - /myimg/default_cover.jpg

     - /myimg/default_cover_2.jpg

     - /myimg/default_cover_3.jpg

5.5 配置菜单

  1. 标签页
    标签页和分类页是特殊的page 设置来实现的
1
hexo new page tags

你会找到 source/tags/index.md 这个文件

修改这个文件

1
2
3
4
5
6
7
8
---
title: 标签
date: 2018-01-05 00:00:00
type: 'tags'
orderby: random
order: 1
---

  1. 分类页
1
hexo new page categories

你会找到 source/categories/index.md 这个文件
修改这个文件：

1
2
3
4
5
6
---
title: 分类
date: 2018-01-05 00:00:00
type: 'categories'
---

  1. 关于页
    about 就是一个普通页面。你直接修改它的index.md中内容就可以展示为你自己的关于页
1
hexo new page about

  1. 其它自定义页面
    除了 tags 和 categories 页面。其它的页面都是可以自定义的普通页面。使用
    hexo new page <title> 进行创建就可以了

  2. 配置菜单
    上面的页面创建好的情况下，就可以配置菜单了

1
2
3
4
5
6
7
8
9
10
11
12
menu:

  Home: / || fas fa-home
  Archives: /archives/ || fas fa-archive
  Tags: /tags/ || fas fa-tags
  Categories: /categories/ || fas fa-folder-open
  List||fas fa-list:
    Music: /music/ || fas fa-music
    Movie: /movies/ || fas fa-video
  Link: /link/ || fas fa-link
  About: /about/ || fas fa-heart

必须是 /xxx/，后面 || 分开，然后写图标名。

如果不希望显示图标，图标名可不写。

默认子目录是展开的，如果你想要隐藏，在子目录裡添加 hide 。

1
2
3
4
List||fas fa-list||hide:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video

注意： 导航的文字可自行更改

6. 搜索插件

主题支持三种搜索方式（algolia_search / local_search / docsearch），你可以选择一种或者多种搜索方式。

这边推荐使用 hexo-generator-searchdb插件
安装方式

1
npm install hexo-generator-searchdb

配置主题

1
2
3
4
5
6
search: 
  # Choose: algolia_search / local_search / docsearch
  # leave it empty if you don't need search
  use: local_search
  placeholder:

6. 字数统计插件

开启字数统计功能，需要安装hexo-wordcount插件

1
npm install hexo-wordcount --save

修改配置文件

1
2
3
4
5
6
7
8
9
10
# Need to install the hexo-wordcount plugin
wordcount:
  enable: true
  # Display the word count of the article in post meta
  post_wordcount: true
  # Display the time to read the article in post meta
  min2read: true
  # Display the total word count of the website in aside's webinfo
  total_wordcount: true

7. 图片懒加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Lazyload

# https://github.com/verlok/vanilla-lazyload

lazyload:

  enable: true

  # Use browser's native lazyload instead of vanilla-lazyload

  native: false

  # Specify the field to use lazyload (site or post)

  field: site

  placeholder: /myimg/loading.gif

  blur: false

8. Vercel 一键部署

本地部署博客后，在外就无法访问了。但是通过vercel 就可以一键部署。完全不需要自己的服务器。只需要注册一个 vercel 账号 即可。

注册后，使用我的项目 hexo-butterfly-blog 就可以一键部署到vercel了