Upon deploy site is blank

Hi, this is my first site being published through netlify. It appears that although it should be deploying my public folder which houses my index file, nothing is being show. When I host my site locally everything shows up fine. The logs even show warnings that I received while locally hosting. Looked at a few other similar issues on here but none seem to match up to my problem. Any help greatly appreciated.

Site Name: https://markjportfolio.netlify.app/

Build Settings : Base directory
Not set

Build command
CI=false react-scripts build

Publish directory
public

Build status

Active

Deploy Logs: 12:00:50 PM: build-image version: 4c0c1cadee6a31c9bb8d824514030009c4c05c6a (focal)
12:00:50 PM: build-image tag: v4.15.0
12:00:50 PM: buildbot version: 8e21f3a6f94b4bf664f0a5ce69b751fdfc9791bd
12:00:51 PM: Building without cache
12:00:51 PM: Starting to prepare the repo for build
12:00:51 PM: No cached dependencies found. Cloning fresh repo
12:00:51 PM: git clone https://github.com/MJStone587/portfolio-repo
12:00:57 PM: Preparing Git Reference refs/heads/main
12:00:59 PM: Parsing package.json dependencies
12:01:00 PM: Section completed: initializing
12:01:00 PM: Starting build script
12:01:00 PM: Installing dependencies
12:01:00 PM: Python version set to 2.7
12:01:00 PM: v16.18.1 is already installed.
12:01:01 PM: Now using node v16.18.1 (npm v8.19.2)
12:01:01 PM: Enabling node corepack
12:01:01 PM: Started restoring cached build plugins
12:01:01 PM: Finished restoring cached build plugins
12:01:01 PM: Attempting ruby version 2.7.2, read from environment
12:01:01 PM: Using ruby version 2.7.2
12:01:02 PM: Using PHP version 8.0
12:01:02 PM: No npm workspaces detected
12:01:02 PM: Started restoring cached node modules
12:01:03 PM: Finished restoring cached node modules
12:01:03 PM: Installing NPM modules using NPM version 8.19.2
12:01:07 PM: npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: Array.prototype.sort() - JavaScript | MDN
12:01:09 PM: npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
12:01:14 PM: added 1484 packages, and audited 1485 packages in 11s
12:01:14 PM: 213 packages are looking for funding
12:01:14 PM: run npm fund for details
12:01:14 PM: 9 vulnerabilities (8 high, 1 critical)
12:01:14 PM: To address issues that do not require attention, run:
12:01:14 PM: npm audit fix
12:01:14 PM: To address all issues (including breaking changes), run:
12:01:14 PM: npm audit fix --force
12:01:14 PM: Run npm audit for details.
12:01:14 PM: NPM modules installed
12:01:14 PM: Creating package sha
12:01:14 PM: Started restoring cached go cache
12:01:14 PM: Finished restoring cached go cache
12:01:15 PM: Installing Go version 1.19.3 (requested 1.19.x)
12:01:22 PM: unset GOOS;
12:01:22 PM: unset GOARCH;
12:01:22 PM: export GOROOT=β€˜/opt/buildhome/.gimme/versions/go1.19.3.linux.amd64’;
12:01:22 PM: export PATH=β€œ/opt/buildhome/.gimme/versions/go1.19.3.linux.amd64/bin:${PATH}”;
12:01:22 PM: go version >&2;
12:01:22 PM: export GIMME_ENV=β€œ/opt/buildhome/.gimme/env/go1.19.3.linux.amd64.env”
12:01:22 PM: go version go1.19.3 linux/amd64
12:01:22 PM: Detected 1 framework(s)
12:01:22 PM: β€œcreate-react-app” at version β€œ5.0.1”
12:01:22 PM: Installing missing commands
12:01:22 PM: Verify run directory
12:01:23 PM: ​
12:01:23 PM: ────────────────────────────────────────────────────────────────
12:01:23 PM: Netlify Build
12:01:23 PM: ────────────────────────────────────────────────────────────────
12:01:23 PM: ​
12:01:23 PM: ❯ Version
12:01:23 PM: @netlify/build 28.4.0
12:01:23 PM: ​
12:01:23 PM: ❯ Flags
12:01:23 PM: baseRelDir: true
12:01:23 PM: buildId: 6384f75114b0af34b374e0c8
12:01:23 PM: deployId: 6384f75114b0af34b374e0ca
12:01:23 PM: ​
12:01:23 PM: ❯ Current directory
12:01:23 PM: /opt/build/repo
12:01:23 PM: ​
12:01:23 PM: ❯ Config file
12:01:23 PM: No config file was defined: using default values.
12:01:23 PM: ​
12:01:23 PM: ❯ Context
12:01:23 PM: production
12:01:23 PM: ​
12:01:23 PM: ────────────────────────────────────────────────────────────────
12:01:23 PM: 1. Build command from Netlify app
12:01:23 PM: ────────────────────────────────────────────────────────────────
12:01:23 PM: ​
12:01:23 PM: $ CI=false react-scripts build
12:01:24 PM: Creating an optimized production build…
12:01:34 PM: Compiled with warnings.
12:01:34 PM:
12:01:34 PM: [eslint]
12:01:34 PM: src/App.js
12:01:34 PM: Line 36:6: React Hook useEffect has a missing dependency: β€˜navbarControl’. Either include it or remove the dependency array react-hooks/exhaustive-deps
12:01:34 PM: Search for the keywords to learn more about each warning.
12:01:34 PM: Creating deploy upload records
12:01:34 PM: To ignore, add // eslint-disable-next-line to the line before.
12:01:34 PM: File sizes after gzip:
12:01:34 PM: 286.26 kB build/static/js/main.f5d8e095.js
12:01:34 PM: 8.37 kB build/static/css/main.af95bb67.css
12:01:34 PM: Starting post processing
12:01:34 PM: The project was built assuming it is hosted at /.
12:01:34 PM: You can control this with the homepage field in your package.json.
12:01:34 PM: The build folder is ready to be deployed.
12:01:34 PM: You may serve it with a static server:
12:01:34 PM: Post processing - HTML
12:01:34 PM: npm install -g serve
12:01:34 PM: serve -s build
12:01:34 PM: Find out more about deployment here:
12:01:34 PM: Deployment | Create React App
12:01:34 PM: Post processing - header rules
12:01:34 PM: ​
12:01:34 PM: (build.command completed in 10.5s)
12:01:35 PM: Post processing - redirect rules
12:01:34 PM: ​
12:01:34 PM: ────────────────────────────────────────────────────────────────
12:01:34 PM: 2. Deploy site
12:01:35 PM: Post processing done
12:01:34 PM: ────────────────────────────────────────────────────────────────
12:01:34 PM: ​
12:01:34 PM: Starting to deploy site from β€˜public’
12:01:35 PM: Section completed: postprocessing
12:01:34 PM: Creating deploy tree
12:01:34 PM: 0 new files to upload
12:01:34 PM: 0 new functions to upload
12:01:34 PM: Section completed: deploying
12:01:34 PM: Site deploy was successfully initiated
12:01:34 PM: ​
12:01:34 PM: (Deploy site completed in 193ms)
12:01:34 PM: ​
12:01:34 PM: ────────────────────────────────────────────────────────────────
12:01:34 PM: Netlify Build Complete
12:01:34 PM: ────────────────────────────────────────────────────────────────
12:01:34 PM: ​
12:01:34 PM: (Netlify Build completed in 10.7s)
12:01:34 PM: Caching artifacts
12:01:34 PM: Started saving node modules
12:01:34 PM: Finished saving node modules
12:01:34 PM: Started saving build plugins
12:01:34 PM: Finished saving build plugins
12:01:34 PM: Started saving pip cache
12:01:34 PM: Finished saving pip cache
12:01:34 PM: Started saving emacs cask dependencies
12:01:34 PM: Finished saving emacs cask dependencies
12:01:34 PM: Started saving maven dependencies
12:01:34 PM: Finished saving maven dependencies
12:01:34 PM: Started saving boot dependencies
12:01:34 PM: Finished saving boot dependencies
12:01:34 PM: Started saving rust rustup cache
12:01:34 PM: Finished saving rust rustup cache
12:01:34 PM: Started saving go dependencies
12:01:34 PM: Finished saving go dependencies
12:01:35 PM: Build script success
12:01:35 PM: Section completed: building
12:01:37 PM: Site is live :sparkles:
12:01:38 PM: Uploading Cache of size 202.8MB
12:01:39 PM: Section completed: cleanup
12:01:39 PM: Finished processing build request in 48.689461598s

Hello @mjstone587, thanks for the post and welcome.

Kindly create a _redirects inside the /public folder like /public/_redirects.
After the code should look like the below.

/* /index.html 200

Also check the link below for the Netlify build settings of React Framework.

After you try the suggested changes, your site should be displayed as expected.

Let me know the outcome.

Thanks.

2 Likes

Awesome, works perfectly. Thanks for your help @clarnx

2 Likes