Home
Support Forums

Page Not Found Looks like you've followed a broken link (My index.html file does not upload on Netlify when deployed)

I have read some old posts regarding this but I could not solve this issue as I am new to Netlify.

I have not put my index.html file in any folder and It is at the top of other files I believe.

[https://gauthamportfolio.netlify.app]- This is the website URL!

https://github.com/Gauthamyadav777/Gautham_Website - Git hub repo!

Build log:

5:52:53 PM: Build ready to start
5:52:55 PM: build-image version: fa439ad1ab9393b2c0d449d8d7c033927683f4b0
5:52:55 PM: build-image tag: v4.3.0
5:52:55 PM: buildbot version: bfa1ece451875e5fe124c5b0a59bb85e0abb8d50
5:52:55 PM: Fetching cached dependencies
5:52:55 PM: Starting to download cache of 149.2MB
5:52:57 PM: Finished downloading cache in 2.158482116s
5:52:57 PM: Starting to extract cache
5:53:01 PM: Finished extracting cache in 4.209522644s
5:53:01 PM: Finished fetching cache in 6.418242345s
5:53:01 PM: Starting to prepare the repo for build
5:53:02 PM: Preparing Git Reference refs/heads/master
5:53:02 PM: Parsing package.json dependencies
5:53:03 PM: Starting build script
5:53:03 PM: Installing dependencies
5:53:03 PM: Python version set to 2.7
5:53:03 PM: Started restoring cached node version
5:53:05 PM: Finished restoring cached node version
5:53:06 PM: v16.9.0 is already installed.
5:53:06 PM: Now using node v16.9.0 (npm v7.21.1)
5:53:06 PM: Started restoring cached build plugins
5:53:06 PM: Finished restoring cached build plugins
5:53:07 PM: Attempting ruby version 2.7.2, read from environment
5:53:08 PM: Using ruby version 2.7.2
5:53:08 PM: Using PHP version 8.0
5:53:08 PM: Started restoring cached node modules
5:53:08 PM: Finished restoring cached node modules
5:53:09 PM: Started restoring cached go cache
5:53:09 PM: Finished restoring cached go cache
5:53:09 PM: go version go1.16.5 linux/amd64
5:53:09 PM: go version go1.16.5 linux/amd64
5:53:09 PM: Installing missing commands
5:53:09 PM: Verify run directory
5:53:10 PM: ​
5:53:10 PM: ────────────────────────────────────────────────────────────────
5:53:10 PM:   Netlify Build                                                 
5:53:10 PM: ────────────────────────────────────────────────────────────────
5:53:10 PM: ​
5:53:10 PM: ❯ Version
5:53:10 PM:   @netlify/build 18.8.0
5:53:10 PM: ​
5:53:10 PM: ❯ Flags
5:53:10 PM:   baseRelDir: true
5:53:10 PM:   buildId: 613b0ed5ca19f90008023f85
5:53:10 PM:   deployId: 613b0ed5ca19f90008023f87
5:53:10 PM: ​
5:53:10 PM: ❯ Current directory
5:53:10 PM:   /opt/build/repo
5:53:10 PM: ​
5:53:10 PM: ❯ Config file
5:53:10 PM:   No config file was defined: using default values.
5:53:10 PM: ​
5:53:10 PM: ❯ Context
5:53:10 PM:   production
5:53:10 PM: ​
5:53:10 PM: ────────────────────────────────────────────────────────────────
5:53:10 PM:   1. Build command from Netlify app                             
5:53:10 PM: ────────────────────────────────────────────────────────────────
5:53:10 PM: ​
5:53:10 PM: $ npm run build
5:53:10 PM: > build
5:53:10 PM: > webpack --config webpack.prod.js
5:53:16 PM: assets by status 785 KiB [big]
5:53:16 PM:   asset vendor.a323db7df66b0b1182ef.bundle.js 486 KiB [emitted] [immutable] [big] (name: vendor)
5:53:16 PM:   asset main.55a2c6c5d20872b5be78.bundle.js 299 KiB [emitted] [immutable] [big] (name: main)
5:53:16 PM: asset main.330f33a5968af0b8a811.css 163 KiB [emitted] [immutable] [minimized] (name: main)
5:53:16 PM: asset resume.pdf 2.96 KiB [emitted] [from: src/assets/resume.pdf] (auxiliary name: main)
5:53:16 PM: Entrypoint vendor [big] 486 KiB = vendor.a323db7df66b0b1182ef.bundle.js
5:53:16 PM: Entrypoint main [big] 462 KiB (2.96 KiB) = main.330f33a5968af0b8a811.css 163 KiB main.55a2c6c5d20872b5be78.bundle.js 299 KiB 1 auxiliary asset
5:53:16 PM: orphan modules 300 KiB [orphan] 67 modules
5:53:16 PM: runtime modules 1.72 KiB 5 modules
5:53:16 PM: cacheable modules 503 KiB (javascript) 166 KiB (css/mini-extract)
5:53:16 PM:   javascript modules 503 KiB
5:53:16 PM:     modules by path ./src/ 210 KiB
5:53:16 PM:       ./src/vendor.js + 56 modules 208 KiB [built] [code generated]
5:53:16 PM:       ./src/index.js + 6 modules 2.54 KiB [built] [code generated]
5:53:16 PM:     modules by path ./node_modules/ 293 KiB
5:53:16 PM:       ./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]
5:53:16 PM: Creating deploy upload records
5:53:16 PM:       ./node_modules/tilt.js/src/tilt.jquery.js 11.5 KiB [built] [code generated]
5:53:16 PM:   modules by path ./src/style/ 166 KiB
5:53:16 PM:     css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style/main.scss 72 bytes [built] [code generated]
5:53:16 PM:     css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style/main.scss (1) 166 KiB [built] [code generated]
5:53:16 PM: WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
5:53:16 PM: This can impact web performance.
5:53:16 PM: Assets:
5:53:16 PM:   vendor.a323db7df66b0b1182ef.bundle.js (486 KiB)
5:53:16 PM:   main.55a2c6c5d20872b5be78.bundle.js (299 KiB)
5:53:16 PM: WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
5:53:16 PM: Entrypoints:
5:53:16 PM:   vendor (486 KiB)
5:53:16 PM:       vendor.a323db7df66b0b1182ef.bundle.js
5:53:16 PM:   main (462 KiB)
5:53:16 PM:       main.330f33a5968af0b8a811.css
5:53:16 PM:       main.55a2c6c5d20872b5be78.bundle.js
5:53:16 PM: 
5:53:16 PM: WARNING in webpack performance recommendations:
5:53:16 PM: Starting post processing
5:53:16 PM: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
5:53:16 PM: For more info visit https://webpack.js.org/guides/code-splitting/
5:53:16 PM: webpack 5.52.0 compiled with 3 warnings in 4578 ms
5:53:16 PM: ​
5:53:16 PM: (build.command completed in 5.9s)
5:53:16 PM: Post processing - HTML
5:53:16 PM: ​
5:53:16 PM: ────────────────────────────────────────────────────────────────
5:53:16 PM:   2. Deploy site                                                
5:53:16 PM: ────────────────────────────────────────────────────────────────
5:53:16 PM: ​
5:53:16 PM: Starting to deploy site from 'dist'
5:53:16 PM: Creating deploy tree 
5:53:16 PM: 0 new files to upload
5:53:16 PM: Post processing - header rules
5:53:16 PM: 0 new functions to upload
5:53:16 PM: Site deploy was successfully initiated
5:53:16 PM: ​
5:53:16 PM: (Deploy site completed in 109ms)
5:53:16 PM: Post processing - redirect rules
5:53:16 PM: ​
5:53:16 PM: ────────────────────────────────────────────────────────────────
5:53:16 PM:   Netlify Build Complete                                        
5:53:16 PM: ────────────────────────────────────────────────────────────────
5:53:16 PM: ​
5:53:16 PM: Post processing done
5:53:16 PM: (Netlify Build completed in 6.1s)
5:53:16 PM: Caching artifacts
5:53:16 PM: Started saving node modules
5:53:16 PM: Finished saving node modules
5:53:16 PM: Started saving build plugins
5:53:16 PM: Finished saving build plugins
5:53:16 PM: Started saving pip cache
5:53:17 PM: Site is live ✨
5:53:17 PM: Finished saving pip cache
5:53:17 PM: Started saving emacs cask dependencies
5:53:17 PM: Finished saving emacs cask dependencies
5:53:17 PM: Started saving maven dependencies
5:53:17 PM: Finished saving maven dependencies
5:53:17 PM: Started saving boot dependencies
5:53:17 PM: Finished saving boot dependencies
5:53:17 PM: Started saving rust rustup cache
5:53:17 PM: Finished saving rust rustup cache
5:53:17 PM: Started saving go dependencies
5:53:17 PM: Finished saving go dependencies
5:53:17 PM: Build script success
5:53:38 PM: Finished processing build request in 43.516269203s

