butterfly主题页面加载缓慢

0x00 起因

 最近打开博客发现加载的贼慢,于是F12查看了一下:发现这两个css加载时间竟然要14s,太离谱了。
 通过域名看了下请求地址,看到cdn.jsdelivr猜到应该是jsdelivr的缓存被阻断,搜了一下果然是这样,最快的方法是将cdn.jsdelivr.net替换成fastly.jsdelivr.net。

0x01 cdn.jsdelivr.net的替换

 想要修改肯定先要知道是哪里调用的,好在都是开源软件可以直接分析源码。
 先后在github下载了hexo和butterfly的源码,最后在butterfly源码的/scripts/events/路径下的cdn.js文件内找到了cdn.jsdelivr.net的定义,分析了下因为是全局定义,所以直接将其修改为fastly.jsdelivr.net就行
 若是linux服务器部署的也是一样,进入butterfly目录修改即可。
 若以后fastly.jsdelivr.net也有问题那就只能改成本地引用了。

nginx安全性配置

nginx安全性配置

偶然看到一篇文章谈到nginx配置安全性,然后搜索了一下,GitHub找到一个挺不错仓库,就不用自己总结了。
对比了下,和使用nginx配置在线生成网站生成的差不多,也不用改什么,nice

例子

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
# 作者博客 http://tautt.com/best-nginx-configuration-for-security/

# 不发送Nginx版本号
server_tokens off;

# 不允许浏览器在frame或iframe中显示页面
# 避免 点击劫持(clickjacking) http://en.wikipedia.org/wiki/Clickjacking
# 如果需要允许 [i]frames, 你可以用 SAMEORIGIN 或者用ALLOW-FROM uri 设置单个uri
# https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options
add_header X-Frame-Options SAMEORIGIN;

# 服务用户提供的内容时, 包含 X-Content-Type-Options: nosniff 头选项,配合 Content-Type: 头选项,
# 来禁用某些浏览器的 content-type 探测.
# https://www.owasp.org/index.php/List_of_useful_HTTP_headers
# 当前支持 IE > 8 http://blogs.msdn.com/b/ie/archive/2008/09/02/ie8-security-part-vi-beta-2-update.aspx
# http://msdn.microsoft.com/en-us/library/ie/gg622941(v=vs.85).aspx
# 火狐 '不久'支持 https://bugzilla.mozilla.org/show_bug.cgi?id=471020
add_header X-Content-Type-Options nosniff;

# 启用大部分现代浏览器内置的 the Cross-site scripting (XSS) 过滤.
# 通常缺省情况下已经启用, 所以本选项为为本网站重启过滤器,以防其被用户禁用.
# https://www.owasp.org/index.php/List_of_useful_HTTP_headers
add_header X-XSS-Protection "1; mode=block";

# 启用 Content Security Policy (CSP) (和支持它的浏览器(http://caniuse.com/#feat=contentsecuritypolicy)后,
# 你可以告诉浏览器它仅能从你明确允许的域名下载内容
# http://www.html5rocks.com/en/tutorials/security/content-security-policy/
# https://www.owasp.org/index.php/Content_Security_Policy
# 修改应用代码, 通过禁用css和js的 'unsafe-inline' 'unsafe-eval' 指标提高安全性
# (对内联css和js同样适用).
# 更多: http://www.html5rocks.com/en/tutorials/security/content-security-policy/#inline-code-considered-harmful
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://ssl.google-analytics.com https://assets.zendesk.com https://connect.facebook.net; img-src 'self' https://ssl.google-analytics.com https://s-static.ak.facebook.com https://assets.zendesk.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://assets.zendesk.com; font-src 'self' https://themes.googleusercontent.com; frame-src https://assets.zendesk.com https://www.facebook.com https://s-static.ak.facebook.com https://tautt.zendesk.com; object-src 'none'";

# 将所有 http 跳转至 https
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name .forgott.com;
return 301 https://$host$request_uri;
}

server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name .forgott.com;

