时间：2023-09-16 22:48:02 | 来源：网站运营
时间：2023-09-16 22:48:02 来源：网站运营
如何让你的静态网站极速打开：关于个人博客，网络上已有很多篇文章介绍了如何使用「Github Page」来搭建个人网站，但是「Github Page」在国内的速度对于很多读者来说 体验并不好。本文主要针对搭建静态网站 已有一定经验或充满浓厚兴趣 的读者，介绍 如何提高静态网站的访问速度 的方法，不讨论加速 WordPress 等动态网站的内容。
在线咨询
HTML,CSS,JavaScript,XML 等文件，只要你的网站是「静态的」就可以使用本文推荐的方法。本文不讲如何搭建博客，主要从「Page 服务」讲起，分析问题，到如何加快打开速度。个人推荐使用 CDN 或者腾讯云阿里云学生计划的价格为 9.5 元/月，峰值带宽为 5Mbps 轻量应用服务器。Github Page 开始的个人博客之旅，在 Github Page 上部署的网站就是静态网站。下面是摘自「维基百科」对于静态网页的介绍。静态网页多数为单一的超文本标记语言文件，每次请求该页面时，都会返回相同的内容。在网站设计期间内容只需创建一次。它通常是手动编写的,尽管有些站点使用类似于动态网站的自动创建工具,其结果将长期存储为完成的页面。这些自动创建的静态网站在 2015 年左右变得更受欢迎，其中包括 Jekyll 和 Adobe Muse 等生成工具。但是为什么你的静态网站打开速度很慢，主要有以下两个方面的原因。（由于静态网站基本不需要后台处理，所以不讨论 nginx 的响应时间）
Github Page 是非常良心而且稳定的服务，但在国内效果不太好。Coding Page 我使用了 2 年多时间，由于该服务经常崩溃，导致博客时常无法访问，在网上抱怨其表现的帖子也数不胜数，但是作为一个免费的服务，我们也不好要求太多，后来我将静态网站从 Coding Page 迁移到了自己的服务器。对于 Gitee 等其他的 Page 服务我没有体验过，也就不作出过多的评价。public 或 .deploy_git 文件夹，你在 GitHub Page 部署的内容也就是这里所说的静态网站Github Page 或者部署使用的服务器当然也可以是一个数据中心，存放了你的网站内容，所以我们可以设置源站地址，直接通过 CDN 加速。9.5 元/月。400 * 60 * 60 * 24 * 30 / 1024 / 1024 = 998.77 GB计算可知，即使在每时每刻跑满带宽的近 70%，一个月下来也达不到服务器的流量上限，更何况正常情况下我们的服务器也不会一直持续在这个下行网速，总结来说，阿里云的学生计划就两个字，良心！// 安装 nginx$ sudo apt-get install nginx// 查看 nginx 的配置文件路径，检查配置文件语法$ nginx -tnginx: the configuration file /etc/nginx/nginx.conf syntax is oknginx: configuration file /etc/nginx/nginx.conf test is successful// 启动 nginx$ nginx// 修改配置文件之后重启 nginx$ nginx -s reload// 停止 nginx$ nginx -s stop我创建了 /etc/nginx/sites-enabled/blog.cugxuan.cn 作为配置文件，按照对应的路径写入配置。对于 HTTPS 的配置请查询你使用的云服务商的对应配置文档。server { listen 80; server_name blog.cugxuan.cn; access_log blog.cugxuan.cn.log; error_log blog.cugxuan.cn.error; location / { root /root/blog.cugxuan.cn; index index.html index.htm; } # 强制跳转 HTTPS rewrite ^(.*) https://$server_name$1 permanent; error_page 500 502 503 504 /50x.html; location = /50x.html { root html; }}server { listen 443; server_name blog.cugxuan.cn; #填写绑定证书的域名 ssl on; ssl_certificate tecent-ssl/blog.cugxuan.cn/Nginx/1_blog.cugxuan.cn_bundle.crt; ssl_certificate_key tecent-ssl/blog.cugxuan.cn/Nginx/2_blog.cugxuan.cn.key; ssl_session_timeout 5m; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置 ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照这个套件配置 ssl_prefer_server_ciphers on; location / { root /root/blog.cugxuan.cn; #站点目录 index index.html index.htm; }}search.json 是否开启 Gzip 的对比。从图中可以看到，在开启了第 4 级的压缩之后传输的文件大小缩小了一半多，请求时间也大大减少。/etc/nginx/nginx.conf，在 http 的配置中修改 gzip 设置，最关键的是需要注意 gzip_types，默认的配置中有很多选项没有包括，如 application/json。http{ ... gzip on; gzip_min_length 1k; #低于1kb的资源不压缩 gzip_comp_level 4; #压缩级别【1-9】，越大压缩率越高，同时消耗cpu资源也越多，建议设置在4左右。 gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css application/json; #需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片 gzip_disable "MSIE [1-6]/."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持） gzip_vary on; #是否添加“Vary: Accept-Encoding”响应头 ...}那如何寻找没有添加的 type 呢？我们打开 Chrome 的「开发者工具」，打开自己的网站，对于「Network」中请求自己网站的包，看是否启动 Gzip，如果「Response Headers」显示「Accept-Ranges: bytes」则表示该包没有开启加速，可以将「Content-Type」后面的值填入「gzip_types」并且使用空格隔开。关键词：静态
