"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

Kutaisi

Have you tried setting your baseurl in config.toml to your website address (ending in a trailing slash)? I haven't seen that leading to "Page Not Found" but I have seen folks talking about it causing other problems – Provincialism

Yes I have. In fact that's the way it was. I only tried to change it to "/" to see if it does anything. It dodn't... – Kutaisi

And just to be certain, your website looks fine locally when you serve the site? I have a found a few things that may be relevant but are over my head; a big difference I can see in your website is the use of submodules, which could then be related to netlify and redirecting (also discussed here. – Provincialism

RIght, it looks great locally! And I switched to submodules yesterday and today in attempts to troubleshoot stuff (I thought that perhaps submoduling the theme would do it). The problem started before I switched to submodules. It started when I tried to stop building the site locally (another question that I posted and you answered) #50750947 – Kutaisi

Well, shoot, I'm out of ideas. The whole "redirecting" thread made me think it could have something to do with index.html, but as far as I can tell I'm using the same one for my [academic-themed website])github.com/aosmith16/academic). Hope you figure things out! – Provincialism

Haha, thank you anyway! I did what you did and checked others' people github repos (whoever runs their site on the Academic theme) - could find anything different! – Kutaisi

Two questions: 1) Did you actually add your custom domain to Netlify? netlify.com/docs/custom-domains/#assigning-a-custom-domain 2) What is the Netlify subdomain of your website? – Izolaiztaccihuatl

@YihuiXie, yes I did, long time ago when I first deployed the site (was building it locally back then, as I didn't know any better). Everything was wprking. I haven't changed those settings since. This is from Netlify settings. Default subdomain - taraskaduk.netlify.com; Primary domain - taraskaduk.com – Kutaisi

@YihuiXie my problem may be similar to this: github.com/developit/preact-boilerplate/issues/101 Is there any need to mess with redirects, or is this something blogdown handles in the background? – Kutaisi

I don't think your issue is relevant to redirects, since you don't have static/_redirects. I don't think it is relevant to blogdown, either, since it works fine locally. I'm out of ideas like @aosmith. You may reach out to Netlify support and see if they have any ideas. – Izolaiztaccihuatl

Actually you can change the command hugo to hugo -v on Netlify, which may reveal more information. – Izolaiztaccihuatl

@YihuiXie, it did reveal a bunch of info! I am getting a bunch of long WARN messages all of which start with Unable to locate layout for ... My understanding is that there is a problem with the theme, or rather the way I have it set up? – Kutaisi

Let us continue this discussion in chat. – Kutaisi

@YihuiXie I got to fix the issue (see solution posted below). But I'm not sure why it didn't work, and why what I did fixed it... – Kutaisi

blog.almightytricks.com/2020/10/14/… A nice article for resolving 404 error – Nipper

Another cause of this problem was that the netlify.toml wasn't in the root directory on my side. I hope this helps. – Northeast

Answer 1

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.

Geaghan

Thanks @fool! This is a comprehensive response. But I didn't manage to debug it on my own, starting fresh and going step by step. Postin my solution here separately. – Kutaisi

My error was creating a index.php file instead of a index.html file. I didn't know netlify only serves static content. – Pestilent

Answer 2

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.

Titleholder

I need kinda this info but could you please provide a sample screenshot? – Billybillycock

It really saved my time thanks! But there is some other problem with Oauth redirects – Billybillycock

This did not solve for me. – Derrick

This worked for me. Funny, I first tried using ChatGPT to resolve it and it kept giving me the wrong answer. I knew Netlify had to know where to redirect me and I kept asking CGPT "BUT HOW WILL NETLIFY KNOW WHERE TO REDIRECT" and it kept saying it should be able to handle it automatically XD – Boonie

Answer 3

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?

Kutaisi

Glad you figured it out! This looks like this issue. I think the explanation is the very last comment. – Provincialism

@Provincialism You pointed to the exactly correct reason. The TOML syntax has surprised several people. I have complained about it in the footnote 23 in Section 2.2 of the blogdown book: bookdown.org/yihui/blogdown/configuration.html – Izolaiztaccihuatl

Answer 4

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/

Olaolaf

Answer 5

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.

Coelho

thanks, this works for me when deploying flutter web – Royal

Answer 6

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.

Braddock

Answer 7

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

Upside

Answer 8

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".

Blaineblainey

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" />

Footprint

oddly enough this was the answer. surprised i'm the first upvote after 4 months – Publicness

Answer 10

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.

Cantlon

Answer 11

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

Ossian

This worked for me more than the _redirects file in the build folder :) Thanks Yusuf – Clockmaker

With command = "CI='' npm run build" works! – Upside

Answer 12

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

Yttrium

Answer 13

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.

Hathor

Answer 14

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

Supervene

Answer 15

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.

Skiplane

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Flivver

Answer 16

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.

Beagle

Answer 17

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.

Bilberry

Answer 18

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.

Missy

Could you clarify the last line of your answer? – Dissyllable

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Flivver

Answer 19

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.

Netti

Answer 20

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

Dionnedionysia