CSS not loading for self-hosted Nginx with Jekyll /Hugo site - css

Question

I am building a static website on my Olimex Lime2 board (Armbian OS) using Nginx as my webserver. My problem that no matter what static site builder or theme I use, when I go to view the public site, there is no CSS styling. Here is the public site: https://natehn.com
I have tried several themes on Hugo and Jekyll, with little or no modification to the default settings. This is why I think the issue is with Nginx.
I have explored this question and done plenty of Googling but was unable to determine a solution. I'm self-taught and don't know what I am looking for. Hopefully I missed something simple and this is an easy fix.
Here is my 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;
}
}
And here is my sites-available/natehn.com, which is linked to sites-enabled:
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;
}
}
I have explored everything I know. Any tips on where to look for potential solutions? Let me know if there is something else you need to look at.
Many thanks :) N

Answer 1

The css link has been blocked because of mixed content - the page is loaded over https:// but the href for the css is plain http://
Same will be true for your favicon etc.
As a general approach, to use the same protocol as the parent page, simply miss that off the href, for example:
<link rel="stylesheet" href="//natehn.com/css/style-white.css">
Edit: Better solution for site builders is to set the base URL to make sure constructed hrefs always use the correct protocol, https in your case:
For Hugo, see baseURL in https://gohugo.io/getting-started/configuration/
For Jekyll, see baseurl in https://jekyllrb.com/docs/configuration/options/
Wordpress and others have similar options.