Thank you!

Hi @Gauthamyadav777

Did you read through [Support Guide] I’ve deployed my site but I still see "Page not found”?

Have you tried downloading your deploy to see what files are there?

Hi,
Thank you for a quick reply.
Yes, I have read the Support Guide post. But I am unable to solve the issue even after putting the index.file in the public

While not overly familiar with webpack, the guide on Output Management seems like it might provide some useful information as you are using HtmlWebpackPlugin.

Yep, I have followed every step from the guide. Still get the same error.

I cannot provide an answer.

What I can say is that even when I build locally and copy index.html into the dist directory, the page isn’t rendered correctly as CSS, JS are not included, and the favicon (as specified in webpack.prod.js) points to src/assets/favicon.png which is not in dist.

From what I read webpack generally builds the index.html file so it can include the JS and CSS bundles which, given you are using hashes, you cannot ever know the names of prior to webpack building them, so cannot include them.

I have changed a few things on the code and pushed it on git hub. Do you mind re-checking it locally pls?

You have the HtmlWebpackPlugin in the wrong place in webpack.prod.js.

You have it in optimization instead of under plugins.

I.E. This is what your config reads

  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin(),
      new HtmlWebpackPlugin({
        template: "./src/index.html",
        favicon: "./src/assets/favicon.png",
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true,
        },
      }),
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CssMinimizerPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
    }),
  ],

And this is what you need

  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin(),
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CssMinimizerPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
    }),
      new HtmlWebpackPlugin({
        template: "./src/index.html",
        favicon: "./src/assets/favicon.png",
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true,
        },
      }),
  ],
1 Like

Amazing, the website works now. Thank you so much!

1 Like