Custom 404 en GitHub Pages y Netlify
¿Sabías que puedes crear tu propia página 404 para tus sitios web que se encuentran desplegados en GitHub Pages y Netlify? ¿Quieres personalizar la plantilla por defecto que nos ofrecen dichos servicios? Pues sigue leyendo, que en este post aprenderás como tener tu propia página 404 en dichos servicios.
Esta es la página 404 por defecto que GitHub Pages y Netlify nos proporcionan por defecto para manejar el error 404 (No encontrado) respectivamente:
Si bien el diseño no esta mal, muchas veces no encajará con nuestro sitio web. Necesitamos demostrar que incluso la página 404 es nuestra, tal y como lo podemos ver en otros sitios web. Entonces pongámonos en acción.
Lo primero será dirigirte al carpeta raíz de tu proyecto (o el proyecto al cual vas a implementar esta funcionalidad). Ya en dicha carpeta crearemos el archivo 404.html, es importante este nombre, pues será la forma en que Netlify o GitHub Pages lo reconozcan. Aquí un ejemplo:
Luego guardamos los cambios y los subimos al repositorio del proyecto. Otra forma de crear el archivo es dirigirte al repositorio del proyecto. Clic en Add File y generar un nuevo archivo de nombre 404.html:
Así se ve el repositorio del proyecto al cual le estoy añadiendo esta funcionalidad:
Ahora solo debemos esperar a que GitHub Pages lea los cambios, o en caso de que aun no lo has hecho, puedes ir a la ventana Settings de tu repositorio y buscar la sección GitHub Pages. Una vez se haya desplegado el sitio web podrás verificar si funciona nuestro 404.
¿Y para Netlify?
Si ya tenías integrado tu repositorio con Netlify, este habrá detectado el nuevo cambio que hiciste y habrá desplegado el sitio nuevamente con los nuevos cambios, así que de la misma forma que con GitHub Pages ingresa a tu sitio y prueba generando un error 404 añadiendo cualquier palabra que no forme parte de tu sitio web.
Ahora que ya aprendiste a tener tu propia página 404. ¿Qué estas esperando?, genera tus propios estilos y dale más vida a tu proyecto 😄.