Escala ilimitada y alojamiento web gratuito con GitHub Pages y Cloudflare

Tengo un secreto que ahorra a mis clientes una tonelada de dinero, mantiene su sitio web seguro y tiene copias de seguridad integradas.

El secreto: hago que su sitio web sea estático. Luego, lo almaceno y lo alojo con GitHub, y uso Cloudflare para servirlo a través de HTTPS y hacerlo rápido. Mis clientes solo pagan por su nombre de dominio, pero obtienen mucho más de lo que esperaban.

¿Por qué contenido estático?

Los sitios estáticos son maravillosamente rápidos ya que no hay tiempo de procesamiento del servidor involucrado. Además, al confirmar una base de código de activos estáticos en un repositorio de git, revertir los cambios simplemente se convierte en una cuestión de volver a una confirmación anterior. Las copias de seguridad son un git push , y esencialmente sirve todo su sitio web desde el caché, lo que significa que su servidor casi nunca tendrá que procesar una solicitud nuevamente.

¿Construyendo una interfaz de usuario compleja?

Con la llegada de los marcos front-end, como React y sus similares, puede crear experiencias mágicas con nada más que HTML/CSS y JavaScript. Sin embargo, tendrá que separar su lógica de back-end de su front-end, pero incluso Ruby on Rails se envía ahora con un modo API.

Cada vez que me contratan para crear un sitio web, considero si un sitio estático es suficiente o no para satisfacer las necesidades de mi cliente y, en muchos casos, lo es.

¿Se pregunta qué tipo de casos de uso tengo en mente? ¡Genial! Analicemos algunas situaciones en las que es posible que desee considerar el contenido estático y explique cómo este enfoque puede ahorrarle tiempo a usted y a su cliente.

Sitios web de folletos

Los sitios web de folletos están destinados a proporcionar información sobre una empresa y no cambian significativamente a lo largo de su vida. Una aplicación dinámica es claramente excesiva para tales sitios, y dado que estos sitios no reciben mantenimiento durante años y reciben pocas actualizaciones, si es que reciben alguna, generalmente son objetivos fáciles para que los piratas informáticos pirateen.

Las plantillas HTML estáticas son significativamente más baratas que sus contrapartes de CMS y son más fáciles de modificar en el futuro. Los desarrolladores a los que se les pide que actualicen dichos sitios no requieren conocimientos especializados sobre un CMS en particular. Por regla general, siempre hago sitios web estáticos para sitios de folletos.

Bonificación: a las pequeñas empresas les encanta no pagar tarifas de alojamiento mensuales recurrentes. Por supuesto, el alojamiento no es un costo enorme, pero los clientes simplemente no tienen que molestarse en pagar nada más que el dominio, lo cual es excelente.

Aplicaciones de una sola página

¿Presume de una aplicación nueva, genial y maravillosa que se basa en marcos front-end modernos?

Su aplicación ya es mayormente estática. Tome algunos pasos adicionales para aislar cualquier lógica del lado del servidor en una aplicación separada y obtenga el beneficio completo de tener su aplicación servida completamente desde el caché de Cloudflare.

Su aplicación estará disponible en todo momento.

blogs

Esta es una venta difícil. Es difícil convencer a la gente de que los sitios estáticos se pueden emplear para los blogs, pero léame, no me he ido al fondo.

Los blogs no son más que contenido presentado con plantillas. Simplemente no necesita una aplicación completa que analice cada solicitud y represente una nueva página. Un sitio estático es perfecto para este caso de uso.

Considere a Jekyll. Le das plantillas de Liquid y contenido de Markdown, y los combina en un sitio web estático. No se requiere procesamiento sobre la marcha, y su blog de repente se siente significativamente más rápido.

Este flujo de trabajo es especialmente útil porque las páginas de GitHub son compatibles con las compilaciones de Jekyll. De repente, las publicaciones de blog se pueden contribuir con solicitudes de extracción y todo su contenido se almacena dentro del control de versiones. Los que no son desarrolladores aún pueden contribuir con publicaciones en Markdown publicando sus publicaciones a través de Stackedit.

