Netlify is a free platform that you can use to host your website. One of the features it offers is integration with version control hosts like GitHub and Bitbucket. It uses source code from an existing repository to host your website.

When you first host your site, you may come across an issue where you are unable to view it using its URL. This happens when Netlify does not automatically redirect to your index or landing page.

You can fix this issue with a small bit of website configuration.

Hosting a Website Using Netlify

You can use different tech stacks on Netlify from TypeScript-based framework, Angular, to static site generator, Hugo. On the main page of your Netlify account, you can view a list of all the websites that you are hosting. You can also drill down to see any deployment or build details for each website.

When you first host your website, you will need to configure a few settings. This includes the build command and the publish directory. Assuming all your configuration settings are correct, Netlify will then trigger a deployment to host your site.

Failing Redirects Error on Netlify

Netlify generates a random domain name for your website. If this is the first time you are hosting your site, you may be unable to view your website from this URL. Instead, you may encounter a "Page Not Found" error.

This error can occur when you have not specified redirects for your website. In this case, when you open the URL to your website, Netlify does not know which page to redirect to initially. Instead, it serves a 404 error, rather than displaying the home page.

Fixing the Failing Redirect Issue

You can create many redirect rules based on the HTTP status code generated in the response for a request. To fix this particular error, you will only need to specify one redirect rule. That rule will redirect requests to your home page.

Redirect to Your Home Page Using the _redirects File

One option is to add the redirect rule to a _redirects file in your publish directory.

1. Navigate to the publish directory of your project, which stores your built website files. For example, in a React app, this would be your public folder. In an Angular app, you can navigate to the src folder (files are copied from here to your dist folder).
2. Create a new file called _redirects. The _redirects file does not have a file extension.

3. 

   Add a redirect rule to redirect requests to your home page. For example, the code below will redirect requests to index.html:

           /*    /index.html    200
       

4. If you are using Angular, you should also add the _redirects file to the assets array in your angular.json file:

           {
       "assets": [
           "src/favicon.ico",
           "src/assets",
           {
               "glob": "_redirects",
               "input": "src",
               "output": "/"
           }
       ]
   }
       

Specify Redirects Using the netlify.toml File

Alternatively, you can also specify redirects using a netlify.toml file.

1. Create a netlify.toml file in your publish directory or root directory, depending on the framework you are using.
2. Add a rule to redirect all requests to your home page.

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

Redeploying Your Website on Netlify

Once you have set up your redirect, you can redeploy your app on Netlify.

1. On your website's Deploy page on Netlify, click on Deploy Settings.
2. Make sure that you have configured the correct publish directory under Build Settings.

   

3. Push your new code changes, including the _redirects or netlify.toml file, to your repository.
4. This should automatically trigger a deployment. If not, navigate to your website's page on Netlify and click on Trigger Deploy, and Deploy Site.
5. Wait for the build to finish.

   

6. Open the URL to view your website. It should now redirect to your home page.

Hosting Your Website Online

You can specify redirects to your website by adding them to a _redirects or netlify.toml file. This will redirect requests to your website's home page, rather than a 404 Page Not Found error.

If you do not want to use the domain name that Netlify generates, you can buy your own domain name. You can then configure that domain name to work with Netlify. There are many tools you can use to help you generate a domain name that's right for you.