How do I make a 404 page with HTML?

Question: By default, the Replit 404 page says “Not found.” I was wondering if it was possible to write code that redirects you to a 404 page if the requested page does not exist.


Repl link: https://coderoad-preview.somerandomktpag.repl.co

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Wrong Page!</title>
	<link href="/style.css" rel="stylesheet" type="text/css" />
	<link rel="icon" type="image/x-icon"
		href="https://cdn.discordapp.com/attachments/989520779035177011/1023383840753979463/New_Project__2_-removebg-preview.png">
</head>

<body>
	<header>
		<nav id="nav-bar">
			<ul>
				<a href="/index.html">
					<img class="logo"
						src="https://cdn.discordapp.com/attachments/989520779035177011/1023322990613626890/jpg-removebg-preview.png"
						height="60" alt="Code road logo">
				</a>

				<a href="/index.html">
					<li id="home">Home</li>
				</a>
				<a href="/courses.html">
					<li id="courses">Courses</li>
				</a>
				<a href="/resources.html">
					<li id="resources">Resources</li>
				</a>
			</ul>
		</nav>
	</header>
	<h1 class="red">Oops!</h1>
	<h3>It appears that this Coderoad page you are looking for doesn't exist. Are you sure you have the right link?</h3>
	<h3>Try going <a href="/index.html">to the home page.</a></h3>
</body>

</html>
2 Likes

Unfortunately no you can. Nothing in the docs and I tried making a 404.html file but to no eval.

You can request this feature by pressing the Share feedback button on the ? and then the button left navbar.
image

You might also want to look at tutorials like this Custom 404 Error Page in PHP : 5 Steps - Instructables as you would need to be running a server before you would be able to redirect to a 404 page anyway.

1 Like

You can try out this template which includes custom 404 pages.

2 Likes

@not-ethan and @somerandomktpag,

for this you need a .htaccess file which is not visible for the Replit users, I’ve created a feature request for this :

1 Like

To make a 404 page, you need some form of access to a server, the server would respond to a request in which the contents cannot be found with a 404 error and optionally some content to visually display the error.

Since this has to be done on the server-side, you will need a server-side language to receive a request, determine it cannot find the content that the request is looking for and so send a 404 status and some content. Some good examples of server-side languages that are very popular and would enable you to do this are NodeJS and Python.

Alternatively, like @hugoondev has said, you could use a .htaccess file (however this is currently not available on Replit). From what I understand of the .htaccess file, it acts technically like a server-side language would and enables you to do what you want, but nothing more.

3 Likes

This is a difficult problem on replit, due to the limitations for handling such errors. If you have SEO and have a specific link that you want to display (e.g. an outdated one) a 404 on, add this to that page:

<script>
window.open('404.html')
</script>

assuming your 404 page is called 404.html.

This topic was automatically closed after 6 days. New replies are no longer allowed.