Loading
Home
Support Forums
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
asked Jun 8, 2018 at 2:00
15
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.
answered Sep 4, 2020 at 9:06
AdwaithAdwaith
1,0491 gold badge9 silver badges6 bronze badges
3
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:
-
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)
-
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.
answered Jun 8, 2018 at 19:34
foolfool
3,02420 silver badges28 bronze badges
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?
answered Jun 8, 2018 at 20:46
TaraasTaraas
1,2581 gold badge11 silver badges20 bronze badges
2
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.
answered Oct 18, 2019 at 14:34
DejazmachDejazmach
7428 silver badges15 bronze badges
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/
answered Nov 15, 2020 at 0:46
MichaelMichael
5818 silver badges24 bronze badges
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».
answered Feb 22, 2020 at 20:20
NicolaNicola
911 silver badge7 bronze badges
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.
answered Sep 5, 2022 at 10:39
devELIOperdevELIOper
6155 silver badges7 bronze badges
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
answered Sep 29, 2022 at 0:58
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.
answered Oct 30, 2019 at 22:38
bir_hambir_ham
5135 silver badges19 bronze badges
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" />
answered Nov 9, 2021 at 15:49
1
I had exactly the same problem when I deployed my react app on netlify, it fixed when I did the following:
- in the root of your project create file and name it
netlify.toml - 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
answered Jun 28, 2022 at 19:26
YusufYusuf
2,0357 gold badges14 silver badges32 bronze badges
2
name your main HTML file as index.html instead of any other name.
answered Jun 28, 2020 at 19:47
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.
answered Jan 26, 2021 at 13:16
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
answered Sep 19, 2021 at 11:38
Venkatesh AVenkatesh A
1,6601 gold badge19 silver badges23 bronze badges
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.
answered Sep 20, 2021 at 4:21
1
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.
answered May 12, 2022 at 23:40
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».
-
first the main cause of the problem is first the file named incorrectly
example :
exercise1.html will not recognized in netlify.. -
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.
answered Mar 10 at 5:44
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.
answered Apr 16 at 21:51
2
Inside the root folder (same level as you 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.
answered May 14 at 23:27
omzeromzer
1,09011 silver badges14 bronze badges
Have you ever experienced a “PAGE NOT FOUND” error when trying to access or refresh an application that uses React Router? Don’t worry, you’re not alone.
In this article, you will learn how to deploy a React application that uses react-router without any problems.
The Problem with Deploying react-router Apps
To make sure your users are happy, you’ll typically prioritize user experience when building an application. Good user experience ensures that your website or application is easy to understand, easy to use, and easy to navigate.
If you have published a React app to Netlify that uses React router before now, you will likely notice that while navigating through your routes, you get an error (page not found) when you refresh your browser. This creates a bad user experience.
Through this article, you will learn how to deploy a React app through the Netlify CLI and how to resolve the problem with deploying a react-router app.
What is Netlify?
According to their docs, «Netlify is an all-in-one platform for automating modern web projects.»
Netlify helps web developers build and deploy their applications instantly. This handy tool replaces your hosting infrastructure and helps facilitate your continuous integration and deployment pipeline with one workflow. It can really help increase your productivity.
The Netlify CLI (Command Line Interface) helps you easily build, test, and deploy applications straight from your command line.
It lets you:
- start a project in seconds
- configure continuous deployment
- run a local development server that you can share with other developers
- deploy your projects globally
You can sign up for a Netlify account with your email or your Git account.
If you don’t have a Git account, you can create a GitHub, GitLab, or bitbucket account in no time.
So, let’s see how you can deploy your react-router app using the Netlify CLI.
How to Deploy Your App Through the Netlify CLI
To start using Netlify’s CLI, you must have Node.js installed on your computer. You can visit here to install Node.js.
Then you can get started by installing the Netlify CLI using this command:
npm install netlify-cli -gNow that you have installed Netlify’s CLI, you can deploy your application to Netlify. Before that, you might want to get your build folder (I’ll explain why below).
To get your build folder, type the following command:
yarn run build
//or
npm run buildIf you have not logged in to your Netlify account before now, you might see a pop-up window asking for permission to access Netlify.
After getting access to the Netlify CLI, you will get a prompt asking what you would like to do. Select the option to create and configure a new site. You can use your arrow keys to navigate between options.
You will get prompts to select a team and a site name for your app. You can either input your preferred name for your app or use the default name which you can change later.
You will get a prompt asking which directory to publish. Input build as your deploy folder and press enter to get your React app deployed. The build folder which was generated at the beginning 0f this tutorial will serve as the deploy path.
If you get a final response that states “If everything looks good on your draft URL, deploy it to your main site URL with the —prod flag”, you are on the right track. You will be provided with the website draft URL to preview your app.
You can deploy to the main site by running the following command:
netlify deploy --prodAwesome. You now have your website URL.
To avoid the page-not-found error whenever you are either trying to access your app or you’re on other routes, you have to set up a redirect and rewrite rules for your react-router application.
The redirect rule will help your application avoid a 404 error. All requests will get redirected to the /index.html instead of giving a 404 error.
To configure your redirect rules, you have to create a file that does not have an extension named (_redirects) inside your public folder.
Include the following command in the _redirects file:
/* /index.html 200To view the changes in your app, you’ll have to deploy it again with the following command:
netlify deployConclusion
This article has explained how to deploy a react-router app using Netlify’s CLI and fix the page-not-found error while accessing your routes.
I hope you have found this article useful.
Keep building, and keep deploying!
Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started
Since you are reading this, you surely might have came across the same error as shown in the cover image.
I’m not sure if other static site servers/platforms are all like that, but if you deploy SPA to Netlify you can only navigate from index.html to other pages using Links.Once you refresh or type a URL directly in the address bar you’ll get 404.
Why does this error occur?
If your SPA is build with React then React Router handles routing on the client side (browser) when you visit internal page (e.g. http://localhost:3000/about) but once you host your SPA on Netlify (server-side) the routing logic has to be modified because Netlify does not know how to handle the route.
How to fix the issue?
As per the doc, you need to create a file named _redirects in the root folder.You can go to the link mentioned above to know more about it.I’ll directly show how to fix it:
- Create a file named _redirects without any extension inside public folder.
- Copy paste the below content in the file
/* /index.html 200
Enter fullscreen mode
Exit fullscreen mode
- Push your code and redeploy
Cheers 🥂 you fixed the broken link!
“Page Not Found” error on Netlify while using React Router causing trouble? We have a solution.
At Bobcares, we offer solutions for every query, big and small, as a part of our Server Management Service.
Let’s take a look at how our Support Team recently helped out a customer with the “Page Not Found” error on Netlify.
All about the “Page Not Found” error on Netlify while using React Router
Deploying SPAs are very easy with Netlify. Single-page applications or SPAs are extremely useful as they perform page routing on the client-side. In other words, SPAs perform page routing via the browser. Ultimately, this means that there is no extra wait time or page reloads, creating a better experience for the user.
However, we have to explicitly tell Netlify how to handle React Router routes in order for it to function seamlessly. For instance, suppose the following React code is a part of our App.js file:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Home = () => <h1>Home!</h1>;
const About = () => <h1>About!</h1>;
const App = () => (
<Router>
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</div>
</Router>
);
ReactDOM.render(<App >, document.querySelector("#root"));
ReactDOM.render(, document.querySelector("#root"));
In this particular routing problem, we have two pages on the site: / as well as /about.
We will be able to access somedomain.netlify.app by deploying Netlify as it accesses it via the / route.
Furthermore, we can also navigate via the <nav> element to
somedomain.netlify.app/about
However, when we enter somedomain.netlify.app/about directly in the browser’s URL bar, we will wind up with the infamous Page Not Found error as seen below:
Page Not Found Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
How to resolve the “Page Not Found” error on Netlify while using React Router
According to our Support Engineers, we can resolve the issue easily by adding _redirects file to the root folder. In other words, all we have to do is create a file called _redirects in the /public folder with the following code:
/* index.html 200
As a result, we will reroute everything back to the index.html where the routing takes place on the client-side.
[Looking for a solution to another query? We are just a click away.]
Conclusion
In short, the skilled Support Engineers at Bobcares demonstrated how to resolve “Page Not Found” error on Netlify.
PREVENT YOUR SERVER FROM CRASHING!
Never again lose customers to poor server speed! Let us help you.
Our server experts will monitor & maintain your server 24/7 so that it remains lightning fast and secure.
GET STARTED