Una guía ilustrada para configurar su sitio web usando Github y Cloudflare

Deberías leer esto si ...

  1. Desea configurar redireccionamientos personalizados u otra configuración de servidor de forma gratuita
  2. Quiere que su sitio esté en HTTPS pero no sabe por dónde empezar
  3. Estás abrumado con la cantidad de opciones que hay (como Netlify, Surge, BitBalloon, Now)

¿Por qué Github?

  1. Fácil de configurar y comenzar con Github Pages
  2. Implementaciones instantáneas al empujar nuevo código

¿Por qué Cloudflare?

  1. Es gratis
  2. Viene con soporte listo para usar para SSL (HTTPS). (He aquí por qué es importante HTTPS).
  3. Gestión de DNS super sencilla
  4. Capacidad para establecer la caducidad de la caché del navegador para los activos
  5. Minifica automáticamente tus activos estáticos
  6. Reglas de página personalizadas para configurar redireccionamientos, siempre HTTPS, etc.
  7. HTTP2 / SPDY para navegadores compatibles
  8. Permite configurar HSTS (HTTP Strict Transport Security)

Antes de comenzar, necesitará algunas cosas:

  1. Una cuenta de Github
  2. Una cuenta de Cloudflare
  3. Acceso a un dominio personalizado. Puede comprarlo en cualquier registrador de nombres de dominio como: Namecheap, GoDaddy, BigRock, etc.

Si todo esto despertó su interés, ¡comencemos!

Paso 1 : crea un repositorio de Github con tu código

  • Vaya a //pages.github.com
  • Seleccione la opción Sitio del proyecto para encontrar las instrucciones sobre cómo crear una página básica desde cero o un tema personalizado

Paso 2. Configura las páginas de Github para el repositorio

Vaya a Configuración de su repositorio. En la sección Páginas de Github , elija la rama maestra desde la que servir su sitio web. Una vez que haya hecho eso, puede ir a // me> .gith u b.io/repo s itory para ver su sitio web en acción como se muestra a continuación.

Paso 3. Agrega un dominio personalizado

Agrega el dominio personalizado que compraste y guárdalo. ¿Su sitio web ya está listo con su propio dominio personalizado? ¡WOOT! ✨

Entonces, tenemos todo configurado en Github. Comenzaremos con la configuración de Cloudflare para mejorar su sitio web con todas las funciones poderosas que mencioné al principio de esta publicación.

Paso 4: configura tu dominio en Cloudflare

Inicie sesión en Cloudflare. Si lo está utilizando por primera vez, debería ver una pantalla como la imagen que se muestra arriba. Si lo ha usado antes, puede hacer clic en la opción Agregar sitio en la barra de navegación en la parte superior derecha para agregar un nuevo dominio. Ingrese el dominio que desea administrar y haga clic en Iniciar escaneo .

Paso 5: configura los registros DNS para tu dominio

En este paso, le informamos a Cloudflare que apunte nuestro dominio al servidor de Github Pages usando dos entradas de DNS A Record :

1. 192.30.252.153

2. 192.30.252.154

Una vez que ha configurado, todas las peticiones a su dominio personalizado es decir yourcustomdomain.com serán enviados a su sitio web en Github en el paso 3 .

Hay un paso más involucrado antes de pasar a la siguiente etapa. A menudo, querrá utilizar un subdominio como www para su sitio web, es decir, www.yourcustomdomain.com Para esto, necesitará agregar una entrada DNS de registro CNAME que apuntará su subdominio (www) a su dominio apex (@).

Una vez que haya configurado esto, todas las solicitudes a su subdominio personalizado, es decir, www. yourcustomdomain.com será enrutado a su sitio web en Github en el Paso 3 .

NOTA: No intente acceder a su dominio personalizado de inmediato. No funcionará. Solo hemos realizado la configuración de Cloudflare a Github. Todavía tenemos que hacer el Registro de DNS -> Configuración de Cloudflare. Esto aparecerá en el paso 7.

Haga clic en Continuar para ir al siguiente paso.

Paso 6: elige el plan gratuito de Cloudflare

El plan gratuito para Cloudflare ofrece muchas opciones sofisticadas, como se explica en ¿Por qué Cloudflare? sección al principio.

Haga clic en Continuar para ir al siguiente paso.

Paso 7: actualice los servidores de nombres en su registrador de DNS

Una vez que esté en esta página, manténgala abierta en una pestaña y abra el sitio de su registrador de DNS (el lugar desde donde compró su dominio) en otra. Si está utilizando uno de los siguientes registradores, los enlaces para comprender cómo cambiar el servidor de nombres son:

  1. Gran roca
  2. Namecheap
  3. Ve papi

