"Page Not Found" when trying to access a site deployed on Netlify

Question

I'm running a static blogdown site and deploy it on Netlify. I source files on GitHub, Hugo builds the site, and Netlify deploys it.

Netlify reports that the site is live (deploy log enclosed at the bottom), but when I'm trying to view my site, all I see is a Netlify error message:

Page Not found

Looks like you've followed a broken link or entered a URL that doesn't exist on this site.

← Back to our site

What could be the reason?

---

My GitHub Repo: https://github.com/taraskaduk/taraskaduk

My URL where the site should be: https://taraskaduk.com/

My deploy settings:

Repository: https://github.com/taraskaduk/taraskaduk
Build command: hugo
Publish directory: public
Production branch: master
Branch deploys: Deploy only the production branch and its deploy previews
Public deploy logs: Logs are public

Hugo version (I tried different ones)

HUGO_VERSION 0.37.1

My latest deploy log:

9:56:27 PM: Build ready to start
9:56:28 PM: Fetching cached dependencies
9:56:29 PM: Starting to download cache of 172.4MB
9:56:30 PM: Finished downloading cache in 1.74774892s
9:56:30 PM: Starting to extract cache
9:56:33 PM: Finished extracting cache in 2.59393707s
9:56:33 PM: Finished fetching cache in 4.428746301s
9:56:33 PM: Starting to prepare the repo for build
9:56:33 PM: Preparing Git Reference refs/heads/master
9:56:34 PM: Starting build script
9:56:34 PM: Installing dependencies
9:56:35 PM: Started restoring cached node version
9:56:37 PM: Finished restoring cached node version
9:56:37 PM: v8.11.2 is already installed.
9:56:38 PM: Now using node v8.11.2 (npm v5.6.0)
9:56:38 PM: Attempting ruby version 2.3.6, read from environment
9:56:39 PM: Using ruby version 2.3.6
9:56:39 PM: Using PHP version 5.6
9:56:39 PM: Installing Hugo 0.37.1
9:56:39 PM: Started restoring cached go cache
9:56:39 PM: Finished restoring cached go cache
9:56:39 PM: unset GOOS;
9:56:39 PM: unset GOARCH;
9:56:39 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.10.linux.amd64';
9:56:39 PM: export PATH="/opt/buildhome/.gimme/versions/go1.10.linux.amd64/bin:${PATH}";
9:56:39 PM: go version >&2;
9:56:39 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.10.linux.amd64.env';
9:56:39 PM: go version go1.10 linux/amd64
9:56:39 PM: Installing missing commands
9:56:40 PM: Verify run directory
9:56:40 PM: Executing user command: hugo
9:56:40 PM: Building sites …
9:56:40 PM: 
9:56:40 PM:                    | EN
9:56:40 PM: +------------------+----+
9:56:40 PM:   Pages            |  6
9:56:40 PM:   Paginator pages  |  0
9:56:40 PM:   Non-page files   | 49
9:56:40 PM:   Static files     | 39
9:56:40 PM:   Processed images |  0
9:56:40 PM:   Aliases          |  4
9:56:40 PM:   Sitemaps         |  1
9:56:40 PM:   Cleaned          |  0
9:56:40 PM: Total in 522 ms
9:56:40 PM: Caching artifacts
9:56:40 PM: Started saving pip cache
9:56:40 PM: Finished saving pip cache
9:56:40 PM: Started saving emacs cask dependencies
9:56:40 PM: Finished saving emacs cask dependencies
9:56:40 PM: Started saving maven dependencies
9:56:40 PM: Finished saving maven dependencies
9:56:40 PM: Started saving boot dependencies
9:56:40 PM: Finished saving boot dependencies
9:56:40 PM: Started saving go dependencies
9:56:40 PM: Finished saving go dependencies
9:56:40 PM: Build script success
9:56:40 PM: Starting to deploy site from 'public'
9:56:41 PM: Starting post processing
9:56:41 PM: Post processing done
9:56:41 PM: Site is live

Answer 1

Inside the root folder (same level as your package.json file), create a new file named netlify.toml, with the following content:

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

Then push your changes to make a fresh deploy.

Answer 2

If you are Using NUXT3. Ensure to generate a dist folder and remove it from .gitignore to make it visible. Then change your deployment setting of public directory to /dist and save.

Publish directory: /dist

image of netlify deployment settting

Answer 3

To solve the issue of Netlify page not found errors when refreshing a page, one solution is to create a file named "_redirects" in the public folder and write "/* /index.html 200" in that file. This will tell Netlify to redirect any requests that it doesn't recognize to your index.

html file, which should prevent the page not found error when refreshing a page.

Answer 4

for this issue "Page Not Found Looks like you've followed a broken link or entered a URL that doesn't exist on this site.

Back to our site

If this is your site, and you weren't expecting a 404 for this path, please visit Netlify's "page not found" support guide for troubleshooting tips".

---

1. first the main cause of the problem is first the file named incorrectly example : exercise1.html will not recognized in netlify..

2. It should be named as index.html

why because? web server can be configured to recognize any file you want as the default for that site. That being the case, it's still a good idea to stick with index. html or index. htm because it is immediately recognized on most servers without any additional configuration.

Answer 5

I created a file named netlify.toml in the same level that package.json or root folder with this inside and works!

///netlify.toml

[build]
  command = "CI='' npm run build"
  publish = "/build"
  base ="/"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Answer 6

In your public folder (folder which contains index.html) create a file called _redirects with no extension. Then, type the following inside it:

/* /index.html 200

Commit and push to your github React Router it handles all the routes but when you visit an endpoint endpoint, netlify must know where to redirect you to. That is what we are specifying in the _redirects file.

Answer 7

I had exactly the same problem when I deployed my react app on netlify, it fixed when I did the following:

1. in the root of your project create file and name it netlify.toml
2. past this code snippet into it and save it( make sure the indentation is like this!!

[build]
  command = "npm run build"
  publish = "/build"
  base ="/"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

push this change to your github/ or bitbucket or wherever you are hosting you code.

-if you are already connecting Netlify to your project repository, an automatic deployment process will start and you can see it on your Netlify project page

Answer 8

The only two reasons I could think of why, is because:

1. .html file is not named index, your HTML file should always be index.html, at least the main/home page only (if your project is multiple webpages).

2. Make sure you don't have each single file in a separate directory, I've seen this happen before, it causes issues.

Answer 9

create index.html in root directory and point to the index file in public folder using the following code

<meta http-equiv="Refresh" content="2; url=public/index.html" />

Answer 10

title: 'Tezster Dart',
  tagline: 'A flutter package which provides the functionalities to play around with tezos dApps',
  url: 'https://site-name.netlify.app',
  baseUrl: '/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
  organizationName: 'Tezsure', // Usually your GitHub org/user name.
  projectName: 'Tezster_dart', // Usually your repo name.

If you have not updated url in docs/docusaurus.config.js that could be issue. Fix it by add url: 'https://site-name.netlify.app', and make sure it doesn't end with /. In my case it wasn't working because of / in the end.

Answer 11

In my case I had (vue3 application) to upload the whole of the build directory (dist/) instead of just the files. That worked for me

Answer 12

I made sure the 'publish directory' and the build folder are named identically. Then I pushed the changes that @Adwaith suggested above. Big thanks to @Adwaith your input was a lifesaver.

Answer 13

For Angular, I was experiencing this and I found the following to work:

touch src/_redirects

This file will contain the rule below. It indicates that all requests to the server should be redirected to index.html. We also add a HTTP status code option at the end to indicate that these redirects should return a 200 status. By default, a 301 status is returned.

/*  /index.html 200

The last thing we have to do is add the below option in our angular.json und er projects > {your_project_name} > architect > options > assets. Include it in the assets array:

{
  "glob": "_redirects",
  "input": "src",
  "output": "/"
}

From https://www.smashingmagazine.com/2020/10/angular-feedback-netlify-forms-edge/

Answer 14

If you see "Not Found" error while directly browsing to a specific path, For eg: https://yourdomain.com/something , this might be helpfull (ReactJS):

In your public folder (folder which contains index.html) create a file called _redirects with no extension. Then, type the following inside it:

/* /index.html 200

Now save, commit, push and publish. :)

Reason for "Not Found" is because, when using router eg: React Router it handles all the routes but when you directly goto an endpoint, netlify must know where to redirect you. That is what we are specifying in the _redirects file.

Answer 15

name your main HTML file as index.html instead of any other name.

Answer 16

Faced this problem. My solution was to set the correct build path to publish declaration inside the netlify.toml file. The new netlify automated deployment process uses this file to deploy projects from repositories.

Answer 17

Angular 8 and now Angular 9 publish in dist/{project name}, that is the foldername to type, not just dist like in previous releases. If you specify only dist it will look for index.html in the wrong directory and the result will be a "Page not Found".

Answer 18

If you are using Angular 8 you need to supply the publish directory value by reading from the angular.json build outputPath which is dist/{project-name} and if you are using older versions, it should be dist which is the value of outDir that you can read from .angular-cli.json.

Answer 19

Looks like I got it fixed. I created a new repo with a sample site, and started replacing parts of the example site with my parts to see when it breaks.

So this part of config.toml had to be excluded in order to have the site deploy normally again:

[permalinks]
    post = "/:year/:month/:day/:slug/" 

I'm not sure why - it's always been there, and it worked when I built my site locally, but didn't want to work once I added public folder to .gitignore and let hugo build my site.

Any ideas why is that?

Answer 20

Disclaimer: I work on the Support team @ Netlify

It's always allowed to reach out to Netlify support about things like these, though we can only really help you debug what's different about our build process than your local, rather than debugging your source code. Let me expand on some best practices that the commenters brought up, and provide some suggestions to help you debug further that are non-obvious.

First off, as suggested (thanks @aosmith!) BaseURL should be set to / - that is a best practice and will allow your site to work locally (http://localhost) but also on Netlify - via http, https, deploy previews, and finally on other hosting providers, while proxy'd to, etc etc. Just Do It :)

Second, you could have redirects not just in a _redirects file but also netlify.toml, but I also don't think that is the problem here.

When you get a 404 at your main URL, it means that you don't have a /index.html . What the root cause of that is, I can't tell (though I can tell that hugo doesn't love it when your theme is missing and may fail to produce the content you're expecting). There are two good ways to figure out why our build isn't producing an index.html in your publish folder (public, in your case and default hugo config) though:

1. You can download a copy of any successful deploy from the deploy logs page as shown in my screenshot, and see "what we ended up with". Typical problems here are that we have nothing (your build didn't go to public/ or that you end up without an index.html - so we correctly show a 404 without a path)

2. You can follow the debug instructions to run our build image locally: https://github.com/netlify/build-image#testing-locally . After the build, you're still in the build shell and can go look at what's in your publish directory.