CSS not getting loaded on Netlify Deploys (Jekyll)

[kushthedude]

Hi,
We have been using netlify to deploy our various documentation repositories. But there has been an issue with netlify deploys recently.
We deployed our doc site https://github.com/layer5io/meshery/tree/master/docs using netlify, & alas no CSS is getting rendered. See here:- https://meshery-documentation.netlify.app

We are using build command:- bundle exec jekyll build --drafts and have already specified base-directory as /docs

We are using Jekyll-Docsy Theme & have deployed other Jekyll based sites too but didn’t experience any of such issues.

Any help would be highly appreciated.

[perry]

hi there, do you have a deploy log you can share?

[kushthedude]

Thanks for the reply @perry
Yes,I have the logs.
Here are they :-

8:29:18 PM: Build ready to start
8:29:20 PM: build-image version: 2dbd444fcdce00cf06325060a8238d5ae3e86774
8:29:20 PM: build-image tag: v3.3.7
8:29:20 PM: buildbot version: 134ec431c6a3ff76e87cc4dc34007fe13842272f
8:29:20 PM: Fetching cached dependencies
8:29:21 PM: Starting to download cache of 246.4MB
8:29:25 PM: Finished downloading cache in 4.973303984s
8:29:25 PM: Starting to extract cache
8:29:34 PM: Finished extracting cache in 8.724119425s
8:29:34 PM: Finished fetching cache in 13.771959377s
8:29:34 PM: Starting to prepare the repo for build
8:29:35 PM: Preparing Git Reference refs/heads/master
8:29:35 PM: Starting build script
8:29:35 PM: Installing dependencies
8:29:36 PM: Started restoring cached node version
8:29:42 PM: Finished restoring cached node version
8:29:42 PM: v10.20.1 is already installed.
8:29:43 PM: Now using node v10.20.1 (npm v6.14.4)
8:29:43 PM: Unknown ruby interpreter version (do not know how to handle): RUBY_VERSION.
8:29:43 PM: Attempting ruby version 2.6.2, read from environment
8:29:44 PM: Using ruby version 2.6.2
8:29:45 PM: Using PHP version 5.6
8:29:45 PM: Started restoring cached ruby gems
8:29:45 PM: Finished restoring cached ruby gems
8:29:45 PM: Installing gem bundle
8:29:45 PM: [DEPRECATED] The `--path` flag is deprecated because it relies on being remembered across bundler invocations, which bundler will no longer do in future versions. Instead please use `bundle config set path '/opt/build/cache/bundle'`, and stop using this flag
8:29:45 PM: [DEPRECATED] The --binstubs option will be removed in favor of `bundle binstubs`
8:29:47 PM: Fetching gem metadata from https://rubygems.org/
8:29:47 PM: .
8:29:47 PM: .
8:29:47 PM: .
8:29:48 PM: .
8:29:48 PM: .
8:29:48 PM: .
8:29:48 PM: .
8:29:48 PM: .
8:29:48 PM: .
8:29:48 PM: .
8:29:48 PM: .
8:29:49 PM: Fetching gem metadata from https://rubygems.org/
8:29:49 PM: .
8:29:49 PM: Resolving dependencies...
8:29:50 PM: Using concurrent-ruby 1.1.6
8:29:50 PM: Using i18n 0.9.5
8:29:50 PM: Using minitest 5.14.0
8:29:50 PM: Using thread_safe 0.3.6
8:29:50 PM: Using tzinfo 1.2.7
8:29:50 PM: Using zeitwerk 2.3.0
8:29:50 PM: Using activesupport 6.0.2.2
8:29:50 PM: Using public_suffix 3.1.1
8:29:50 PM: Using addressable 2.7.0
8:29:50 PM: Using bundler 2.1.4
8:29:50 PM: Using coffee-script-source 1.11.1
8:29:50 PM: Using execjs 2.7.0
8:29:50 PM: Using coffee-script 2.4.1
8:29:50 PM: Using colorator 1.1.0
8:29:50 PM: Using ruby-enum 0.8.0
8:29:50 PM: Using commonmarker 0.17.13
8:29:50 PM: Using dnsruby 1.61.3
8:29:50 PM: Using eventmachine 1.2.7
8:29:50 PM: Using http_parser.rb 0.6.0
8:29:50 PM: Using em-websocket 0.5.1
8:29:50 PM: Using ffi 1.12.2
8:29:50 PM: Using ethon 0.12.0
8:29:50 PM: Using multipart-post 2.1.1
8:29:50 PM: Using faraday 1.0.1
8:29:50 PM: Using forwardable-extended 2.6.0
8:29:50 PM: Using gemoji 3.0.1
8:29:50 PM: Using sawyer 0.8.2
8:29:50 PM: Using octokit 4.18.0
8:29:50 PM: Using typhoeus 1.3.1
8:29:50 PM: Using github-pages-health-check 1.16.1
8:29:50 PM: Using rb-fsevent 0.10.3
8:29:50 PM: Using rb-inotify 0.10.1
8:29:50 PM: Using sass-listen 4.0.0
8:29:50 PM: Using sass 3.7.4
8:29:50 PM: Using jekyll-sass-converter 1.5.2
8:29:50 PM: Using listen 3.2.1
8:29:50 PM: Using jekyll-watch 2.2.1
8:29:50 PM: Using kramdown 1.17.0
8:29:50 PM: Using liquid 4.0.3
8:29:50 PM: Using mercenary 0.3.6
8:29:50 PM: Using pathutil 0.16.2
8:29:50 PM: Using rouge 3.13.0
8:29:50 PM: Using safe_yaml 1.0.5
8:29:50 PM: Using jekyll 3.8.5
8:29:50 PM: Using jekyll-avatar 0.7.0
8:29:50 PM: Using jekyll-coffeescript 1.1.1
8:29:50 PM: Using jekyll-commonmark 1.3.1
8:29:50 PM: Using jekyll-commonmark-ghpages 0.1.6
8:29:50 PM: Using jekyll-default-layout 0.1.4
8:29:50 PM: Using jekyll-feed 0.13.0
8:29:50 PM: Using jekyll-gist 1.5.0
8:29:50 PM: Using jekyll-github-metadata 2.13.0
8:29:50 PM: Using mini_portile2 2.4.0
8:29:50 PM: Using nokogiri 1.10.9
8:29:50 PM: Using html-pipeline 2.12.3
8:29:50 PM: Using jekyll-mentions 1.5.1
8:29:50 PM: Using jekyll-optional-front-matter 0.3.2
8:29:50 PM: Using jekyll-paginate 1.1.0
8:29:50 PM: Using jekyll-readme-index 0.3.0
8:29:50 PM: Using jekyll-redirect-from 0.15.0
8:29:50 PM: Using jekyll-relative-links 0.6.1
8:29:50 PM: Using rubyzip 2.3.0
8:29:50 PM: Using jekyll-remote-theme 0.4.1
8:29:50 PM: Using jekyll-seo-tag 2.6.1
8:29:50 PM: Using jekyll-sitemap 1.4.0
8:29:50 PM: Using jekyll-swiss 1.0.0
8:29:50 PM: Using jekyll-theme-architect 0.1.1
8:29:50 PM: Using jekyll-theme-cayman 0.1.1
8:29:50 PM: Using jekyll-theme-dinky 0.1.1
8:29:50 PM: Using jekyll-theme-hacker 0.1.1
8:29:50 PM: Using jekyll-theme-leap-day 0.1.1
8:29:50 PM: Using jekyll-theme-merlot 0.1.1
8:29:50 PM: Using jekyll-theme-midnight 0.1.1
8:29:50 PM: Using jekyll-theme-minimal 0.1.1
8:29:50 PM: Using jekyll-theme-modernist 0.1.1
8:29:50 PM: Using jekyll-theme-primer 0.5.4
8:29:50 PM: Using jekyll-theme-slate 0.1.1
8:29:50 PM: Using jekyll-theme-tactile 0.1.1
8:29:50 PM: Using jekyll-theme-time-machine 0.1.1
8:29:50 PM: Using jekyll-titles-from-headings 0.5.3
8:29:50 PM: Using jemoji 0.11.1
8:29:50 PM: Using minima 2.5.1
8:29:50 PM: Using unicode-display_width 1.7.0
8:29:50 PM: Using terminal-table 1.8.0
8:29:50 PM: Using github-pages 204
8:29:50 PM: Bundle complete! 1 Gemfile dependency, 85 gems now installed.
8:29:50 PM: Bundled gems are installed into `/opt/build/cache/bundle`
8:29:50 PM: Gem bundle installed
8:29:50 PM: Started restoring cached go cache
8:29:50 PM: Finished restoring cached go cache
8:29:50 PM: unset GOOS;
8:29:50 PM: unset GOARCH;
8:29:50 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
8:29:50 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
8:29:50 PM: go version >&2;
8:29:50 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
8:29:50 PM: go version go1.12 linux/amd64
8:29:50 PM: Installing missing commands
8:29:50 PM: Verify run directory
8:29:50 PM: Executing user command: make build
8:29:50 PM: bundle exec jekyll build --drafts
8:29:51 PM: Configuration file: /opt/build/repo/docs/_config.yml
8:29:51 PM:             Source: /opt/build/repo/docs
8:29:51 PM:        Destination: /opt/build/repo/docs/_site
8:29:51 PM:  Incremental build: disabled. Enable with --incremental
8:29:51 PM:       Generating...
8:29:54 PM:                     done in 2.596 seconds.
8:29:54 PM:  Auto-regeneration: disabled. Use --watch to enable.
8:29:54 PM: Skipping functions preparation step: no functions directory set
8:29:54 PM: Caching artifacts
8:29:54 PM: Started saving ruby gems
8:29:54 PM: Finished saving ruby gems
8:29:54 PM: Started saving pip cache
8:29:54 PM: Finished saving pip cache
8:29:54 PM: Started saving emacs cask dependencies
8:29:54 PM: Finished saving emacs cask dependencies
8:29:54 PM: Started saving maven dependencies
8:29:54 PM: Finished saving maven dependencies
8:29:54 PM: Started saving boot dependencies
8:29:54 PM: Finished saving boot dependencies
8:29:54 PM: Started saving go dependencies
8:29:54 PM: Finished saving go dependencies
8:29:54 PM: Build script success
8:29:54 PM: Starting to deploy site from '/docs/_site'
8:29:54 PM: Creating deploy tree 
8:29:55 PM: Creating deploy upload records
8:29:55 PM: 2 new files to upload
8:29:55 PM: 0 new functions to upload
8:29:55 PM: Starting post processing
8:29:55 PM: Post processing done
8:29:55 PM: Site is live
8:30:34 PM: Finished processing build request in 1m13.504529844s

