无法通过Jekyll / Hugo网站为自托管Nginx加载CSS

如何解决无法通过Jekyll / Hugo网站为自托管Nginx加载CSS

我正在使用Nginx作为Web服务器在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，它链接到启用了sites的站点：

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

解决方法

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

您的收藏夹图标也是如此。

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

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

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

• 关于雨果，请参见https://gohugo.io/getting-started/configuration/中的baseURL
• 有关Jekyll，请参见https://jekyllrb.com/docs/configuration/options/中的baseurl

Wordpress和其他具有类似的选项。