Complementos recomendados para darle vida a tus sitios web estáticos

Si eres un desarrollador de aplicaciones para el usuario como yo, estoy seguro de que terminaste en esta situación antes. O bien ha creado un sitio estático simple, o ha descargado una plantilla estática agradable, y luego pensó "Oh, si solo pudiera poner un formulario de contacto en esto" o "Sólo quiero agregar un botón de pago". Estos son los tipos de preguntas que convierten un pequeño proyecto en una bestia mucho más grande..

Pero no tiene que ser así. Hay muchas herramientas y características que puede agregar a un sitio estático sin tener que introducir PHP, Ruby o cualquier otra forma de desarrollo de back-end. En este artículo, he enumerado algunos recursos que harán que su sitio sea un poco menos estático..

Alojamiento

Sí, me doy cuenta de que esto no es realmente un recurso o herramienta de front-end, pero si desea que alguien vea su sitio, tendrá que ponerlo en la web.. 

Páginas de GitHub

Para el sitio estático que aloja uno de mis dos favoritos es sin duda GitHub Pages. GitHub Pages está diseñado para permitir que las personas creen sitios web que coincidan con sus proyectos web en GitHub.com. También hace un gran trabajo al hacer esto, tanto que la gente lo usa para alojar su cartera principal o sitios web personales. Eche un vistazo a los siguientes tutoriales para obtener más información:

  • Conociendo las páginas de GitHub: Páginas de proyectos estáticos, Rápido
  • Creación de páginas de GitHub (parte de "Introducción a Git y GitHub" por Dan Wellman)

Nota: Si ha descargado una plantilla de Envato Market o desea alojar material confidencial en GitHub Pages, tendrá que pagar por un repositorio privado. En estas situaciones, es importante que las personas no puedan descargar libremente el código directamente desde GitHub.com

Oleada

Surge es otro de mis favoritos y es impresionante para el alojamiento estático, especialmente si te gusta empujar sitios en vivo a través de la línea de comandos. El proceso de instalación es agradablemente sencillo..

Morsa de la oleada

Surge plus, que ofrece funciones más sólidas que el plan de precios gratuito, como la protección de contraseña y HTTPS, (en el momento de escribir este artículo) le costará $ 13 por mes.

Formularios y comentarios

Las formas, para mí, solían ser el punto de inflexión en el que admitiría que "voy a necesitar algo de PHP aquí". Bueno, ya no, gracias a herramientas como Formspree, Disqus e incluso Google Forms. 

Formspree

Formspree le permite convertir un formulario HTML estático en un formulario de contacto completamente funcional. Si desea probarlo usted mismo, escribí un artículo sobre cómo agregar formularios de Formspree a un sitio estático.. 

Disqus

Si tuviera que agregar un sistema de comentarios a cualquier sitio, iría directamente a Disqus; Se ve muy bien y funciona perfectamente (manejando el spam extremadamente bien). Más allá de eso, agrega dinámicas sociales y de gamificación a los comentarios, recomienda discusiones, recopila tendencias de toda la web y permite a los usuarios ganar puntos a través de la votación comunitaria..

Incluso ofrece monetización al permitir a los editores acceder a la propia plataforma de anuncios de Disqus..

Formularios de Google

Por otro lado, si bien Google Forms es una herramienta menos conocida, es bastante bueno para administrar comentarios y recopilar datos de encuestas. También recomendaría revisar los nuevos formularios de Google, ya que han actualizado la interfaz de usuario y los formularios para seguir el nuevo sistema de diseño de materiales..

Mmmm ... malvaviscos

Gestión de dominio y servidor

CloudFlare

Desde que descubrí CloudFlare lo he estado usando para configurar todos mis dominios La configuración de su dominio con CloudFlare desbloquea muchas funciones que puede habilitar desde la interfaz de administración. SSL flexible, búsqueda de sitios, compresión HTML y más. Si va a incluir complementos y widgets de terceros en su sitio web estático, las herramientas de optimización de CloudFlare garantizarán que su sitio funcione de la mejor manera posible. Aquí hay una lista completa de las aplicaciones disponibles.

Pagos

Tomando pagos en un sitio web estático? ¿¡Estas loco!? Bueno, en realidad no, siempre que tenga el certificado SSL correcto y tenga todo configurado de manera segura, puede realizar pagos en un sitio estático con la misma facilidad que cualquier otro tipo..

Envato Market tiene cientos de plantillas estáticas con temas de venta al por menor, ideales para vender cosas en línea, sin estar atado a una plataforma dinámica.

Raya

Si desea realizar pagos únicos para un producto, le recomiendo usar Stripe Checkout. El diseño de la ventana de diálogo es de primera categoría, lo que permite una experiencia de usuario limpia, en lugar de dirigir al usuario a un sitio web completamente diferente.. 

Además, como está vinculado a su cuenta de Stripe, puede utilizar su aplicación oficial para realizar un seguimiento de los pagos.. 

Gumroad

¿Buscando algo un poco más poderoso? ¿Algo que permita varios productos, una cesta y un proceso completo de pago? No hay problema, Gumroad te apoya con su widget de compras en línea. 

Al agregar esto a cada producto en su sitio estático, el usuario podrá agregar varios productos a su cesta y pagarlos a través del sistema de pagos de Gumroad, que puede administrar desde su cuenta de Gumroad. Aprende más:

  • Sencillo eCommerce con Gumroad

Otras herramientas

Hay un par de otras herramientas que podrían beneficiarse si está creando un sitio web utilizando páginas estáticas.. 

MapBuildr

Si desea agregar un mapa a su sitio, recomendaría MapBuildr, que brinda una interfaz relativamente simple para crear su propio mapa incrustado utilizando la API de Google Maps..

Medio

Otra característica que quizás quieras agregar es un blog. Sin usar un generador como Jekyll, no puede implementar fácilmente un blog en un sitio estático, pero podría usar un servicio diseñado específicamente para bloguear. Medium se ha vuelto extremadamente popular entre los individuos y las empresas para hacer blogs, y en realidad hay una forma de insertar artículos de Medium en una página estática.. 

La presentación de la inserción es elegante y limpia, por lo que no debe coincidir con el diseño de su sitio.

Conclusión

Como puede ver, un sitio estático no tiene que ser estático. Existen muchas herramientas poderosas para dar vida a sus plantillas estáticas, la mayoría de las cuales son completamente gratuitas de configurar. Todas las herramientas mencionadas anteriormente se han construido y diseñado con cuidado y atención, y si tienes la oportunidad de usar una de ellas, te recomiendo que las pruebes..