[perry]

well, i think your log looks OK at first glance, but when i pull up your page, I do see a lot of errors in the console:

probably what I would do is check your paths and your build settings. It might be helpful also to download your deploy and see what is actually there vs. what you think is there.

I think if you figure out how the paths will need to be adjusted this will work better.

instructions on how to download:

Can I download my website?

Hello! thanks for reading, I would like to solve this issue. So recently my computer has oxygenated, therefore i lost my computer- now I have a new one. I cant access my hard drive yet, and I have alot of projects there especially my netlify ones. I would like to download my own website which i have access to in my account, but I do not know how, it is already deployed. is there a way I can download a deployed build? i would really love to get my website back. I would be super glad if i get it…

[kushthedude]

Hi @perry,
Even I noticed these 404s earlier & I did give downloading the deploys a try.
But in the downloaded zip, all of the files were correctly placed.
The css were stored in assests/css, similar for the js assests,etc.

Here is the screenshot:-

[perry]

hey @kushthedude,

assests or assets?

not the same folder! I would check the paths in your code.

[kushthedude]

Oops sorry, that was typo made by me
Folder’s name is assets as can be viewed in the screenshot.

[perry]

hmm, i am not sure, it is definitely something to do with the build settings or the paths that are available. You should have your css files at

https://meshery-documentation.netlify.app/docs/assets/css/

