Hexo静态网页博客框架（基于NodeJS）搭建。

参照官方文档构建

1、npm 全局安装 hexo-cli

1
npm install hexo-cli -g

2、用hexo-cli脚手架生成博客项目

1
2
3
hexo init my-blog
cd my-blog
npm install

3、生成后的目录结构如下

.
├── _config.yml #网站主配置文件
├── package.json
├── scaffolds # 模版文件夹
├── source # 存放用户资源(文章、图片)
| ├── _drafts
| └── _posts
└── themes # 主题文件夹

4、本地运行，在 my-blog 目录执行 hexo server，出现如下信息后，在浏览打开 http://localhost:4000/ 即可看到hexo搭建效果。

hider
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ hexo server
INFO  Validating config
INFO
  ===================================================================
      #####  #    # ##### ##### ###### #####  ###### #      #   #
      #    # #    #   #     #   #      #    # #      #       # #
      #####  #    #   #     #   #####  #    # #####  #        #
      #    # #    #   #     #   #      #####  #      #        #
      #    # #    #   #     #   #      #   #  #      #        #
      #####   ####    #     #   ###### #    # #      ######   #
                            4.7.0
  ===================================================================
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

修改source目录下用户资源刷新页面就能看到效果，修改其他目录或配置文件后需重启 hexo server。

引入butterfly主题

1、Git安装，使用Gitee源，在my-blog下目录执行，会下载到themes目录下

1
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

2、配置hexo应用butterfly主题，修改 Hexo 根目录下的 _config.yml，把主题改为butterfly

1
theme: butterfly

3、在my-blog下目录执行，为 butterfly 安装 pug 以及 stylus 的渲染器

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

将my-blog/themes/butterfly目录下的 _config.butterfly.yml 主题配置文件复制到 my-blog 目录下，以后只需要在 my-blog/_config.butterfly.yml 进行配置就行。

butterfly站点示例

butterfly.js.org主站Demo

其他示例站点

用nginx部署静态博客

1、执行hexo generate 打包静态文件到 public 目录后上传到服务器nginx静态文件目录下

1
hexo generate

2、配置 nginx

hider
1
2
3
4
5
6
7
8
9
10
11
server {
    listen 80;
    server_name tangmingyou.com www.tangmingyou.com;

    location / {
        root /usr/share/nginx/html/public; # 指向打包的public目录
        index  index.html;
    }

    error_page 404 /index.html;
}

简单配置和小优化

butterfly简单配置

1、my-blog/_config.yml，修改语言、标题…配置

1
2
3
4
5
6
title: "tang's notes" # 网站主题标题
language: zh_CN # 网站文字语言,zh_CN简体中文、en英文、zh_TW繁体中文
timezone: 'Asia/Shanghai' # 配置时区为上海
author: strange. # 作者名,昵称

url: http://tangmingyou.com # 网站url

2、my-blog/_config.butterfly.yml配置

hider
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
favicon: /img/favicon.ico # favicon.ico, /img 目录对应 my-blog/source/img/

avatar: # 头像
  img: /img/avatar.png

index_img: /img/4876.jpg # 网站 home page banner 主图

theme_color:
  main: "#5c6b87" # 网站主配色，可在_config.butterfly.yml全局搜索相关默认配色#49b1f5替换

aside:
  card_author: # 配置github或其他地址
      text: github
      link: https://github.com/tangmingyou

更多配置请参考官方文档和其他站点Demo示例。

页脚ICP备案信息

这里直接简单粗暴修改页脚pug模板文件themes/butterfly/layout/includes/footer.pug。

1
2
3
// 在最后添加如下内容，注意空格层级相对 #footer-wrap 的下一级
.icp
  a(href='https://beian.miit.gov.cn/')='蜀ICP备1234567890号'

butterfly代码块折叠处理

有大段的东西想要放上去，但又不想占据大量的位置。折叠是最好的选择。

1、默认代码块是全打开的，可配置 _config.butterfly.yml 中的highlight_shrink: true，则代码块全部折叠。

2、如果只想折叠部分代码块，这里代码块添加标记hider后（可自定义成其他的），修改butterfly 中的代码块处理函数。

1
2
3
​```java hider
System.out.Println("Hello Hexo Butterfly");
​```

在 main.js 代码块渲染处理函数 addHighlightTool 函数最后（约第207行）添加如下代码。

hider main.jsmain.js源码
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
// 收起代码处理，遍历所有代码块元素，找到所有hider进行折叠style处理
$figureHighlight.forEach(function(item) {
    const titleEle = item.querySelector('figcaption>span')
    let hiderSymbol = 'hider'
    let title;
    if (titleEle && (title = titleEle.innerText) && (title === hiderSymbol || title.startsWith(hiderSymbol + ' '))) {
        // 去掉hider符号
        if (title === hiderSymbol) {
            const p = titleEle.parentNode
            titleEle.parentNode.removeChild(titleEle)
            p.parentNode.removeChild(p)
        } else {
            titleEle.innerText = title.substring(hiderSymbol.length + 1)
            titleEle.parentNode.style.display = 'none'
        }
        // 箭头
        item.querySelector('i.fa-angle-down').classList.add('closed')
        // 隐藏代码
        const code = item.querySelector('table')
        if (code) {
            code.style.display = 'none'
        }
    }
})