使用 Jekyll / Hugo 站点的自托管 Nginx 未加载 CSS

Question

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

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

我探索了this question 并进行了大量谷歌搜索，但无法确定解决方案。我是自学成才，不知道我在寻找什么。希望我错过了一些简单的事情，这是一个简单的解决方法。

这是我的 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;
}
}

这是我的 sites-available/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

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

您的网站图标等也是如此。

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

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

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

• 对于 Hugo，请参阅 baseURL in https://gohugo.io/getting-started/configuration/
• 对于 Jekyll，请参阅 baseurl in https://jekyllrb.com/docs/configuration/options/

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