and they are simply not there.

did you read through this guide:

[Common Issue]: Frequently encountered problems during builds

Overview Sites on Netlify can be built using many different tools — differing frameworks, programming languages and approaches. It can be incredibly frustrating to see your site fail to build! If you have a build on Netlify that is failing with an error message that you don’t understand, you are not alone. Here you’ll find some common build failure messages, and probable solutions to the causes. If you’re looking for more general information on build debugging, or interested in details about how…

also, do you have any redirects running on your site that might cause strange behaviour?

can you post a screenshot of your build settings, also?

[kushthedude]

@perry
Here are the build settings :

All of our other netlify deploys of jekyll are working great but this is the deploy from a sub-directory and is really causing a lot of issues.

[perry]

hi there, have you tried setting the publish dir from /docs/_site to just /_site? The publish dir sits on top of the base dir, if that makes sense.

[kushthedude]

Hi,
Netlify puts /docs as the publish directory compulsorily over my base directory.

[perry]

right, because you have listed that as your base directory, which means that it is working as expected.

if you need your publish directory to just be _site then you would have to leave base directory blank. Or, you need to change which directory you publish to in your settings, or, you need to change which files you link to in your app.

I’m not sure what combination of settings you need, but the publish dir will always go on top of the base dir.

[bangden07]

I have same problem.
My Jekyll isn’t working properly.

[gregraven]

@kushthedude The /docs/ part of the path seems to be causing this issue. If you remove /docs/ from the paths of the five assets that are not loading, they load better, although you will find you still have some issues with invalid markup, etc.

It may be worth noting that your link in your site icon thingie is to https://meshery-documentation.netlify.app/docs/, which redirects to a 404 page not found.

[kushthedude]

Actually I am having a redirect on my website which is causing the issue, I dont know how to fix it.

[gregraven]

@kushthedude What happen when you remove the redirect?