Debe reemplazar los servidores de nombres existentes en la configuración de su dominio con los de la página de Cloudflare que está abierta en la otra pestaña.

¡YASSS! Ha configurado correctamente su dominio personalizado para utilizar Cloudflare como proveedor de DNS. Puede ir a la opción Descripción general en la parte superior y encontrará que todavía está esperando que se procese su cambio de servidor de nombres.

Una vez que la pestaña Descripción general dice Estado: Activo ,ahora puede intentar visitar su sitio utilizando su dominio personalizado, ¡ Y DEBE FUNCIONAR ! ??

Paso 8: configurar la minificación

En la configuración de Velocidad , en la sección Auto Minify , elija la opción para auto-minificar todo: Javascript, CSS, HTML. Esto lo hará Cloudflare sobre la marcha una vez y luego se almacenará en caché. Siempre que cambie alguno de sus activos, Cloudflare lo volverá a hacer por usted.

La ventaja de la minificación es que el tamaño del archivo enviado a su navegador es mucho menor, ya que elimina los espacios y comentarios no deseados.

Paso 9: configurar la caducidad de la caché del navegador

Si se desplaza hacia abajo en la misma página que Auto Minify , encontrará la sección Caducidad de la caché del navegador . Idealmente, debería establecerse en 30 días / 1 mes para que WebpageTest no le dé una advertencia. Lo que este tiempo indica es que, una vez que su sitio se carga en cualquier navegador, el navegador no solicitará ningún activo por segunda vez hasta que expire el período de tiempo de la caché del navegador para esos activos.

Antes de continuar con el siguiente paso, verifique la configuración de Crypto en Cloudflare. Debería decir Certificado Activo en la sección SSL . ( Nota: intente volver a cargar la página. A veces, no se actualiza ). En los siguientes dos pasos, haremos que su sitio se sirva siempre a través de HTTPS . Para que eso funcione sin problemas, es importante que tenga un certificado activo en Cloudflare.

Paso 10: configurar las reglas de la página

En este paso, vamos a hacer dos cosas:

  1. Redirigir todas las solicitudes de www.yourcustomdomain.com a yourcustomdomain.com
  2. Redirigir todas las solicitudes de //yourcustomdomain.com a //yourcustomdomain.com

Vaya a la configuración de Reglas de página y haga clic en Crear regla de página.

Para manejar la redirección de www.yourcustomdomain.com a yourcustomdomain.com , reemplace tweetify.io con el nombre de yourcustomdomain.com . Haga clic en Guardar e implementar .

Para manejar la redirección de //yourcustomdomain.com a //yourcustomdomain.com , reemplace tweetify.io con el nombre de yourcustomdomain.com . Haga clic en Guardar e implementar .

Paso 11: configurar HSTS

Vaya a la configuración de Crypto y desplácese hacia abajo hasta la sección HTTP Strict Transport Security (HSTS) . Haga clic en Activar HSTS . Esto le pedirá que reconozca que sabe lo que está haciendo. Antes de seleccionar Entiendo , déjame decirte por qué necesitamos habilitar esta configuración:

Si un usuario ha abierto su sitio web en el pasado, a partir de ese momento, cada vez que el usuario intente acceder a su sitio web, siempre será dirigido a la versión HTTPS de su sitio. Esto hace que su sitio se cargue un poco más rápido en visitas posteriores porque la redirección de HTTP a HTTPS ocurre en el cliente y no a través de la regla de página de Cloudflare que agregamos en el paso 10.

Una vez que vaya al siguiente paso, debe habilitar todas las configuraciones como se muestra a continuación. Puede leer más detalles sobre estas opciones aquí y aquí

Eso es. ¡Estás listo para mostrar tu sitio web al mundo! ?? Si te ha resultado útil, ❤️ y compártelo.

Karan Thakkar es el líder de frontend en Crowdfire, su compañero de marketing súper inteligente . Su artículo ha aparecido anteriormente en The Huffington Post. Le gusta probar nuevas tecnologías en su tiempo libre y ha creado Tweetify (usando React Native) y Show My PR's (usando Golang).

Otros artículos escritos por él:

Cómo crecí de 300 a 5000 seguidores en solo 3 semanas

#GrowthHacking mi cuenta de Twitter para @Crowdfire Twitter Premier League blog.markgrowth.com Uso de Let's Encrypt Certbot para obtener HTTPS en su caja Amazon EC2 NGINX

Let's Encrypt es una nueva autoridad de certificación que proporciona certificados SSL gratuitos (hasta un cierto límite por semana). Es ... medium.freecodecamp.com