Tengo un secreto que ahorra a mis clientes un montón 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 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, sin embargo, obtienen mucho más de lo que nunca negociaron.
¿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 git, revertir los cambios simplemente se convierte en una cuestión de volver a una confirmación anterior. Las copias de seguridad están a git push, y esencialmente sirve todo su sitio web desde la caché, lo que significa que su servidor casi nunca tendrá que procesar una solicitud de nuevo.
¿construyendo una interfaz de usuario compleja?
con la llegada de los frameworks front-end, como React y sus parientes, puedes crear experiencias mágicas con nada más que HTML/CSS y JavaScript., Sin embargo, tendrás que separar tu lógica de back-end de tu front-end, pero incluso Ruby on Rails viene con un modo API ahora.
cada vez que me contratan para construir un sitio web, considero si un sitio estático es suficiente para satisfacer las necesidades de mi cliente, y en muchos casos, lo es.
¿se está preguntando qué tipo de casos de uso tengo en mente? ¡Órale! Vamos a discutir algunas situaciones en las que es posible que desee considerar el contenido estático, y explicar cómo este enfoque puede ahorrar tiempo tanto a usted como a su cliente.,
sitios web de Brochureware
los sitios web de Brochureware están destinados a proporcionar información sobre un negocio, y no cambian significativamente a lo largo de su vida. Una aplicación dinámica es claramente exagerada para estos sitios, y dado que estos sitios no se mantienen durante años, recibiendo pocas actualizaciones, si es que hay alguna, por lo general son objetivos fáciles para que los hackers, bueno, hackeen.
Las plantillas HTML estáticas son significativamente más baratas que sus contrapartes CMS, y son más fáciles de modificar en el futuro. Los desarrolladores a los que se les pide actualizar dichos sitios no requieren conocimientos especializados sobre un CMS en particular., Como regla general, siempre hago sitios web estáticos para sitios de brochureware.
bono: 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 genial.
aplicaciones de una sola página
¿está mostrando una nueva aplicación maravillosa y genial que se basa en marcos de interfaz 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 la 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 blogs, pero Léeme – no he ido al fondo.
Los Blogs no son más que Contenido renderizado con plantillas. Simplemente no necesita una aplicación completa que analice cada solicitud y renderice una nueva página. Un sitio estático es perfecto para este caso de uso.,
considera a Jekyll. Le das plantillas líquidas y contenido Markdown, y las combina en un sitio web estático. No se requiere procesamiento sobre la marcha, y tu blog de repente se siente significativamente más rápido.
Este flujo de trabajo es especialmente útil porque las páginas de GitHub admiten 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 no desarrolladores pueden contribuir con publicaciones en Markdown publicando sus publicaciones a través de Stackedit.
de hecho, Estoy usando Stackedit para componer este post ahora mismo!,
Además, si desea comentarios en sus publicaciones de blog, Disqus le brinda un poderoso sistema de comentarios insertando un fragmento de JavaScript.
esta página que estás leyendo también utiliza Disqus.
GitHub Pages
GitHub Pages es la respuesta de GitHub a 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, puedes alojar un sitio web estático en las páginas de GitHub de forma gratuita, con implementaciones directamente desde Git.
implementando en las páginas de GitHub.
basta de hablar, vamos a verlo en acción!,
he seguido adelante y hecho una sola página React aplicación que obtiene y muestra el tipo de cambio actual para La Rupia Pakistaní de una API pública. Vamos a implementar esto en las páginas de GitHub.
primero, vamos a crear 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-pagesSwitched to a new branch 'gh-pages'Y vamos a empujar el sitio:
Y ya está!, En este punto, el sitio web estará disponible en con SSL gratuito:
cosas importantes a tener en cuenta:
- bd5ce914e9″> archivo en su proyecto
gh-pagesrama - El sitio web se sirve en
USERNAME.github.io/REPOSITORY-NAME
personalizar el nombre de dominio.
servir el sitio fuera de 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, vamos a crear un archivo especial CNAME y colocar 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, vamos a punto de un CNAME para nuestro subdominio a GitHub DNS en el USERNAME.github.io:
Precaución: NO use este para un ápice de dominio! Agregar un registro CNAME a la raíz de su dominio deshabilitará sus registros MX y TXT., Usa esto solo para tu subdominio. Los dominios Apex se discuten más adelante.
en este punto, nuestro sitio web debe ejecutarse en nuestro dominio personalizado en HTTP:
cosas importantes a tener en cuenta:
- https.
- nuestro nombre de dominio personalizado se sirve a través de HTTP inseguro.
- No utilice un registro
CNAMEen su dominio apex a menos que desee eliminar sus correos electrónicos.
Limitaciones de las páginas de GitHub:
- los repositorios deben tener menos de 1 GB de tamaño de archivo.,
- 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. Evitaremos esto más tarde.
usar un dominio apex como dominio personalizado
la forma más fácil de evitar esta limitación es usar www como subdominio y redirigir todo el tráfico HTTP desde el apex a www. En mi ejemplo, redirigiría gilani.me a , que apunta a mi sitio estático, pero no me gusta hacer las cosas de la manera fácil.,
si realmente desea utilizar un dominio apex, compruebe si su proveedor de DNS le permite establecer registros ANAME. Estos son (simplificados) a medio camino entre CNAME registros ya que le permiten apuntar a dominios y A registros ya que no anulan otros registros en la misma zona.
No ANAME? La última opción es cambiar a un proveedor de DNS que admita esto: ingrese Cloudflare., Cloudflare proporciona CNAME aplanamiento en dominios apex, que es el equivalente de 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 establezca un CNAME en su dominio apex. Hacen algo especial con su CNAME que hace que funcione.
SSL y Cloudflare
Bienvenidos a la era post-Snowden., Todos nuestros peores temores de espionaje y piratería autorizados por el gobierno han sido confirmados, y el mundo está luchando para asegurar 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 sitios web HTTPS simples como inseguros y Google Search está empezando a favorecer 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 entidad de certificación (CA) totalmente automatizada y sin fines de lucro que le permite emitir mediante programación certificados SSL a corto plazo de 90 días para cualquier dominio que controle. Es muy fácil de usar; es de código abierto; y el proyecto está respaldado por una gran cantidad de empresas, incluyendo Mozilla y la Electronic Frontier Foundation.
dar un buen uso a Cloudflare
Cloudflare es un servicio de protección 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 bajo el 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 a la caché y nunca llegarán al servidor.
Además de esto, Cloudflare ofrece un servicio llamado universal SSL donde le emiten un certificado SSL gratuito de sus socios de CA, por lo que obtiene HTTPS gratis forever para siempre.
¿por qué Cloudflare?
sé lo que estás pensando: Gilani, acabas de decirme lo genial que es Let’s Encrypt. ¿Por qué estás hablando de Cloudflare? Bueno, todo se reduce a la simplicidad.,
como un ejercicio mental, imagine la configuración de múltiples caché Nginx y proxies inversos en todo el mundo, dándoles todos los certificados SSL válidos y sirviendo a los usuarios 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 da 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 Cloudflare le ofrece con un plan gratuito, y ni siquiera tiene que renovar su certificado cada 90 días.,
como freelancer, tengo clientes que quieren un sitio en funcionamiento para su negocio lo más rápido posible. No entienden ni se preocupan por los problemas de seguridad, la plaga de la web moderna o el cifrado durante el tránsito. Algunos clientes luchan por entender la idea de los nombres de dominio, y les resulta molesto cuando tienen que pagar una tarifa anual de 1 15 «solo para mantener mi sitio web en funcionamiento». Así que trate de explicarles por qué tienen que pagar por un grupo de proxies inversos que protegen su sitio web que se ejecuta en el propio alojamiento gratuito.
configurando Cloudflare SSL
vamos a ensuciarnos las manos de nuevo., Lo primero que debe hacer, cambie a enrutar todo su tráfico a través de Cloudflare:
a continuación, en Crypto, establezca el nivel SSL en » Full.»
la Fuerza «Automático HTTPS Reescritura de» matar advertencias de contenido mixto.
En este punto, nuestro sitio web funcionará sobre HTTP y HTTPS. Vamos a forzar HTTPS para todo en nuestro dominio.
Todo hecho., Nuestro sitio web siempre debe cargar a través de HTTPS con una calificación Verde «seguro» en Chrome.
palabras finales y consideraciones de seguridad
hay algunas cosas que no comenté anteriormente, y me gustaría tomar un momento para aclarar algunos puntos.
el astuto entre ustedes señalará que hay algunos problemas de seguridad evidentes con esta configuración, a saber, que no hay encabezados HTTP seguros como:
-
Content-Security-Policy: carga scripts y activos de una lista blanca de hosts, y puede rechazar JS en línea., -
X-Frame-Options: deshabilita la carga de su sitio web en un iframe.
Y tienes razón. Las páginas de GitHub e incluso Cloudflare no te permiten personalizar tus encabezados HTTP. Sin embargo, puede establecer un CSP utilizando la etiqueta HTML meta.
simplemente inserte esto en su página web:
<meta http-equiv="Content-Security-Policy" content="default-src https:">Sin embargo, por el momento, no hay una forma práctica de establecer 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 y ataque XSS., Sin embargo, si está dedicado, puede solucionar este problema pidiendo 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 preocupación importante para algunos es que al usar los repositorios públicos gratuitos en GitHub, su sitio web y código fuente están disponibles para cualquier persona 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 servido 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 hace que sea más fácil Descargar una copia de su sitio web, no expone nada que no sea ya 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 front-end basada en un marco JavaScript moderno, conectarla a un Backend-as-a-Service (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 problema relacionado con la infraestructura.
haciendo un nuevo juego emocionante basado en la web?! Echa un vistazo GameSparks, y usted es bueno para ir.
resumen, confesión y enlaces
en este artículo, hice que pareciera que publiqué manualmente mi aplicación React en gh-pages. Yo no hice tal cosa., Trabajé en mastery cuando llegó el momento de implementar, Corrí npm run deployque 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.,
Takeaways
Pros:
- Instant deployment
- easy collaboration
- Secure hosting environment
advertencias:
- No access to HTTP headers
- Easy to download a copy of the website
- GitHub knowledge required
- Depends upon technology vendors
enlaces: