hexo blog优化之路

发表于 更新于 分类于 Waline：

  最近想重新整理下我的博客，之前使用的 coding.net 的免费托管加部署，后来它转收费了，所以网站就停了，后面我买了台服务器，打算部署在自己的机器上，于是先做了公安备案，备案很快，我以为还要去现场签字什么的，icp备案几年前在阿里云就做好了，现在迁到腾讯云，接下来开始我的一些定制化和部署前优化：

hexo

第一件事就是更新package.json依赖，在这之前先升级node到14.x

hexo博客文章链接地址默认采用文章名称，这点不利于seo，而且文章名字有可能还会更改，所以我换成了永久链接，类似简书的风格。这种短链接也有利于做流量统计

  1. 安装 hexo-abbrlink
  2. config.yml 添加如下配置
1
2
3
4
5
6
7
8
9
10
11
12
# abbrlink config
abbrlink:
  alg: crc32  #support crc16(default) and crc32
  rep: hex    #support dec(default) and hex
  drafts: false   #Do not process draft. false(default) 

# 文章相对于根目录的相对地址，也是地址栏的地址
permalink: p/:abbrlink.html
# 去掉地址后面的.html
pretty_urls:
  trailing_index: false
  trailing_html: false

theme-next

这部分修改有点多，只讲重点部分，可以根据自己喜好修改源码

升级

克隆最新版本的 theme-next，我没删除旧版的next，所以克隆时换了个名字: next-new

主题配置

查阅官网时发现主题配置可以选择性覆盖，也就是在hexo source目录下新建 _data/next.yml，它会自动覆盖 theme/_config.yml 的同名属性，大家可以根据需要修改，我自定义了几个模板，是为了做pv展示，这个在后面讲。

1
2
3
4
5
custom_file_path:
  postMeta: source/_data/post-meta.swig
  # footer: source/_data/footer.swig
  bodyEnd: source/_data/body-end.swig
  style: source/_data/styles.styl

下面是我在样式上的一些定制化，比如行内代码块，是借鉴的一个网站，觉得好看，就沿用了

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
code {
    color: salmon;
    margin-left: 3px;
    margin-right: 4px;
    background-color: #fbf7f8;
    border: 1px solid #ddd;
    box-shadow: 1px 1px 0 #fff, 2px 2px 0 #ddd;
}
@media (max-width: 1600px) {
    code {
        padding-top: 2px;
        padding-bottom: 2px;
    }
}
@media (min-width: 1200px) {
    .post-body {
        font-size: 1em;
    }
}
@media (max-width: 767px) {
    .post-body {
        font-size: 0.875em;
    }
    code {
        padding-top: 1px;
        padding-bottom: 1px;
        font-size: 0.875em;
    }
    .post-button {
        text-align: center;
    }
}

ssl证书

这里有两个方案，一是采用certbot软件更新证书，它每3个月就要更新一次，不过可以设置定时任务，二是阿里云免费dv证书，我使用的这种，每年最多20张dv单域名证书，有效期一年，具体如何操作请自行搜索。

可以参考我的nginx配置，特别是最后80的重定向，网上的一些代码容易导致首页地址后面出现双斜杠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
server {
    listen       443 ssl;
    server_name  me.chjiyun.com;
    root /workspace/hexo-blog;

    ssl_certificate  cert/me.chjiyun.com.pem;
    ssl_certificate_key cert/me.chjiyun.com.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
}

server {
    if ($host = me.chjiyun.com) {
        return 301 https://$host$request_uri;
    }
    listen      80;
    server_name me.chjiyun.com;
    return 404;
}

静态资源缓存

cdn加速

第三方库全部采用cdn链接，因为这些静态文件几乎是不会变的

nginx缓存

其他静态文件也可以配置缓存时间，提高浏览器页面加载时间，html页面不设置缓存，因为有时候要更新静态资源引用链接

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
location / {
    index index.html;
    expires -1;
    # try_files $uri /index.html 403;
}

location ^~ /p/ {
    #通过访问时添加后缀来隐藏URL中的后缀
    if (!-e $request_filename){
        rewrite ^(.*)$ /$1.html last;
        break;
    }
    root /usr/share/nginx/html;
    index index.html index.nginx-debian.html;
    try_files $uri $uri/ =404;
}

location ~ /[^/]*main\.css$ {
    add_header Cache-Control public;
    expires 1d;
}

location ~ /[^/]*\.(js|css|woff2)$ {
    add_header Cache-Control public;
    expires 30d;
}

location ~ /[^/]*\.(jpg|jpeg|png|gif|ico)$ {
    add_header Cache-Control public;
    expires 7d;
}

nginx.conf设置gzip压缩，提高文件网络传输速度

1
2
3
4
5
6
7
8
9
10
11
gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 1k;
# 对字体woff压缩不明显
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

静态资源缓存更新

有一些定制化需求会修改js文件，由于上面已经设置js文件缓存时间，所以浏览器不会在有效期内去请求新的资源，我的方案是给js引用链接后面加戳，即?v=0.0.1，这和有些webpack项目给静态文件后缀前面加上短hash效果是一样的。

流量统计

打算自己做流量统计服务，一方面是第三方服务不太稳定，二是锻炼自己go开发的能力，没错，打算用go开发网站后端服务。

网站流量主要分为三个指标：page pv（页面浏览量）、site uv（站点访客量）、site pv（站点浏览量），pv比较好统计，访问一次页面算一个pv，但是uv却不好区分，因为博客网站往往没有登录，未登录也无法识别用户唯一身份，靠ip也不能区分用户，由于NAT技术的存在使得局域网内的设备使用同一个公网ip，同一设备也可以被多人使用，js也没法取到mac地址，所以最终采用折中的方案，一天内相同ip多次访问算一个uv，后端实现就不细说了。

未完待续