Home Page Displays Different CSS

  • This behavior is not present when I am on localhost

When I visit my deployed netlify site, the home page has an old layout and styling. I click through to a different page, and then back to the home page and it has the current styling.

https://giphy.com/gifs/YMYrkXDJRezPHowkrL

hi @krichdev - sounds like something isn’t getting updated correctly, which can happen for various reasons. Can you provide your netlify url please so we can have a look?

can you tell us your netlify name/url please?

awesome-ramanujan-f8932e

when you check your deploy/build logs, are you seeing any errors? just verifying that the live version is actually the most up to date one.

No errors - here is the latest build log that says published

`12:12:10 AM: Build ready to start
12:12:16 AM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
12:12:16 AM: build-image tag: v3.3.2
12:12:16 AM: buildbot version: 0868ae15c7c4005fe7a69a665a5062b7f6293c2f
12:12:16 AM: Fetching cached dependencies
12:12:16 AM: Starting to download cache of 255.0KB
12:12:16 AM: Finished downloading cache in 79.785652ms
12:12:16 AM: Starting to extract cache
12:12:16 AM: Failed to fetch cache, continuing with build
12:12:16 AM: Starting to prepare the repo for build
12:12:16 AM: No cached dependencies found. Cloning fresh repo
12:12:16 AM: git clone https://github.com/krichdev/remote-pm-jobs
12:12:17 AM: Preparing Git Reference refs/heads/master
12:12:18 AM: Starting build script
12:12:18 AM: Installing dependencies
12:12:19 AM: Downloading and installing node v10.16.3...
12:12:19 AM: Downloading https://nodejs.org/dist/v10.16.3/node-v10.16.3-linux-x64.tar.xz...
12:12:20 AM: 
############################
12:12:20 AM:                                39.9%
12:12:20 AM: 
#############################################
12:12:20 AM: ########################### 100.0%
12:12:20 AM: Computing checksum with sha256sum
12:12:20 AM: Checksums matched!
12:12:22 AM: Now using node v10.16.3 (npm v6.9.0)
12:12:22 AM: Attempting ruby version 2.6.2, read from environment
12:12:24 AM: Using ruby version 2.6.2
12:12:24 AM: Using PHP version 5.6
12:12:24 AM: Started restoring cached node modules
12:12:24 AM: Finished restoring cached node modules
12:12:24 AM: Started restoring cached yarn cache
12:12:24 AM: Finished restoring cached yarn cache
12:12:24 AM: Installing yarn at version 1.17.0
12:12:24 AM: Installing Yarn!
12:12:24 AM: > Downloading tarball...
12:12:24 AM: [1/2]: https://yarnpkg.com/downloads/1.17.0/yarn-v1.17.0.tar.gz --> /tmp/yarn.tar.gz.2erpb3idk
12:12:24 AM: Y
12:12:24 AM:   % Total
12:12:24 AM:  % Received % Xferd  Average Speed   Time    Time     Time  Current
12:12:24 AM:                                  Dload  Upload   Total   Spent    Left  Speed
12:12:24 AM: 
  0     0    0     0    0     0      0      0 --:--:-- --:--:--
12:12:24 AM:  --:--:--     0
12:12:24 AM: 
100    93  100    93    0     0    345      0 --:
12:12:24 AM: --:-- --:--:-- --:--:--   345
12:12:24 AM: 
  0     0    0     0    0     0
12:12:24 AM:      0      0 --:--:-- --:--:-- --:--:--     0
12:12:25 AM: 
100   609    0   609    0     0    973      0 -
12:12:25 AM: -:--:-- --:--:-- --:--:--  2806
12:12:25 AM: 
100 1213k  100 1213k    0     0  1125k      0  0:00:01  0:00
12:12:25 AM: :01 --:--:-- 1125k
12:12:25 AM: [2/2]: https://yarnpkg.com/downloads/1.17.0/yarn-v1.17.
12:12:25 AM: 0.tar.gz.asc --> /tmp/yarn.tar.gz.2erpb3idkY.asc
12:12:25 AM: 
100    97  100    97    0     0   2
12:12:25 AM: 550      0 --:--:-- --:--:-- --:--:--  2550
12:12:25 AM: 
100   613    0   613    0     0   2725      0 --:--:-- --:--:-- -
12:12:25 AM: -:--:--  2725
12:12:25 AM: 
100   832  100   832    0
12:12:25 AM: 0   3129      0 --:--:-- --:--:-- --:--:--  3129
12:12:25 AM: > Verifying integrity...
12:12:25 AM: gpg: Signature made Fri 14 Jun 2019 06:55:58 PM UTC using RSA key ID 69475BAA
12:12:25 AM: gpg: Good signature from "Yarn Packaging <yarn@dan.cx>"
12:12:25 AM: gpg: WARNING: This key is not certified with a trusted signature!
12:12:25 AM: gpg:          There is no indication that the signature belongs to the owner.
12:12:25 AM: Primary key fingerprint: 72EC F46A 56B4 AD39 C907  BBB7 1646 B01B 86E5 0310
12:12:25 AM:      Subkey fingerprint: 6D98 490C 6F1A CDDD 448E  4595 4F77 6793 6947 5BAA
12:12:25 AM: > GPG signature looks good
12:12:25 AM: > Extracting to ~/.yarn...
12:12:25 AM: > Adding to $PATH...
12:12:25 AM: > We've added the following to your /opt/buildhome/.profile
12:12:25 AM: > If this isn't the profile of your current shell then please add the following to your correct profile:
12:12:25 AM: export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"
12:12:25 AM: 
12:12:26 AM: > Successfully installed Yarn 1.17.0! Please open another terminal where the `yarn` command will now be available.
12:12:26 AM: Installing NPM modules using Yarn version 1.17.0
12:12:27 AM: yarn install v1.17.0
12:12:27 AM: [1/4] Resolving packages...
12:12:28 AM: [2/4] Fetching packages...
12:12:48 AM: info fsevents@2.0.7: The platform "linux" is incompatible with this module.
12:12:48 AM: info "fsevents@2.0.7" is an optional dependency and failed compatibility check. Excluding it from installation.
12:12:48 AM: info fsevents@1.2.9: The platform "linux" is incompatible with this module.
12:12:48 AM: info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
12:12:48 AM: [3/4] Linking dependencies...
12:12:48 AM: warning "gatsby > eslint-config-react-app@4.0.1" has incorrect peer dependency "eslint-plugin-flowtype@2.x".
12:12:48 AM: warning "gatsby > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
12:12:56 AM: [4/4] Building fresh packages...
12:13:00 AM: Done in 33.29s.
12:13:00 AM: NPM modules installed using Yarn
12:13:01 AM: Started restoring cached go cache
12:13:01 AM: Finished restoring cached go cache
12:13:01 AM: unset GOOS;
12:13:01 AM: unset GOARCH;
12:13:01 AM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
12:13:01 AM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
12:13:01 AM: go version >&2;
12:13:01 AM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
12:13:01 AM: go version go1.12 linux/amd64
12:13:01 AM: Installing missing commands
12:13:01 AM: Verify run directory
12:13:01 AM: Executing user command: gatsby build
12:13:03 AM: success open and validate gatsby-configs β€” 0.098
12:13:04 AM: success load plugins β€” 0.931
12:13:04 AM: success onPreInit β€” 0.018
12:13:04 AM: success delete html and css files from previous builds β€” 0.022
12:13:04 AM: success initialize cache β€” 0.018
12:13:04 AM: success copy gatsby files β€” 0.061
12:13:04 AM: success onPreBootstrap β€” 0.024
12:13:04 AM: success source and transform nodes β€” 0.178
12:13:04 AM: success Add explicit types β€” 0.018
12:13:05 AM: success Add inferred types β€” 0.213
12:13:05 AM: success Processing types β€” 0.166
12:13:05 AM: success building schema β€” 0.441
12:13:05 AM: success createPages β€” 0.143
12:13:05 AM: success createPagesStatefully β€” 0.100
12:13:05 AM: success onPreExtractQueries β€” 0.014
12:13:05 AM: success update schema β€” 0.032
12:13:06 AM: success extract queries from components β€” 0.480
12:13:06 AM: success write out requires β€” 0.052
12:13:06 AM: success write out redirect data β€” 0.030
12:13:06 AM: success Build manifest and related icons β€” 0.251
12:13:06 AM: success onPostBootstrap β€” 0.273
12:13:06 AM: info bootstrap finished - 5.197 s
12:13:06 AM: success run static queries β€” 0.408 β€” 3/3 8.45 queries/second
12:13:07 AM: success Generating image thumbnails β€” 6/6 - 0.693 s
12:13:24 AM: success Building production JavaScript and CSS bundles β€” 17.186
12:13:24 AM: success Rewriting compilation hashes β€” 0.063
12:13:24 AM: success run page queries β€” 0.162 β€” 11/11 82.03 queries/second
12:13:25 AM: success Building static HTML for pages β€” 1.565 β€” 11/11 42.48 pages/second
12:13:25 AM: info Done building in 24.723 sec
12:13:26 AM: Skipping functions preparation step: no functions directory set
12:13:26 AM: Caching artifacts
12:13:26 AM: Started saving node modules
12:13:26 AM: Finished saving node modules
12:13:26 AM: Started saving yarn cache
12:13:26 AM: Finished saving yarn cache
12:13:26 AM: Started saving pip cache
12:13:26 AM: Finished saving pip cache
12:13:26 AM: Started saving emacs cask dependencies
12:13:26 AM: Finished saving emacs cask dependencies
12:13:26 AM: Started saving maven dependencies
12:13:26 AM: Finished saving maven dependencies
12:13:26 AM: Started saving boot dependencies
12:13:26 AM: Finished saving boot dependencies
12:13:26 AM: Started saving go dependencies
12:13:26 AM: Finished saving go dependencies
12:13:28 AM: Build script success
12:13:28 AM: Starting to deploy site from 'public/'
12:13:28 AM: Creating deploy tree 
12:13:28 AM: 27 new files to upload
12:13:28 AM: 0 new functions to upload
12:13:30 AM: Starting post processing
12:13:31 AM: Post processing done
12:13:32 AM: Site is live
12:13:53 AM: Finished processing build request in 1m37.412018775s`

and we know its the latest version because the home page only displays that way when you first visit it, any time coming back to the home page after first visit the correct styling is applied

Any chance it has something to do with custom domain?

Seems unlikely that custom domain would be relevant - I can see it on your netlify sitename when I browse directly, for instance.

Could you tell me what file has your CSS in it? When I visit the page I don’t see any CSS files loading, so isolating which file has the style info in it might help us track things down…

Your comment sparked an idea.

I am using Gatsby for the static site generator and styled-components for styling, and was missing gatsby-plugin-styled-components plugin.

Added plugin and is now working :slight_smile:

2 Likes

thanks for sharing what fixed it! that is definitely helpful for other users, and i’m glad it works now!

I know @krichdev already solved this - but a little more context for others who may not know how to use the gatsby-plugin-styled.

Gatsby has a tutorial: https://www.gatsbyjs.org/docs/styled-components/

This, however, required modifying a .babelrc – which my Gatsby project didn’t have (since I was still using one that ships with Gatsby).

For that, I found this documentation useful: https://www.gatsbyjs.org/docs/babel/

Hope it helps and thanks again @krichdev! You saved me a bunch of time!

1 Like