CSS没有加载自托管Nginx与Jekyll/Hugo网站

Question

我正在Olimex Lime2板(Armbian OS(上使用Nginx作为我的Web服务器构建一个静态网站。我的问题是，无论我使用什么静态网站构建器或主题，当我去查看公共网站时，都没有CSS样式。以下是公共网站：https://natehn.com

我在Hugo和Jekyll上尝试了几个主题，对默认设置几乎没有修改。这就是为什么我认为问题出在Nginx身上。

我已经探讨了这个问题，并在谷歌上搜索了很多，但无法确定解决方案。我自学成才，不知道自己在找什么。希望我错过了一些简单的东西，这是一个简单的解决方案。

这是我的nginx.conf：

events {}
# Expires map
http {
map $sent_http_content_type $expires {
default                    off;
text/html                  7d;
text/css                   max;
application/javascript     max;
~image/                    max;
}

server {
listen       80;
server_name  natehn.com;
location / {
return 301 https://$server_name$request_uri;
}
}
server{
listen 443 ssl http2;
server_name natehn.com;
charset UTF-8; #improve page speed by sending the charset with the first response.
location / {
root /home/nathan/blog/public;
index index.html;
autoindex off
}

#Caching (save html pages for 7 days, rest as long as possible, no caching on frontpage)
expires $expires;
location @index {
add_header Last-Modified $date_gmt;
add_header Cache-Control 'no-cache, no-store';
etag off;
expires off;
}
#error_page  404              /404.html;
# redirect server error pages to the static page /50x.html
#error_page   500 502 503 504  /50x.html;
#location = /50x.html {
#    root   /var/www/;
#}
#Compression
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
# Logs
access_log   /var/log/nginx/natehn.com.com_ssl.access.log;
error_log    /var/log/nginx/natehn.com_ssl.error.log;
# SSL Settings:
ssl_certificate /etc/letsencrypt/live/natehn.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/natehn.com/privkey.pem;
# Improve HTTPS performance with session resumption
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 5m;
# Enable server-side protection against BEAST attacks
ssl_prefer_server_ciphers on;
ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DH+3DES:!ADH:!AECDH:!MD5;
# Disable SSLv3
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
# Lower the buffer size to increase TTFB
ssl_buffer_size 4k;
#CAUSED ERROR
# Diffie-Hellman parameter for DHE ciphersuites
# $ sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 4096
#ssl_dhparam /etc/ssl/certs/dhparam.pem;
# Enable HSTS (https://developer.mozilla.org/en-US/docs/Security/HTTP_Strict_Transport_Security)
add_header Strict-Transport-Security "max-age=63072000; includeSubdomains";
# Enable OCSP stapling (http://blog.mozilla.org/security/2013/07/29/ocsp-stapling-in-firefox)
ssl_stapling on;
ssl_stapling_verify on;
ssl_trusted_certificate /etc/letsencrypt/live/natehn.com/fullchain.pem;
resolver 192.34.59.80 66.70.228.164 valid=300s;
resolver_timeout 5s;
}
}

这是我的可用网站/natehn.com，它链接到启用的网站：

server {
listen 80 default_server;
listen [::]:80 default_server;
# SSL configuration
listen 443 ssl default_server;
listen [::]:443 ssl default_server;

root /home/nathan/blog/public;
# Add index.php to the list if you are using PHP
index.html;
server_name natehn.com www.natehn.com;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}
}

我探索了我所知道的一切。关于在哪里寻找潜在解决方案，有什么建议吗？如果你还需要看什么，请告诉我。

非常感谢：(N

Answer 1

由于内容混合，css链接已被阻止-页面通过https://加载，但css的href是普通的http://

你最喜欢的图标也是如此。

作为一种通用方法，要使用与父页面相同的协议，只需忽略href中的内容，例如：

<link rel="stylesheet" href="//natehn.com/css/style-white.css">

编辑：对于网站建设者来说，更好的解决方案是设置基本URL，以确保构建的hrefs始终使用正确的协议，在您的情况下为https:

• 关于Hugo，请参阅中的baseURLhttps://gohugo.io/getting-started/configuration/
• 关于Jekyll，请参阅中的baseurlhttps://jekyllrb.com/docs/configuration/options/

Wordpress和其他公司也有类似的选择。