'"Page Not Found" when trying to access a site deployed on Netlify
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
Solution 1:[1]
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.
Solution 2:[2]
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?
Solution 3:[3]
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.
Solution 4:[4]
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".
Solution 5:[5]
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/
Solution 6:[6]
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.
Solution 7:[7]
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" />
Solution 8:[8]
name your main HTML file as index.html instead of any other name.
Solution 9:[9]
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.
Solution 10:[10]
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
Solution 11:[11]
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.
Solution 12:[12]
The only two reasons I could think of why, is because:
.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).
Make sure you don't have each single file in a separate directory, I've seen this happen before, it causes issues.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow