styles.CSS does NOT update no matter what I try

support
1

I’ve updated my styles.css file and my fonts, etc - but when I launch the hugo site to test it

  • it shows both the old arial font and doesn’t update width changes in borders, for example.
    It’s straight ignoring all new styles.css changes.

and nothing I do fixes this

Tried turning off cache
Rebooting
Moving the styles.css to assets folder
I’ve searched everywhere online, used llms, and so on and on.
I’m at my wits end.

Please help me.

**---- config.toml ----**
baseURL = "/"
languageCode = "en-us"
title = "my-website"
#theme = "your-theme-name"

[outputs]
  section = ["HTML", "CustomRedirect"]

[outputFormats]
  [outputFormats.CustomRedirect]
    mediaType = "text/html"
    baseName = "index"
    isPlainText = false
    isHTML = true
    permalinkable = false

[asset]
  minify = true


\n---- layouts ----
**\n---- layouts/section/redirect.html ----**
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Redirecting...</title>
</head>
<body>
    {{ $latest := first 1 (sort .Pages "Date" "desc") }}
    {{ with $latest }}
        <meta http-equiv="refresh" content="0; url={{ .Permalink }}" />
        <p>If you are not redirected, <a href="{{ .Permalink }}">click here</a>.</p>
    {{ end }}
</body>
</html>

**\n---- layouts/movies/single.html ----**
{{ define "main" }}
<div class="entry">
    <h1>{{ .Title }}</h1>
    <div class="content">
        {{ .Content }}
    </div>
    <div class="navigation">
        {{ with .PrevInSection }}
            <button id="prev-entry" onclick="window.location.href='{{ .RelPermalink }}'">&larr; Previous</button>
        {{ end }}
        {{ with .NextInSection }}
            <button id="next-entry" onclick="window.location.href='{{ .RelPermalink }}'">Next &rarr;</button>
        {{ end }}
    </div>
</div>
<script>
    document.addEventListener('keydown', function(event) {
        var prevButton = document.getElementById('prev-entry');
        var nextButton = document.getElementById('next-entry');
        if (event.key === 'ArrowLeft' || event.key === 'a' || event.key === 'A') {
            if (prevButton) {
                prevButton.click();
            }
        }
        if (event.key === 'ArrowRight' || event.key === 'd' || event.key === 'D') {
            if (nextButton) {
                nextButton.click();
            }
        }
    });
</script>
{{ end }}
**\n---- layouts/movies/list.html ----**
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Redirecting...</title>
    <link rel="stylesheet" href="/css/styles.css">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Fetch the latest entry
            var latestEntryUrl = "{{ with (index (first 1 (sort .Pages "Date" "desc")) 0) }}{{ .Permalink }}{{ end }}";
            
            // Redirect to the latest entry after 1 second
            if (latestEntryUrl) {
                setTimeout(function() {
                    window.location.href = latestEntryUrl;
                }, 1000);
            }
        });
    </script>
</head>
<body>
    <div class="ascii-art">
        <pre>
                                                                                 LOADING
        </pre>
    </div>
</body>
</html>
**\n---- layouts/_default/baseof.html ----**
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ .Title }}</title>
    <link rel="stylesheet" href="{{ "css/styles.css" | relURL }}">
</head>
<body>
    <header>
        <h1>MYWEBSITE</h1>
        <nav>
            <a href="/diary/">Diary</a>
            <a href="/movies/">Movies</a>
            <a href="/study/">Study</a>
        </nav>
    </header>
    <main>
        {{ block "main" . }}{{ end }}
    </main>
</body>
</html>

**\n---- layouts/_default/single.html ----**
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ .Title }}</title>
</head>
<body>
    <h1>{{ .Title }}</h1>
    <div>{{ .Content }}</div>
</body>
</html>

**\n---- layouts/_default/list.html ----**
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ .Title }}</title>
</head>
<body>
    <h1>{{ .Title }}</h1>
    <ul>
    {{ range .Pages }}
        <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
    {{ end }}
    </ul>
</body>
</html>

**\n---- layouts/diary/single.html ----**
{{ define "main" }}
<div class="entry">
    <div class="media">
        <img src="{{ .Params.image }}" alt="{{ .Title }}">
    </div>
    <div class="content">
        <h2>{{ .Date.Format "02 January 2006" }}</h2>
        <p>{{ .Content }}</p>
    </div>
    <div class="navigation">
        {{ with .PrevInSection }}
            <button id="prev-entry" onclick="window.location.href='{{ .RelPermalink }}'">&larr; Previous</button>
        {{ end }}
        {{ with .NextInSection }}
            <button id="next-entry" onclick="window.location.href='{{ .RelPermalink }}'">Next &rarr;</button>
        {{ end }}
    </div>
</div>

<script>
    document.addEventListener('keydown', function(event) {
        var prevButton = document.getElementById('prev-entry');
        var nextButton = document.getElementById('next-entry');

        if (event.key === 'ArrowLeft' || event.key === 'a' || event.key === 'A') {
            if (prevButton) {
                prevButton.click();
            }
        }
        if (event.key === 'ArrowRight' || event.key === 'd' || event.key === 'D') {
            if (nextButton) {
                nextButton.click();
            }
        }
    });
</script>
{{ end }}

