安装Node.js

首先下载稳定版Node.js，我这里给的是64位的。

安装选项全部默认，一路点击Next。

最后安装好之后，按Win+R打开命令提示符，输入node -v和npm -v，如果出现版本号，那么就安装成功了。

安装Hexo

在合适的地方新建一个文件夹，用来存放自己的博客文件，比如我的博客文件都存放在D:\study\program\blog目录下。

在该目录下右键点击Git Bash Here，打开git的控制台窗口，以后我们所有的操作都在git控制台进行，就不要用Windows自带的控制台了。

定位到该目录下，输入npm i hexo-cli -g安装Hexo。会有几个报错，无视它就行。

安装完后输入hexo -v验证是否安装成功。

然后就要初始化我们的网站，输入hexo init初始化文件夹，接着输入npm install安装必备的组件。

这样本地的网站配置也弄好啦，输入hexo g生成静态网页，然后输入hexo s打开本地服务器，然后浏览器打开http://localhost:4000/，就可以看到我们的博客啦，效果如下：

按ctrl+c关闭本地服务器。

1
2
3
hexo g  # 生成博客网页文件
hexo s  # 本地预览博客
hexo d  # 上传网页文件到github

安装主题

Butterfly 安裝文檔(一) 快速開始https://butterfly.js.org/posts/21cfbf15/

稳定版【建议】

在你的 Hexo 根目录里

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

应用主题

修改 Hexo 根目录下的 _config.yml，把主题改为 butterfly

安装插件

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

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

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

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。( 注意: 复制的是主题的 _config.yml ，而不是 hexo 的 _config.yml)

参考：

​ hexo官网 https://hexo.io/zh-cn/docs/

豆瓣页

原理

hexo-douban 目前升级到了 2.x 版本，将原先由插件客户端自行获取数据的逻辑抽到了一个隐藏的服务端中进行，以统一解决数据获取、数据缓存、风控对抗等问题，提高页面生成的成功率和效率。

安装

1
npm install hexo-douban --save

配置

将下面的配置写入站点的配置文件 _config.yml 里(不是主题的配置文件).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
douban:
  id: 162448367
  builtin: false
  item_per_page: 10
  meta_max_line: 4
  customize_layout: page
  book:
    path: books/index.html
    title: 'This is my book title'
    quote: 'This is my book quote'
    option:
  movie:
    path: movies/index.html
    title: 'This is my movie title'
    quote: 'This is my movie quote'
    option:
  game:
    path: games/index.html
    title: 'This is my game title'
    quote: 'This is my game quote'
    option:
  song:
    path: songs/index.html
    title: 'This is my song title'
    quote: 'This is my song quote'
    option:
  timeout: 10000
  • id: 你的豆瓣ID(纯数字格式，不是自定义的域名)。获取方法可以参考怎样获取豆瓣的数字 ID ？
  • builtin: 是否将hexo douban命令默认嵌入进hexo g、hexo s，使其自动执行hexo douban 命令。默认关闭。当你的豆瓣条目较多时，也建议关闭。
  • item_per_page: 每页展示的条目数，默认 10 。
  • meta_max_line: 每个条目展示的详细信息的最大行数，超过该行数则会以 “…” 省略，默认 4 。
  • customize_layout: 自定义布局文件。默认值为 page 。无特别需要，留空即可。若配置为 abcd，则表示指定 //theme/hexo-theme/layout/abcd.ejs 文件渲染豆瓣页面。
  • path: 生成页面后的路径，默认生成在 //yourblog/books/index.html 等下面。如需自定义路径，则可以修改这里。
  • title: 该页面的标题。
  • quote: 写在页面开头的一段话,支持html语法。
  • timeout: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。
  • option: 该页面额外的 Front-matter 配置，参考Hexo 文档。无特别需要，留空即可。

如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。

使用

展示帮助文档

1
2
3
4
5
6
7
8
9
10
11
$ hexo douban -h
Usage: hexo douban

Description:
Generate pages from douban

Options:
  -b, --books   Generate douban books only
  -g, --games   Generate douban games only
  -m, --movies  Generate douban movies only
  -s, --songs   Generate douban songs only

主动生成豆瓣页面

1
2
3
4
5
6
7
8
9
10
$ hexo douban
INFO  Start processing
INFO  0 (wish), 0 (do),0 (collect) game loaded in 729 ms
INFO  0 (wish), 0 (do),20 (collect) song loaded in 761 ms
INFO  2 (wish), 0 (do),136 (collect) book loaded in 940 ms
INFO  30 (wish), 0 (do),6105 (collect) movie loaded in 4129 ms
INFO  Generated: books/index.html
INFO  Generated: movies/index.html
INFO  Generated: games/index.html
INFO  Generated: songs/index.html

如果不加参数，那么默认参数为-bgms。当然，前提是配置文件中均有这些类型的配置。

需要注意的是，通常大家都喜欢用hexo d来作为hexo deploy命令的简化，但是当安装了hexo douban之后，就不能用hexo d了，因为hexo douban跟hexo deploy 的前缀都是hexo d。

第一次使用 hexo douban 时，后台会异步进行数据获取，一般需要等待一段时间（后台访问你的标记页面）才能查到数据。顺利情况下，平均一个页面会花10s。

例如如果你有 150 个想读、150个已读、150个在读的图书，每页15条，则共需要翻30页。那么大约需要等待 30*10/60=5 分钟。如果长时间没有更新，请及时提 issue 反馈。

后续如果你的豆瓣数据更新了，hexo douban 同样也会自动进行更新（同样需要等待一段时间才会查到更新数据），不过出于安全考虑，一个用户id每半小时至多只会同步一次。

由于豆瓣本身深分页的 RT 过高（上万条目的翻页 RT 会到 15s 到 60s），为了防止系统同步压力过大，每个用户的每一类条目最多只会同步 1w 条。

升级

我会不定期更新一些功能或者修改一些Bug，所以如果想使用最新的特性，可以用下面的方法来更新:

  1. 修改 package.json 内 hexo-douban 的版本号至最新
  2. 重新安装最新版本npm install hexo-douban --save

或者使用npm install hexo-douban --update --save直接更新。

显示

如果上面的配置和操作都没问题，就可以在生成站点之后打开 //yourblog/books 和 //yourblog/movies, //yourblog/games, 来查看结果。

菜单

如果上面的显示没有问题就可以在主题的配置文件 _config.yml 里添加如下配置来为这些页面添加菜单链接.

1
2
3
4
5
6
7
menu:
  Home: /
  Archives: /archives
  Books: /books     #This is your books page
  Movies: /movies   #This is your movies page
  Games: /games   #This is your games page
  Songs: /songs   #This is your songs page