CSS not rendering in GitHub Pages

HP-Nunes · September 28, 2018, 11:19pm

I am aware this question has been addressed multiple times, and the developer console indicates that it is failing to load a CSS resource; screenshot below:
Screenshot%20from%202018-09-28%2016-10-10

I’m not sure what I need to do. I verified that my base url was properly written in the config doc, as well as the path directories, and that I’m deploying my site from the docs folder, not the Master where my hugo project is hosted.

Thus it’s most likely an issue with the CSS is not linking up properly. I’m uncertain whether it’s an issue with the UglifyCSS resource folder not being inside the docs folder, although when I run my site locally the theme is rendering as intended.

Edits:
Link to GitHub repo: https://github.com/HP-Nunes/portfolio

config.toml

baseurl = "https://hp-nunes.github.io/portfolio/"
title = "Hadrien's Digital Wall"
theme = "coder"
themesDir = "themes"
publishDir = "docs"

languagecode = "en"
defaultcontentlanguage = "en"

paginate = 20
canonifyurls = true

pygmentsstyle = "bw"
pygmentscodefences = true
pygmentscodefencesguesssyntax = true

disqusShortname = "yourdiscussshortname"

[params]
    author = "Hadrien N Picq"
    info = "Programmatic Geographer"
    description = "Hadrien Picq's portfolio website"
    keywords = "blog,Hadrien,personal,portfolio"
    avatarurl = "/images/avatard.jpg"

    favicon_32 = "/img/favicon-32x32.png"
    favicon_16 = "/img/favicon-16x16.png"

    footercontent = "Where we are is who we are"
    dateformat = "January 2, 2006"
    hidecredits = false
    hidecopyright = false

    rtl = false

    math = true
    custom_css = ["css/custom.css"]

# Social links
[[params.social]]
    name = "Github"
    icon = "fab fa-github fa-2x"
    weight = 1
    url = "https://github.com/HP-Nunes"
[[params.social]]
    name = "LinkedIn"
    icon = "fab fa-linkedin"
    weight = 2
    url = "https://www.linkedin.com/in/hadnunpi/"
[[params.social]]
    name = "Twitter"
    icon = "fab fa-twitter fa-2x"
    weight = 3
    url = "https://twitter.com/geocuriosity"

# Menu links
[[menu.main]]
    name = "Blog"
    weight = 1
    url  = "/posts/"
[[menu.main]]
    name = "About"
    weight = 2
    url = "/about/"
[[menu.main]]
    name = "Projects"
    weight = 3
    url = "/projects/"
[[menu.main]]
    name = "Contact me"
    weight = 5
    url = "/contact/"


[languages]
    [languages.en]
    languagename = "English" # The language name to be displayed in the selector.
	title = "Hadrien's Digital Wall"

        # You can configure the theme parameter for each language.
        [languages.en.params]
        author = "Hadrien N Picq"
        info = "Programmatic Geographer"
        description = "Hadrien Picq's portfolio website"
        keywords = "blog,Hadrien,personal, portfolio"

        [languages.en.menu] # It is possible to change the menu too.

        [[languages.en.menu.main]]
        name = "About"
        weight = 1
        url = "/about/"
        [[languages.en.menu.main]]
        name = "Blog"
        weight = 2
        url = "/posts/"
        [[languages.en.menu.main]]
        name = "Projects"
        weight = 3
        url = "/projects/"
        [[languages.en.menu.main]]
        name = "Contact me"
        weight = 5
        url = "/contact/"


    [languages.br]
        languagename = "Luso-Brasileiro"
        title = "Muralha Digital de Hadrien"

        [languages.br.params]
            author = "Hadrien N Picq"
            description = "Site portfólio do Hadrien Picq"
            keywords = "blog,portfólio,Hadrien,pessoal"
            info = "Geógrafo Programático"
            footercontent = "Importamo-nos apenas com o lugar onde estamos"

        [languages.br.menu]

            [[languages.br.menu.main]]
            name = "Sobre"
            weight = 1
            url = "/br/sobre/"

            [[languages.br.menu.main]]
            name = "Blog"
            weight = 2
            url = "/br/posts/"

            [[languages.br.menu.main]]
            name = "Projetos"
            weight = 3
            url = "/projects/"
            [[languages.br.menu.main]]
            name = "Contactar-me"
            weight = 5
            url = "/contact/"

   [languages.fr]
        languagename = "Français"
        title = "Mur Digital d'Hadrien"

        [languages.fr.params]
            author = "Hadrien N Picq"
            description = "Portfolio web d'Hadrien Picq"
            keywords = "blog,portfolio,Hadrien,personnel"
            info = "Géographe Programmatique"
            footercontent = "Où nous sommes est qui nous sommes"

        [languages.fr.menu]

            [[languages.fr.menu.main]]
            name = "À propos"
            weight = 1
            url = "/fr/propos/"
            [[languages.fr.menu.main]]
            name = "Blog"
            weight = 2
            url = "/fr/posts/"
            [[languages.fr.menu.main]]
            name = "Projets"
            weight = 3
            url = "/projects/"
            [[languages.fr.menu.main]]
            name = "Me Contacter"
            weight = 5
            url = "/contact/"