ssl_certificate /etc/nginx/ssl/star_forgott_com.crt;
ssl_certificate_key /etc/nginx/ssl/star_forgott_com.key;

# 启用 session resumption 提高HTTPS性能
# http://vincent.bernat.im/en/blog/2011-ssl-session-reuse-rfc5077.html
ssl_session_cache shared:SSL:50m;
ssl_session_timeout 1d;
ssl_session_tickets off;

# DHE密码器的Diffie-Hellman参数, 推荐 2048 位
ssl_dhparam /etc/nginx/ssl/dhparam.pem;

# 启用服务器端保护, 防止 BEAST 攻击
# http://blog.ivanristic.com/2013/09/is-beast-still-a-threat.html
ssl_prefer_server_ciphers on;
# 禁用 SSLv3(enabled by default since nginx 0.8.19) since it's less secure then TLS http://en.wikipedia.org/wiki/Secure_Sockets_Layer#SSL_3.0
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
# ciphers chosen for forward secrecy and compatibility
# http://blog.ivanristic.com/2013/08/configuring-apache-nginx-and-openssl-for-forward-secrecy.html
ssl_ciphers 'ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS';

# 启用 ocsp stapling (网站可以以隐私保护、可扩展的方式向访客传达证书吊销信息的机制)
# http://blog.mozilla.org/security/2013/07/29/ocsp-stapling-in-firefox/
resolver 8.8.8.8 8.8.4.4;
ssl_stapling on;
ssl_stapling_verify on;
ssl_trusted_certificate /etc/nginx/ssl/star_forgott_com.crt;

# 启用 HSTS(HTTP Strict Transport Security) https://developer.mozilla.org/en-US/docs/Security/HTTP_Strict_Transport_Security
# 避免 ssl stripping https://en.wikipedia.org/wiki/SSL_stripping#SSL_stripping
# 或 https://hstspreload.org/
add_header Strict-Transport-Security "max-age=31536000; includeSubdomains; preload";

# ... 其他配置
}

用云盘备份hexo

备份

运行环境

  • Ubuntu 20LTS版本
  • 公网ip
  • 有自己域名

0x01 下载阿里云linux客户端

进入opt目录

1
cd /opt

下载安装包

1
wget https://download.fastgit.org/tickstep/aliyunpan/releases/download/v0.2.1/aliyunpan-v0.2.1-linux-amd64.zip

安装解压工具

1
apt install unzip

解压

1
unzip aliyunpan-v0.2.1-linux-amd64.zip

重命名文件夹

1
mv aliyunpan-v0.2.1-linux-amd64/ aliyunpan/

0x02 登录

进入aliyunpan目录并运行

1
2
cd aliyunpan/
./aliyunpan

通过token登录

1
2
login -RefreshToken=你的RefreshToken值  # 登录
exit # 退出

RefreshToken值获取方法

0x03 备份准备

创建备份文件

1
2
cd /opt
vim blogBackup.sh

复制下面的备份脚本进入文件

  • 注意看命令后的备注,需要提前创建一些目录
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    #!/bin/bash
    # -------------------------------------------------------------------------------
    # FileName: blogBackup.sh
    # Describe: Used for blog backup
    # Revision: 1.0
    # Date: 2022/09/21
    # Author: luyublog
    WEB_PATH=/root/blog/source # 要备份的目录
    ALIYUNPAN_PATH=/www/blogBackup/ #阿里网盘内的文件夹路径 提前创建好
    BACKUP_DIR=/opt/blog/backup #备份到哪个目录 提前创建好
    DATE=`date +%Y%m%d%H` #时间
    # 删除本地备份数据(删除7天以前的备份数据)
    echo "正在删除7天以前的本地博客备份数据!!!"
    find $BACKUP_DIR -mtime +7 -type f -name '*.tar.gz' -exec rm -rf {} \;
    # 备份博客源文件目录
    echo "删除成功,正在备份博客数据!!!"
    tar zcPf $BACKUP_DIR/BLOG_${DATE}.tar.gz $WEB_PATH
    # 调用aliyunpan上传备份的文件
    echo "备份成功,上传云盘"
    /opt/aliyunpan/aliyunpan upload $BACKUP_DIR/BLOG_${DATE}.tar.gz $ALIYUNPAN_PATH