De hecho, ¡estoy usando Stackedit para redactar esta publicación ahora mismo!

Además, si desea comentarios en las publicaciones de su blog, Disqus le brinda un poderoso sistema de comentarios al insertar un fragmento de JavaScript.

Esta página que estás leyendo también usa Disqus.

Páginas de GitHub

GitHub Pages es la respuesta de GitHub a las páginas de proyectos y te permite servir cualquier sitio web estático directamente desde tu repositorio. Dado que las páginas de GitHub admiten dominios personalizados, puede alojar un sitio web estático en las páginas de GitHub de forma gratuita, con implementaciones directamente desde Git.

Implementación en páginas de GitHub.

¡Basta de hablar, vamos a verlo en acción!

Seguí adelante y creé una aplicación React de una sola página que obtiene y muestra el tipo de cambio actual para la rupia pakistaní desde una API pública. Implementemos esto en las páginas de GitHub.

Primero, creemos un nuevo repositorio de GitHub.

Las páginas de GitHub se sirven desde una rama llamada gh-pages así que vamos a crear una para mi proyecto.

 $ git checkout -b gh-pages Switched to a new branch 'gh-pages'

Y empujemos el sitio hacia arriba:

 $ git remote add origin [email protected]:amingilani/price-check.git $ git push -u origin gh-pages Counting objects: 27, done. Delta compression using up to 8 threads. Compressing objects: 100% (25/25), done. Writing objects: 100% (27/27), 28.67 KiB | 0 bytes/s, done. Total 27 (delta 3), reused 0 (delta 0) remote: Resolving deltas: 100% (3/3), done. To github.com:amingilani/price-check.git * [new branch] gh-pages -> gh-pages

¡Y hemos terminado! En este punto, el sitio web estará disponible en https://amingilani.github.io/price-check con SSL gratuito:

Cosas importantes a tener en cuenta:

• Las páginas de GitHub sirven el archivo index.html en la rama gh-pages de su proyecto
• El sitio web se sirve en USERNAME.github.io/REPOSITORY-NAME

Personalización del nombre de dominio.

Servir el sitio desde GitHub está bien, pero cualquier sitio web decente necesita un nombre de dominio personalizado. ¡Afortunadamente, GitHub te permite traer tu propio dominio a la fiesta!

Primero, creemos un archivo CNAME especial y coloquemos nuestro nombre de dominio allí. Esto le permitirá a GitHub saber qué nombre de dominio enrutar al repositorio.

 $ echo 'pricecheck.gilani.me' > CNAME $ git add . $ git commit -m 'Add a custom domain' ... $ git push ...

En segundo lugar, apuntemos un CNAME para nuestro subdominio al DNS de GitHub en USERNAME.github.io :

Precaución: ¡ NO use esto para un dominio de vértice! Agregar un registro CNAME a la raíz de su dominio deshabilitará sus registros MX y TXT . Use esto solo para su subdominio. Los dominios de Apex se analizan más adelante.

En este punto, nuestro sitio web debería ejecutarse en nuestro dominio personalizado en HTTP:

Cosas importantes a tener en cuenta:

• El dominio predeterminado *.github.io se sirve a través de HTTPS.
• Nuestro nombre de dominio personalizado se sirve a través de HTTP no seguro.
• NO use un registro CNAME en su dominio principal a menos que desee eliminar sus correos electrónicos.

Limitaciones de las páginas de GitHub:

• Los repositorios deben tener un tamaño de archivo inferior a 1 GB.
• Los sitios web deben tener menos de 1 GB de tamaño de archivo.
• El límite de ancho de banda mensual es de 100 GB. Omitiremos esto más adelante.

Uso de un dominio de Apex como su dominio personalizado

La forma más fácil de sortear esta limitación es usar www como su subdominio y redirigir todo el tráfico HTTP desde el vértice a www . En mi ejemplo, redirigiría gilani.me a www.gilani.me , que apunta a mi sitio estático, pero no me gusta hacer las cosas de manera fácil.

Si realmente desea utilizar un dominio ápice, verifique si su proveedor de DNS le permite establecer registros ANAME . Estos están (simplificados) a mitad de camino entre los registros CNAME , ya que le permiten señalar dominios y registros A , ya que no anulan otros registros en la misma zona.

¿Sin ANAME ? La última opción es cambiar a un proveedor de DNS que sí soporte esto: ingresa a Cloudflare. Cloudflare proporciona aplanamiento de CNAME en dominios de vértice, que es el equivalente a un registro ANAME . Es mejor hacer el cambio ahora mismo, ya que cubriremos Cloudflare en la siguiente sección.

TLDR : cambie al DNS gratuito de Cloudflare y configure un CNAME en su dominio principal. Hacen algo especial con su CNAME que lo hace funcionar.

SSL y Cloudflare

Bienvenidos a la era posterior a Snowden. Todos nuestros peores temores de espionaje y piratería autorizados por el gobierno se han confirmado, y el mundo se esfuerza por proteger los datos en tránsito y en reposo.

Como administrador web moderno, se espera que proporcione al menos SSL en su sitio web, sin contenido mixto .

Ha llegado al punto en que Google Chrome marca los sitios web HTTPS simples como inseguros y la Búsqueda de Google está comenzando a favorecer a los sitios web HTTPS más favorablemente en sus clasificaciones. Discutiremos aún más estrategias para hacer que su front-end sea seguro más adelante, pero por ahora, solo cubriremos SSL.

Afortunadamente, ahora tenemos Let's Encrypt.

Es una autoridad de certificación (CA) sin fines de lucro y completamente automatizada que le permite emitir mediante programación certificados SSL de 90 días a corto plazo para cualquier dominio que controle. Es muy fácil de usar; es de código abierto; y el proyecto está respaldado por una plétora de empresas, incluidas Mozilla y Electronic Frontier Foundation.

Dar buen uso a Cloudflare

Cloudflare es un servicio de protección de DNS, CDN y DDoS.

Almacena en caché su sitio web y lo sirve a los usuarios desde servidores geográficamente cercanos, lo que hace que su sitio web sea más rápido. Tiene el beneficio adicional de mantenerlo por debajo del límite de ancho de banda de 100 GB de GitHub porque incluso si su sitio web se vuelve increíblemente popular, la mayoría de las solicitudes llegarán al caché y nunca llegarán al servidor.

Además de esto, Cloudflare ofrece un servicio llamado Universal SSL en el que le emiten un certificado SSL gratuito de sus socios de CA, por lo que obtiene HTTPS gratis... para siempre.

¿Por qué Cloudflare?

Sé lo que estás pensando: Gilani, me acabas de decir lo genial que es Let's Encrypt. ¿Por qué hablas de Cloudflare? Bueno, todo se reduce a la simplicidad.

Como ejercicio mental, imagine configurar varios servidores proxy inversos y caché de Nginx en todo el mundo, brindándoles todos los certificados SSL válidos y sirviendo a los usuarios las páginas web desde sus ubicaciones más cercanas.

Esto da como resultado que su sitio web se sirva a través de SSL incluso si el servidor de origen no tiene un certificado SSL, aunque Cloudflare le brinda certificados autofirmados especiales que puede colocar en su servidor de origen para asegurar la conexión a los servidores de Cloudflare. Esto es lo que te brinda Cloudflare con un plan gratuito, y ni siquiera tienes que renovar tu certificado cada 90 días.

Como trabajador independiente, recibo clientes que desean tener un sitio en funcionamiento para su negocio lo más rápido posible. No entienden ni se preocupan por las preocupaciones de seguridad, la plaga de la web moderna o el cifrado durante el tránsito. Algunos clientes luchan por comprender la idea de los nombres de dominio y les resulta molesto tener que pagar una tarifa anual de $ 15 "solo para mantener mi sitio web en funcionamiento". Así que intente explicarles por qué tienen que pagar por un grupo de proxies inversos que protegen su sitio web que se ejecuta en alojamiento gratuito.

