In this video, we see setting up an Astro JS 404 page is a fairly quick task. We are talking about the page site visitors will see if they try to access a route which does not exist. Typically, a static hosting provider will show their default 404 page if you do not set this up. This might be confusing for visitors, though. We see how we can add replace the default as well as add a link to help the visitor get back home!
Anyway, you came here to see the short video, so hit play below! You can drop a comment below or reach out for a chat on Element as well as Twitter @mention if you have suggestions for improvements or questions.
- Getting started with Astro,
- Element chat: #Rodney matrix chat ,
- Twitter handle: @askRodney .
- 404 Page not found pages show up when the user ends up on a route that does not exist. This might be because they included a typo as they manually entered the URL in their browser. It can also happen when they follow a broken link from your site or even an external one. Adding a custom 404 error page to your Astro project is quite straightforward, though. First create a `src/pages/404.astro` file in your project. You can edit this and include layouts, just like you would any other Astro page. You might consider capturing the URL entered, as this can also help you in updating broken links. Anyway, Astro will build this page to /404.html. Importantly, most static site hosts will look there for an error page to render whenever needed.
- The URL API is just fantastic for manipulating URLs. You create a new URL object by calling `new URL(urlString)`. You can you it to parse query strings as well as hashtags. On top, you can easily get the protocol (http or https). It usually makes more sense to you this API than knock up your own RegExp tests. As well as all that, you can try creating a URL object if you are not sure if the input will be a pathname or a full URL. It will only work successfully on the complete URL, so another time saving trick.
If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.