医疗网站女性专题网页设计模板,做国际物流需网站,做物流网站有哪些功能,阿贝云永久免费服务器Hexo部署到云服务器后CSS样式无效的问题
01 前言
趁活动入手了一个云服务器#xff08;Linux#xff09;#xff0c;打算简单挂个博客上去#xff0c;因为之前部署到github有了一些经验#xff0c;所以还是选择使用Hexo。中间步骤略#xff0c;部署完使用浏览器访问的时…Hexo部署到云服务器后CSS样式无效的问题
01 前言
趁活动入手了一个云服务器Linux打算简单挂个博客上去因为之前部署到github有了一些经验所以还是选择使用Hexo。中间步骤略部署完使用浏览器访问的时候碰到一个比较诡异的现象文字、图案等内容是有了但是只是直接简单罗列出来的CSS样式没有生效 于是先F12简单检查一下浏览器网络请求情况发现CSS文件请求也是正常的也正常返回来内容了但是就是没有渲染到页面 就像这样
查了一通资料Hexo配置文件也折腾了一番还是没有解决。最后认真对比了一下跟GitHub的部署的那套有啥区别之后发现原来坑是在NGINX代理上。
02 正文
相关软件版本如下 Nginx:1.18.0 Hexo:7.0.0 Hexo 主题butterfly4.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 后记
算是一个简单的问题记录一下。
