# CSS styling and Js scripts are not working after deploy

**URL:** <https://discourse.gohugo.io/t/css-styling-and-js-scripts-are-not-working-after-deploy/52652>\
**Category:** support\
**Created:** [December 4, 2024, 7:24pm UTC](https://discourse.gohugo.io/t/css-styling-and-js-scripts-are-not-working-after-deploy/52652 "2024-12-04T19:24:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![spacedrone808](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/spacedrone808/32/14971_2.png) [@spacedrone808](https://discourse.gohugo.io/u/spacedrone808)\
**Post date:** [December 4, 2024, 7:24pm UTC](https://discourse.gohugo.io/t/css-styling-and-js-scripts-are-not-working-after-deploy/52652/1 "2024-12-04T19:24:48Z")

</div>

I suspect that this is something with relative or absolute paths here…

[Repo](https://github.com/spacedrone404/hugo-hacker-testbed-template/)  
[Website](https://spacedrone404.github.io/hugo-hacker-testbed-template/)

config.toml

```auto
#LAST MODIFICATION DATE: 2024/12/04

languageCode = "en"
title = "Hugo Hacker Theme"
theme = "mainroad"
paginate = 14
BaseURL = "https://spacedrone404.github.io/hugo-hacker-testbed-template"
DefaultContentLanguage = "en"
disableHugoGeneratorInject = true

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true # Enable html code inside markdown files

[module]
  [module.hugoVersion]
    extended = true
    min = "0.121.0"

```

hugo.yaml

```auto
# Sample workflow for building and deploying a Hugo site to GitHub Pages
name: Deploy Hugo site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches:
      - main

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

# Default to bash
defaults:
  run:
    shell: bash

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.121.2
      extended: true
    steps:
      - name: Install Hugo CLI
        run: |
          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
          && sudo dpkg -i ${{ runner.temp }}/hugo.deb          
      - name: Install Dart Sass
        run: sudo snap install dart-sass
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: recursive
          fetch-depth: 0
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v5
      - name: Install Node.js dependencies
        run: "[[-f package-lock.json || -f npm-shrinkwrap.json]] && npm ci || true"
      - name: Build with Hugo
        env:
          HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache
          HUGO_ENVIRONMENT: production
          TZ: America/Los_Angeles
        run: |
          hugo \
            --gc \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"          
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

```

Local Hugo server and VSCode live server are showing site like it should to look.  
Guys, any tips on what i am doing wrong?

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [December 4, 2024, 7:49pm UTC](https://discourse.gohugo.io/t/css-styling-and-js-scripts-are-not-working-after-deploy/52652/2 "2024-12-04T19:49:16Z")

</div>

In these files:

```plaintext
themes/mainroad/layouts/_default/list.html
themes/mainroad/layouts/_default/single.html
themes/mainroad/layouts/index.html

```

Replace this:

```plaintext
<script type="module" src="/js/lazy-load.js"></script>

```

With this:

```plaintext
<script type="module" src="{{ `js/lazy-load.js` | relLangURL }}"></script>

```

Use the `relLangURL` function in a similar way to address the other 404 errors in the console of your browser’s dev tools:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/9/5/95df3a7daf8d5d15f6999d21c109740f2187d95f.png)

Other notes:

1. In the future, don’t modify a third-party theme. Instead, override the files as needed by copying the desired file to the same path relative to the layouts directory in the root of your project.

2. Don’t put the public directory under source control. I recommend:

3. Fix all of the URLs in your content files. The `src` attributes for your HTML `img` elements ignore the fact that you are serving your site from a subdirectory.

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [December 4, 2024, 7:57pm UTC](https://discourse.gohugo.io/t/css-styling-and-js-scripts-are-not-working-after-deploy/52652/3 "2024-12-04T19:57:45Z")

</div>

What makes you think that your CSS doesn’t get loaded?

The only errors my browser complains about are misconfigured fonts:

 ![Bildschirmfoto 2024-12-04 um 20.47.26](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/5/9/590e6fca7fd19a3358baa5f453c877d829dfb7dc.png)

Your CSS loads just fine:

 ![Bildschirmfoto 2024-12-04 um 20.48.59](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/2/9/298c34ed136642f00c8a0dbca9231c9cd265f169.png)

But you might want to fix the font references to use  
`../fonts/FiraSans-Regular` (i.e. _one_ directory up, then down to `fonts`)  
These references are always relative to the location of your CSS file, which is  
loaded with  
`<link rel="stylesheet" href="/hugo-hacker-testbed-template/css/style.css">`

The _only_ JS file that doesn’t get loaded is `js/lazy-load.js`, and I doubt that you even _need_ that. Why not set the `lazy` attributes on your images instead? The JS code fiddles around with class names that are never used in your `style.css`, so the whole thing is not doing anything at all anyway.

And that’s not the only thing that doesn’t do anything: You’re somehow configuring/installing `dartsass`, but there’s no SASS file in your repo. You have jquery in your repo (why?) but don’t load it.

---

<div class="post-metadata">

**Author:** ![spacedrone808](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/spacedrone808/32/14971_2.png) [@spacedrone808](https://discourse.gohugo.io/u/spacedrone808)\
**Post date:** [December 5, 2024, 6:57pm UTC](https://discourse.gohugo.io/t/css-styling-and-js-scripts-are-not-working-after-deploy/52652/4 "2024-12-05T18:57:54Z")

</div>

@jmooring & @chrillek this was a good lesson for sure!

Thank you for your experience sharing.

@chrillek I am lazy loading not just images but the whole blocks.  
You can see it in [fixed site](https://spacedrone404.github.io/hugo-hacker-testbed-template/)

As for fonts, path was not correct, i’ve fixed it.  
I think that Jquery is used in photo-gallery and i already have another question regarding it:)

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [December 5, 2024, 7:27pm UTC](https://discourse.gohugo.io/t/css-styling-and-js-scripts-are-not-working-after-deploy/52652/5 "2024-12-05T19:27:54Z")

</div>

I suggest you take a look at the results of Lighthouse in Chrome.

 ![Bildschirmfoto 2024-12-05 um 20.05.21](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/6/9/69f160c7bdcae2d2fbfb7d69ae8d5c41f1cdbc30.jpeg)

That image shows Lighthouse for desktop. It fails utterly with Mobile.

> [@spacedrone808](#):
>
> I am lazy loading not just images but the whole blocks.

You’re over-engineering it. For example,

```html
<div class="container header__container lazy loaded">…</div>

```

is one of these lazy loaded blocks. In your JS code, you then do that

```javascript
let img = entry.target;
img.src = img.dataset.src;

```

where `entry.target` is that `div`. And then you set a `src` attribute on that `div`, which is non-sensical, because a `div` doesn’t have that attribute. But neither does _this_ `div` have a `data-src` attribute, from which you could _set_ this `img.src` value.

I guess you grabbed this “lazy loading block” stuff somewhere (or was it ChatGPT?). It runs on over 60 DOM elements, of which only very few have a `src` attribute to set. And there’s `load="lazy"` anyway for these cases.

> **[Carga diferida de imágenes a nivel del navegador para la Web  | ...](https://web.dev/articles/browser-level-image-lazy-loading?hl=es-419)**
>
> En esta publicación, se explica el atributo de carga y cómo se puede usar para controlar la carga de imágenes.

And interestingly, all your images get loaded with the rest of the HTML anyway (take a look at your browser developer tool’s network tab). Not astonishing, given that no single `img` has class `lazy`.

Using properly scaled (responsive!) WebP images would probably result in more performance gains.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [December 7, 2024, 7:28pm UTC](https://discourse.gohugo.io/t/css-styling-and-js-scripts-are-not-working-after-deploy/52652/6 "2024-12-07T19:28:22Z")

</div>

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