Custom 404 page for your Netlify site - Easy!

Hello! You might be familiar with netlify. And you might be deploying your files into the web with it. But there's a problem that most people run into, when someone opens a link inside your website that does not exist, it shows the default netlify 4O4 page. I'll show you how to set a custom 4O4 page for your website that is already deployed via netlify. You need to make sure that your website is deployed correctly. You should have an index file which will show up as the home page when you enter the website. In order to make a custom 4O4 page, you must create an html file named anything. You can name it 4O4.html but it's all upto you. It also doesn't matter if it's in a folder. But you should have the file inside the folder you will deploy.

After you create an html file for your custom 4O4 page, you can edit the code about how the page is going to look. You can create a CSS file and a Javascript file for the 4O4 page and link them together. Designing and functioning the file is your part. After you design your 4O4 page, and deploy it to the net, it won’t work. As you can see, it still shows the default netlify 4O4 page. I’ll show you how to fix it.

In order to make the 4O4 page work, you need to create another file just beside the main index file. Name it netlify.toml

Don’t worry, you just need to write 2 lines of code. You can copy paste this code. I’ll also put it in the description so you can easily copy the code. You need to change only one line of code here. Make sure the path is correct. Put in the location of the 4O4 page correctly. Now, you can deploy the files via netlify and it will be working.

Thanks for watching, consider subscribing if it helped you.
----------------------------------------------------------------------------------------

Here’s the code you have to put in the netlify.toml

```
[[redirects]]
from = "/*"
to = "/pages/404.html" #-change-path-here-and-delete-this-comment
status = 404

```

------------------------------------------------------------------------------------------
Links from this video
------------------------------------------------------------------------------------------
Github Repository (archived): https://github.com/alnabid/tutorials-404-page-netlify/
Website from this tutorial: https://404-tutorial-alnabid.netlify.app/

------------------------------------------------------------------------------------------
Links of alnabid.
------------------------------------------------------------------------------------------
website: https://alnabid.netlify.app/
support-me: https://alnabid.netlify.app/support
portfolio: https://alnabid.netlify.app/portfolio
social-links: https://alnabid.netlify.app/portfolio/links

#netlify #pagenotfound #code
------------------------------------------------------------------------------------------
Chapters
------------------------------------------------------------------------------------------
00:00 - intro
00:15 - create custom 404 page
01:11 - set up the 404 page / make it work

Тэги:

#Netlify #404 #page_not_found #error #css #html #toml #fix #custom #page #programming #coding #custom_404_page #host #netlify_tutorial #netlify_cms #web_design #404_page #netlify_hosting

Скачать видео