benmarte · September 28, 2018, 11:27pm

Are you minifying the css? if so try disabling minification also post the contents of your config.toml and the url of you repo so we can have a better idea of what is going on.

HP-Nunes · September 28, 2018, 11:34pm

My repo was linked to my post but I didn’t make it explicit; added to edits for clarity.

I don’t know if I’m minifying the css, intentionally or not. I’m not using any tools to my knowledge that would affect my css in this manner.

Edit: @funkydan2’s comment below may indicate that the CSS is being minified due to UglifyCSS.

funkydan2 · September 28, 2018, 11:35pm

I may be way off here - but I wonder if UglifyCSS is the problem.

The theme you’re using uses Hugo Pipes to compile SCSS to CSS. When it does that it minifies and creates an SHA fingerprint, to provide security so that no-one can inject anything dodgy into your CSS.

As far as I understand, UglifyCSS then goes and modifies the CSS file - so the resulting file will no longer have the same hashsum result and thus the SRI check fails.

HP-Nunes · September 28, 2018, 11:38pm

I’m suspicious about UglifyCSS being the cause as well. My site wasn’t rendering locally until I added the UglifyCSS resource folder. Since I can’t access the content of that folder on GitHub I suspect something is happening to corrupt my css, as to why that’s over my head.

benmarte · October 1, 2018, 1:20pm

Yeah, I had issues with minifying css so I removed it from my sites and everything works.

Try updating your SCSS pipes to something like this:

{{ $styles := resources.Get "sass/main.scss" | toCSS | minify | fingerprint }}

<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">

HP-Nunes · October 5, 2018, 12:17am

Thanks @benmarte. I’m a Hugo/GO noob and I’ve been looking for the past hour what you meant by “updating the SCSS pipes”. I deferred to the Hugo documentation on the matter; from what I read I think that you’re asking me to transform (one?) of the .scss files into a CSS so that it can be rendered live. However I’m lost on a few points:

Which .scss file am I updating (if that’s what you meant by updating the SCSS pipe(s) )?

Screenshot from 2018-10-04 17-10-30.png1065×728 68.8 KB
I don’t have a main.scss document; is that auto-generated by the resources.Get command?
I realized my config file had custom_css = ["css/custom.css"] defined, but again there is no css/custom.css file anywhere. Perhaps that ties in with the previous question; it’s just that I have tried looking at similar examples in other repos and I don’t find see that they’ve pushed a custom.css document.

Any pointer would be appreciated. Thanks!

benmarte · October 5, 2018, 12:54am

@HP-Nunes you need to modify your head partial if you have one and change it to what I posted.

Do you have your site in a git repo? If so post a link so we can verify. If you are using a theme then specify which one so we can take a look at it and see what its doing.

funkydan2 · October 5, 2018, 2:31am

Have you updated the theme? I noticed there’s been some updates to hugo coder in the last day or so…

benmarte · October 5, 2018, 2:47am

Remove all the minify pipes from this html file:

github.com

HP-Nunes/portfolio/blob/master/themes/coder/layouts/_default/baseof.html

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {{ with .Site.Params.author }}<meta name="author" content="{{ . }}">{{ end }}
    {{ with .Site.Params.description }}<meta name="description" content="{{ . }}">{{ end }}
    {{ with .Site.Params.keywords }}<meta name="keywords" content="{{ . }}">{{ end }}

    <base href="{{ .Site.BaseURL }}">
    <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>

    <link rel="canonical" href="{{ .Permalink }}">

    <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Merriweather:300,700|Source+Code+Pro:400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" integrity="sha256-oSrCnRYXvHG31SBifqP2PM1uje7SJUyX0nTwO2RJV54=" crossorigin="anonymous" />

This file has been truncated. show original

And report back what happens.

Topic		Replies	Views
Hugo site not rendering on github pages support	10	1231	March 23, 2023
Theme renders on localhost, but not on Github Pages site support	1	454	October 7, 2020
CSS files are not showing up after deploying site to GitHub pages support	8	4578	June 21, 2017
Styling disappears when deployed to github pages, but remains in localhost support	1	1055	February 16, 2018
Hugo styles not showing up on Github Pages, though it loads locally -- issue seems not due to baseURL support	12	460	April 14, 2024

CSS not rendering in GitHub Pages

Related topics