优化博客网站

昨天我把博客从GitHub Pages上转移到阿里云服务器上，然后由于网站备案的问题又转移到了Azure的韩国服务器上。虽然访问速度比以前快了不少，但是访问速度还是略慢，有时候又会快一点，不稳定。然后我又做了一些安全性的加固，比如说在返回的数据包中隐藏服务器信息。

所以这篇博客记录我是如何优化博客访问速度、如何进行安全加固，以及后续可能会更新的优化博客使用体验的操作。

博客访问速度优化

CDN 服务器问题

问题发现

打开浏览器开发工具，切换到网络工具，查看本机对网站资源的请求情况。

我发现我的博客内容中的图片的请求速度还挺快，但是我的博客内容却要在图片加载完成之后一段时间才能被浏览器渲染出来。

在我使用的这个hexo博客主题A4设置中，有一些静态的资源css、js和字体是从cdn上请求下来的。

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

jay1an@Azure-jay1an:~$ curl ipinfo.io/104.21.82.50
{
  "ip": "104.21.82.50",
  "anycast": true,
  "city": "San Francisco",
  "region": "California",
  "country": "US",
  "loc": "37.7621,-122.3971",
  "org": "AS13335 Cloudflare, Inc.",
  "postal": "94107",
  "timezone": "America/Los_Angeles",
  "readme": "https://ipinfo.io/missingauth"

如下图，这个css文件就是从cdn上请求下来的，而这个cdn服务器在美国加州，以国内的网络访问该地址需要花费的时间比较长，并且在网络环境不太好的时候甚至无法访问，这就会导致博客的访问速度变慢。

在这里可以清晰看见，我们主机访问博客页面的时候除了要向博客所在的服务器请求博客内容的资源以及一些必要的css和js文件之外，还会向两个位于美国加州的cdn服务器请求一些静态资源。

由于国内网络访问美国加州cdn服务器造成很大的延时甚至有时请求失败，这使得博客内容整体访问速度变慢，所以我想先将位于cdn上的资源下载到服务器上，以后访问博客页面时，主机只需要向博客所在服务器请求资源即可。

解决办法 - 更改Hexo博客主题源码

工作准备

在分析完问题之后，确定需要查看Hexo A4主题的源码文件，找到调用cdn的位置，将其替换为从本地的资源中获取。

先来到hexo A4主题的目录下 themes\A4

然后在cmd窗口使用下面的命令，搜索内容中带有"str"的文件

1

findstr /S /I /M "str" *

这个命令的各个部分的含义如下：

• findstr: 命令的名称，用于搜索文件中的字符串。
• /S: 递归搜索当前目录及其子目录中的文件。
• /I: 忽略大小写（即搜索时不区分大小写）。
• /M: 只显示包含匹配字符串的文件名，而不是显示匹配的具体行。
• “str”: 要搜索的字符串。在这个例子中，”str” 是要搜索的字符串。
• *****: 文件通配符，表示当前目录下的所有文件。

去掉依赖 CDN 的资源

目前我想找到对这个资源的请求代码。

1

https://jsd.onmicrosoft.cn/npm/hexo-theme-a4@latest/source/css/lightgallery.min.css

于是使用findstr命令在hexo A4主题目录下搜索：

1
2
3

themes\A4>findstr /S /I /M "css/lightgallery" *
layout\_partial\head.ejs
scripts\events\gallery\gallery.js

结果表明head.ejs和gallery.js中包含字符串"css/lightgallery"，所以请求cdn的逻辑应该就在这里。

果然在gallery.js中发现了以下内容

1
2
3
4
5
6
7
8
9

var renderer = require('./renderer');

hexo.config.lightgallery = Object.assign({
    js: 'https://jsd.onmicrosoft.cn/npm/hexo-theme-a4@latest/source/js/lightgallery.min.js',
    css: 'https://jsd.onmicrosoft.cn/npm/hexo-theme-a4@latest/source/css/lightgallery.min.css',
    plugins: {},
}, hexo.config.lightgallery);

hexo.extend.filter.register('after_post_render',renderer.render,9);

在renderer.js又有如下代码段，利用了定义在gallery.js中的hexo.config.lightgallery，这里是请求cdn的一处逻辑。

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

function addTag(data){
    var config = this.config.lightgallery;
    if(!config){
        return;
    }

    // add js
    data.content = '<div class=".article-gallery">'+data.content+'</div>';
    data.content+='<script src="'+config.js+'"></script>';

    // add css
    var css = '<link rel="stylesheet" type="text/css" href="'+config.css+'" />';
    data.content = css + data.content;

    // add plugins
    var plugins = Object.keys(config.plugins);
    for (var plugin of plugins){
        var jsTag = '<script src="'+config.plugins[plugin]+'"></script>';
        data.content += jsTag;
    }
}

于是我将上述两个文件下载下来，分别存放在 A4/source/css 和 A4/source/js 目录下，并且修改了代码配置，使其从本地文件中读取而不是从 CDN 服务器获取资源。

然而，我发现 A4/source/css 和 A4/source/js 目录中原本就有这两个文件。经过进一步调查，我认为这可能是 A4 主题设计上的一个不足之处。具体来说，部分代码是从本地文件中读取 CSS 和 JS 资源，而其他部分则依赖于 CDN 获取资源。这种不一致性可能是主题作者在开发过程中遗留下来的一个 BUG。

修改部分：

1
2
3
4
5
6
7
8
9

var renderer = require('./renderer');

hexo.config.lightgallery = Object.assign({
    js: 'js/lightgallery.min.js',
    css: 'css/lightgallery.min.css',
    plugins: {},
}, hexo.config.lightgallery);

hexo.extend.filter.register('after_post_render',renderer.render,9);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function addTag(data){
    var config = this.config.lightgallery;
    if(!config){
        return;
    }

    // 获取根路径 ⭐⭐⭐
    var root = this.config.root || '/';

    // add js
    data.content = '<div class="article-gallery">'+data.content+'</div>';
    data.content += `<script src="${root}${config.js}"></script>`;

    // add css
    var css = `<link rel="stylesheet" type="text/css" href="${root}${config.css}" />`;
    data.content = css + data.content;

    // add plugins
    var plugins = Object.keys(config.plugins);
    for (var plugin of plugins){
        var jsTag = `<script src="${root}${config.plugins[plugin]}"></script>`;
        data.content += jsTag;
    }
}

效果

我按照相同的方法，将所有依赖于 CDN 服务器的资源全部下载到本地，并修改相应的代码配置，使其全部从本地读取资源。

下载后我发现，这些资源中的大多数实际上也已经存在于本地文件夹中…….这种不一致性大概率就是作者的疏忽吧。

这样，再次访问我的博客时，可以明显看到不再依赖于 CDN 服务器的效果，所有资源全部从博客所在服务器请求。

静态资源重复请求问题

问题发现

开启浏览器开发者工具后，我注意到在博客中切换页面时，一些常用的资源和字体在不同页面间是共享的。然而，每次刷新页面或切换页面时，这些资源都会重新向服务器发出请求。这不仅造成了网络资源的浪费，还影响了页面的加载速度和用户体验。

为了进一步提升博客的访问速度，我决定在服务器上开启缓存功能。通过缓存，可以减少重复请求的次数，减少服务器负载，并加快用户的访问速度。

解决办法 - 开启缓存

在服务器上修改Apache配置，我的网站对应的conf文件路径为：/etc/apache2/sites-available/jay1an.conf

需要在里面加入这样一段内容

1
2
3
4
5

<IfModule mod_headers.c>
    <FilesMatch "\.(html|css|js|png|jpg|jpeg|gif|ico|svg|woff2|woff|ttf)$">
        Header set Cache-Control "max-age=86400, public"
    </FilesMatch>
</IfModule>

然后还需确保Apache已经启用了mod_headers和mod_expires模块。

1
2
3

sudo a2enmod headers
sudo a2enmod expires
sudo systemctl restart apache2

通过上述配置，服务器会在响应头中添加Cache-Control指令，告知浏览器缓存指定时间内的资源。当用户再次访问这些资源时，浏览器会直接从缓存中加载，而不是重新向服务器请求，从而提高访问速度。

效果

在开启缓存功能后，重新访问博客，可以明显感觉到页面加载速度的提升。浏览器会缓存常用的资源和字体，当切换页面时，这些资源无需再次从服务器获取，大大减少了网络资源的浪费，并提升了访问速度。

刷新

第一次访问：

刷新：

并且从上图中的Size栏中可以看到这些静态资源都是从缓存中获取的，而不是从服务器上请求的。

切换页面

现在切换到另外一个页面，发现共用的静态资源都从缓存中获取了。

博客安全加固

隐藏服务器信息

服务器在返回给客户端的数据包的包头中设置了Server字段

这暴露了服务器的操作系统和Apache的版本，这存在一定的安全隐患。

可以通过设置修改Apache的配置隐藏这一消息。

下面是在我的服务器(Ubuntu)上具体的步骤：

1. 编辑Apache配置文件： 打开Apache的主配置文件，/etc/apache2/conf-enabled/security.conf。

2. 找到并修改ServerTokens指令： ServerTokens指令决定了在服务器响应头中显示的Apache版本信息。可以将其设置为Prod或者ProductOnly，这样只会显示“Apache”而不显示具体的版本号。

   1	ServerTokens Prod

3. 找到并修改ServerSignature指令： ServerSignature指令决定了在服务器错误页面中显示的Apache版本信息。可以将其设置为Off，以禁止显示版本信息。

   1	ServerSignature Off

4. 重启Apache服务： 修改配置文件后，重新启动Apache服务使更改生效。

   1	sudo systemctl restart apache2

最终效果

博客使用感优化

重定向404页面

未重定向前，如果请求到服务期上不存在的资源，则会提示404，并且返回默认的页面。

为了在这种情况下提供一个友好的提示页面，从而提升使用体验，需要配置一下重定向404。

首先需要准备一个404.html文件

然后在网站目录下创建一个.htaccess文件，在.htaccess文件中添加如下内容即可。

1

ErrorDocument 404 /404.html

这样，当用户访问一个不存在的页面时，会自动重定向到404.html页面。