Hexo部署到云服务器后CSS样式无效的问题
01 前言
趁活动入手了一个云服务器(Linux
),打算简单挂个博客上去,因为之前部署到github
有了一些经验,所以还是选择使用Hexo
。中间步骤略,部署完使用浏览器访问的时候,碰到一个比较诡异的现象:文字、图案等内容是有了,但是只是直接简单罗列出来的,CSS样式没有生效!
于是先F12
简单检查一下浏览器网络请求情况,发现CSS文件请求也是正常的,也正常返回来内容了,但是就是没有渲染到页面!
就像这样:
查了一通资料,Hexo配置文件也折腾了一番,还是没有解决。最后认真对比了一下跟GitHub的部署的那套有啥区别之后,发现原来坑是在NGINX
代理上。
02 正文
相关软件版本如下:
Nginx:1.18.0
Hexo:7.0.0
Hexo 主题:butterfly,4.11.0
假设博客根目录为:/usr/local/example
,先生成静态资源:
hexo clean && hexo g
然后就顺利生成public
文件夹了,直接上NGINX
代理。
接着,NGINX配置大概是这样的:
http {default_type application/octet-stream;sendfile on;keepalive_timeout 65;server {listen 80;server_name example.com;location / {expires 1h;gzip on;root /usr/local/example/public;index index.html;}}
}
events {worker_connections 1024;use epoll;
}
注意default_type
,设置了默认文件类型是:application/octet-stream
,这样会导致返回的CSS、JS等文件,Content-Type
类型都是:application/octet-stream
,虽然文件内容是请求回来了,但是由于文件类型未被浏览器正确识别(或者说浏览器不知道请求回来的XXX.css
就是样式文件,XXXX.js
就是JavaScript脚本文件),所以没有渲染到页面上!
认真看网络请求中的响应标头的Content-Type
,确实是这样:
找到了原因,那就好解决了,让不同类型的文件返回时Content-Type
类型是对应的文件标识,比如css样式文件,返回类型应该是:text/css
,而js文件,返回类型应该是:application/javascript
,其他类型文件类似。
结合NGINX官方文档,可知用types
来定义返回的文件类型标识,于是将NGINX配置文件修改如下:
http {sendfile on;keepalive_timeout 65;server {listen 80;server_name example.com;location / {expires 1h;gzip on;root /usr/local/example/public;index index.html;types {text/html html;image/gif gif;image/jpeg jpg;image/png png;image/vnd.microsoft.icon ico;text/css css;application/javascript js;}default_type application/octet-stream;}}
}
events {worker_connections 1024;use epoll;
}
重启NGINX,搞定。
03 后记
算是一个简单的问题,记录一下。