**\n---- layouts/diary/list.html ----**
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Redirecting...</title>
    <link rel="stylesheet" href="/css/styles.css">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Fetch the latest entry
            var latestEntryUrl = "{{ with (index (first 1 (sort .Pages "Date" "desc")) 0) }}{{ .Permalink }}{{ end }}";
            
            // Redirect to the latest entry after 1 second
            if (latestEntryUrl) {
                setTimeout(function() {
                    window.location.href = latestEntryUrl;
                }, 1000);
            }
        });
    </script>
</head>
<body>
    <div class="ascii-art">
        <pre>
									
												LOADING

</pre>
        <p>Redirecting to the latest diary entry...</p>
    </div>
    <!-- If JavaScript is disabled, provide a fallback link -->
    <noscript>
        <p>If you are not redirected, <a href="{{ with (index (first 1 (sort .Pages "Date" "desc")) 0) }}{{ .Permalink }}{{ end }}">click here</a>.</p>
    </noscript>
</body>
</html>

**\n---- layouts/study/list.html ----**
{{ define "main" }}
<div class="entries">
    {{ range .Pages }}
        <div class="entry">
            <h2>{{ .Title }}</h2>
            <div class="media">
                <img src="{{ .Params.image }}" alt="{{ .Title }}">
            </div>
            <div class="content">
                <p>{{ .Content }}</p>
            </div>
        </div>
    {{ end }}
</div>
{{ end }}

**\n---- layouts/shortcodes/video.html ----**
<video class="video-shortcode" preload="{{ .Get "preload" | default "metadata" }}" controls>
    <source src="{{ .Get "src" }}" type="{{ .Get "type" | default "video/mp4" }}">
    There should have been a video here but your browser does not seem to support it.
</video>
\n---- layouts/index.html ----
{{ define "main" }}
<div class="homepage">
    <!-- Home page specific content, if any, can go here -->
</div>
{{ end }}

\n---- static/css ----
\n---- static/css/styles.css ----
/* Apply a global box-sizing rule */
*,
*::before,
*::after {
    box-sizing: border-box;
}

@font-face {
  font-family: 'NectoMono';
  src: url('/fonts/NectoMono-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
    font-family: 'NectoMono', sans-serif;
    background-color: #2c2c2c;
    color: #ffffff;
    margin: 0;
    padding: 0;
}
header {
    width: 100%;
    background-color: #1c1c1c;
    padding: 20px;
    text-align: center;
    position: fixed;
    top: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

header h1 {
    margin: 0;
    font-size: 2em;
    font-family: 'PadmaaBold', Arial, sans-serif;
}

header nav {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

header nav a {
    color: #ffffff;
    text-decoration: none;
}

header nav a:hover {
    text-decoration: underline;
}

main {
    margin-top: 120px; /* Ensure the content starts below the header */
    width: 100%;
    max-width: 800px;
    margin: 120px auto 0 auto;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.entry {
    background-color: #3c3c3c;
    padding: 20px;
    width: 100%;
    overflow-wrap: break-word; /* Ensure long words break correctly */
    white-space: pre-wrap; /* Ensure long content is displayed properly */
}

.navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    width: 100%;
}

.navigation button {
    background-color: #ffffff;
    color: #2c2c2c;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

.navigation button:hover {
    background-color: #f66151;
}

.media video {
    width: 100%;
    max-width: 1920px; /* adjust as needed */
    height: auto;
    display: block;
    margin: 0 auto;
}
/* Ensure media images are sized properly */
.media img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 20px;
    border-radius: 10px;
    width: 100%; 
    max-height: 600px; /* Adjust this value as needed */
}

.video iframe {
    width: 100%;
    height: 315px;
}

.content {
    text-align: left; /* Align text to the left for better readability */
    margin-top: 20px;
    width: 100%;
}

.video-shortcode {
  max-width: 100%;
  height: auto;
2

due to lack of content files to test rendering anything else but the Homepage

I changed the background color in CSS and the background changes

Sometimes I had to refresh the browser and turn on/off the browser caching

That behaviour is reported multiple times, here but not yet has a 100% reproducible case

If your problem is within pages deeper in the tree you will have to provide more sources.

Don’t copy passte the code. A stripped down repo to replay is much easier to handle.

Btw your config setting may produce race conditions because a section will create an index.html, too

Use --printPathWarnings to detect

[outputs]
  section = ["HTML", "CustomRedirect"]

[outputFormats]
  [outputFormats.CustomRedirect]
    mediaType = "text/html"
    baseName = "index"
3

Thank you. I’d never used github before; this is a much cleaner way.

Here’s the repo with content

4

Does the problem exist for all pages?
If not which page to check?

5

All pages
The entire thing.

My main way of checking was with the NectoMono fonts. They weren’t showing in the diary pages, for example.

6

Thank you, comrade.
Really appreciate the help

After I did

hugo --printPathWarnings

it gave me the conflicts

WARN Duplicate target paths: /diary/index.html (2), /movies/index.html (2), /study/index.html (2)

so I did this in my config.toml

[outputFormats]
  [outputFormats.CustomRedirect]
    mediaType = "text/html"
    baseName = "custom-redirect"  # Ensure this is different from "index"
    isPlainText = false
    isHTML = true
    permalinkable = false

[asset]
  minify = true

changed baseName to custom-redirect instead of what it was before, which was index, and that fixed it.

I can see the css being loaded in inspect element now too.

Praise God.

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.