HTML loads in pages but images and css does not load

I have a basic website I created and wanted to host it on pages. I have followed the documentation here and here. I chose to create my gitlab-ci file from scratch so I can learn. I am using jekyll.

The issue I am having is my images and css will not load. My HTML file does load.

I would like to have my images and css file load.

I have been searching around and reading documentation for the past couple days but no luck. Below is what I have in gitlab-ci config file along with a screenshot of my project file structure and directories jekyll created in the pipeline build.

image: ruby:2.7

pages:
  script:
    - mkdir .public
    - cp -r * .public
    - mv .public public
  artifacts:
    paths:
      - public
  only:
    - main

Looks Like You Have Built Your Page
Can You Help Me With This Issue?

It’s hard to know where to start here. If I were you, I would run ls -R after the mv command in the pipeline, just to make sure that all the files really are where you expect.

If that’s not it, is there some way that you can be sure that the site should be correct when this stage runs? Are you able to run it locally?

If that’s not it, my vague guess would be to look at absolute vs. relative links in your HTML.

Good luck!

1 Like

Where would the output for ls -R be? When I go to the gitlab subdomain after pipeline build and I see the HTML devtools gives a warning of “Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.” It sounds like the stylesheets and assets are not being loaded.

The site is correct and everything loads when I run it locally.

Edit: all is fixed and working. It did have to do with the linking in the HTML file. Had to do relative links. Thank you

Glad to hear you got it working!

So, I was suggesting putting the call to ls somewhere like this:

pages:
  script:
    - mkdir .public
    - cp -r * .public
    - mv .public public
    - ls -R
  artifacts:
    paths:
      - public
  only:
    - main

And then the output would show in the pipeline log (just click on Pipelines in the menu of the project page).

Oh okay got it. Thank you.