Configuración de Cloudflare SSL

Ensuciémonos las manos otra vez. Lo primero que debe hacer es cambiar para enrutar todo su tráfico a través de Cloudflare:

A continuación, en Cripto, establezca el nivel de SSL en "Completo".

Fuerce la "Reescritura automática de HTTPS" para eliminar las advertencias de contenido mixto.

En este punto, nuestro sitio web funcionará tanto con HTTP como con HTTPS. Forzamos HTTPS para todo en nuestro dominio.

Todo listo. Nuestro sitio web siempre debe cargarse a través de HTTPS con una calificación verde de "Seguro" en Chrome.

Palabras finales y consideraciones de seguridad

Hay algunas cosas que no discutí anteriormente, y me gustaría tomarme un momento para aclarar algunos puntos.

Los astutos entre ustedes señalarán que hay algunos problemas de seguridad evidentes con esta configuración, a saber, que no hay encabezados HTTP seguros como:

• Content-Security-Policy : carga secuencias de comandos y activos de una lista blanca de hosts, y puede deshabilitar js en línea.
• X-Frame-Options : deshabilita su sitio web para que no se cargue en un iframe.

Y tienes razón. Las páginas de GitHub e incluso Cloudflare no le permiten personalizar sus encabezados HTTP . Sin embargo, puede establecer un CSP utilizando la meta HTML.

Simplemente inserte esto en su página web:

 <meta http-equiv="Content-Security-Policy" content="default-src https:">

Sin embargo, por el momento, no existe una forma práctica de configurar el encabezado X-Frame-Options en las páginas de GitHub, lo que significa que un atacante puede cargar su página web en un iframe especialmente diseñado y realizar un ataque XSS. Sin embargo, si está dedicado, puede solucionar este problema solicitando a los usuarios que confirmen su contraseña o token 2FA en cada acción confidencial, o pasando un token CSRF en cada solicitud autenticada.

Una gran preocupación para algunos es que al usar los repositorios públicos gratuitos en GitHub, su sitio web y el código fuente están disponibles para cualquiera que quiera bifurcarlo o descargarlo. Así que creo que la preocupación aquí está fuera de lugar.

El contenido estático no es código fuente en el sentido de que no se compila o procesa como un script antes de ser entregado al usuario. Su usuario obtendrá exactamente la misma copia estática del sitio web si ejecutara un rastreador web apuntando a su sitio web. Si bien alojar el código en un repositorio de GitHub ciertamente facilita la descarga de una copia de su sitio web, no expone nada que no sea público.

Escalado, Escalado Ilimitado

Las ideas presentadas en este artículo no se limitan al alojamiento web gratuito de pequeñas aplicaciones.

Puede crear una capa de front-end basada en un marco de JavaScript moderno, conectarlo a un backend como servicio (BaaS) basado en la nube a gran escala, como Firebase, y crear aplicaciones complejas sin preocuparse por los servidores, el tiempo de actividad, o cualquier otro tema relacionado con la infraestructura.

¿Haciendo un nuevo y emocionante juego basado en la web? Echa un vistazo a GameSparks y estarás listo para empezar.

Resumen, confesión y enlaces

En este artículo, hice que pareciera que publiqué manualmente mi aplicación React en gh-pages . No hice tal cosa. Trabajé en master y cuando llegó el momento de implementar, ejecuté npm run deploy que inició un script de compilación y empujó la compilación a gh-pages . Consulte la rama master de mi repositorio para ver cómo funciona.

comida para llevar

Ventajas:

• Implementación instantánea
• Colaboración fácil
• Entorno de alojamiento seguro

Advertencias:

• Sin acceso a los encabezados HTTP
• Fácil de descargar una copia del sitio web
• Se requiere conocimiento de GitHub
• Depende de los proveedores de tecnología.

Enlaces:

• Encontrará el código fuente de mi aplicación en amingilani/price-check
• Esta aplicación está disponible en pricecheck.gilani.me y debería estar disponible indefinidamente.