保存退出后执行看看能不能运行

1
bash blogBackup.sh 
  • 这里多说一句,如果你是先把代码复制到windows环境下再导入到linux机器里的话会执行失败
    建议看下这篇文章

0x04 定时执行

设置定时任务

1
vim /etc/crontab

把以下内容复制到最后一行

1
2
#每天早上2点执行备份脚本
0 2 * * * root /opt/blogBackup.sh > /opt/blogBackup.log 2>&1 &

保存退出后重启一下cron

1
service cron restart

恢复

最后说一下恢复。把hexo、nginx重新安装好,然后把备份文件下载好后解压到博客source文件夹下即可

参考链接
参考博主博客

hexo常用配置

0x00 背景

接上一篇安装流程,这篇记录下具体文章配置,例如预览图,背景图,标签和简介等

0x01 front-matter例子

front-matter是文章的简介,加在md文档的最前面,用之前最好看看官方文档或者百度一下
下面提供一个常用的front-matter的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---  # 记得这三道杠也要加上
title: hexo自建经验1 # 这是简介标题
date: 2022-09-17 # 创建日期
updated: 2022-09-17 # 更新日期
tags: [博客,hexo] # 标签(详见下方)
categories: # 分类
- [博客]
- [hexo]
top_img: # 文章详情顶部照片
keywords: [博客,hexo,常用模板] # 关键词
comments: true # 是否显示评论
cover: imgs/0917.png # 首页显示的图片
description: 常用文章头模板 # 首页显示的简介
--- # 三道杠不要忘记了

0x02 图片

如果使用的图片不是外链而是本地图片的话需要在本地先将图片上传
首先在source路径下新建一个图片文件夹专门存放图片文件(绝对路径为/root/blog/source/imgs)

1
mkdir source/imgs

0x02 图片引用

在不同的地方照片的引用方式也不同
对于文章内部,可以使用以下格式

1
<img src="../../../../../imgs/yourFileName.png" alt="hexo" style="width:20%" />

当然还有其他方式,这里只说一个用着方便的,详情可以翻翻官方文档

对于front-matter,间接引用即可,详见0x01 cover的备注

0x03 生成标签

hexo框架内标签需要自己先生成标签目录

1
2
hexo new page tags
vim source/tags/index.md

然后将刚刚生成的index.md内容改为

1
2
3
4
5
---
title: 标签
date: 2022-09-05 00:00:00
type: "tags"
---

0x04 生成目录

目录的生成方式和标签基本一致

1
2
hexo new page categories
vim source/categories/index.md

还是修改index内容

1
2
3
4
5
---
title: 分类
date: 2022-09-05 00:00:00
type: "categories"
---

hexo安装及nginx配置

介绍一下自己安装hexo的过程

运行环境

  • Ubuntu 20LTS版本
  • 公网ip
  • 有自己域名

软件安装

安装nodejs

1
2
$ curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
$ sudo apt-get install -y nodejs

安装git

1
$ sudo apt-get install git-core -y

安装hexo

1
$ npm install -g hexo-cli

在root目录下新建blog文件夹

1
2
$ mkdir blog
$ cd blog/

初始化hexo环境并启动

1
2
3
$ hexo init
$ npm install hexo-renderer-pug hexo-renderer-stylus hexo-algoliasearch
$ hexo s
  • 此时若能在浏览器通过公网ip:4000访问则说明ok了

更换主题

一般都会选择一个喜欢的主题,本例选用butterfly

从github克隆第三方主题,保存到:blog/theme/主题名

1
2
$ ctrl+C #退出hexo
$ git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

配置 blog/_config.yml文件

1
$ vim _config.yml

将文件内的theme的值改为butterfly
例:theme: butterfly

重新生成

1
2
3
$ hexo clean  # 清空缓存 
$ hexo g # 重新渲染
$ hexo s