Uso de Surge para implementar sitios estáticos (actualización de 2020)

Uso de Surge para implementar sitios estáticos (actualización de 2020)

Uso de Surge para implementar sitios estáticos

En el proceso de implementación de sitios web estáticos, los desarrolladores de aplicaciones web siempre están buscando las herramientas más nuevas y eficientes para mejorar su sitio web. En términos generales, un generador de sitio estático (SSG) improvisa con operaciones codificadas a mano y un CMS completo. Esta configuración es perfecta para la mayoría de sitios web o proyectos de aplicaciones web, no procesados ​​en el lado del servidor. Debido a la tendencia, los desarrolladores están cambiando el webtask.io programa para manejar sus diferentes puntos finales de servidor. Junto con una tendencia significativa para el desarrollo de aplicaciones web, este artículo detalla los procesos que los desarrolladores experimentan para el crecimiento de sus sitios estáticos y "sin servidor" aplicaciones web.

¿Qué son los generadores de sitios estáticos?

En detalle, los desarrolladores que utilizan State Site Generators inician el proceso generando un sitio web solo HTML. Al ser solo HTML, el sitio se ejecuta principalmente a partir de plantillas y datos sin procesar. Como se mencionó, los datos sin procesar también se clasifican como "archivos de rebajas". Para una mejor comprensión, los archivos de rebajas (Enlace: https://guides.github.com/features/mastering-markdown/) son archivos de texto genéricos que usan dialectos del lenguaje de rebajas. El formato de texto sin formato contiene símbolos de texto para crear formatos con textos que incluyen negrita, cursiva, sangría, encabezados y pantallas. Estos archivos no requieren relativamente conocimientos de programación y son el tipo más básico de sitio web para crear, a diferencia de los sitios web dinámicos. Por lo tanto, cada página web del sitio tiene su propio archivo HTML con contenido fijo del sitio web que muestra el mismo para cualquier usuario en cualquier plataforma. El resultado, una compilación que se transfiere a su servidor en vivo.

Sitios estáticos versus sitios dinámicos

En comparación, los sitios web estáticos se basan en código HTML y CSS del lado del cliente. Cuando un cliente solicita de un sitio web de servidor estático, los archivos HTML se empaquetan cuidadosamente en un sitio que se puede mostrar inmediatamente en los dispositivos invitados. Algunos generadores de sitios estáticos populares incluyen Jekyll, que es compatible con Github Pages, y Página siguiente . Por el contrario, los sitios web dinámicos se basan en lenguajes de scripting del lado del cliente y del lado del servidor. En cuanto a algunos ejemplos, JavaScript (enlace: https://www.javascript.com), PHP (enlace: https: //www.php.net) y ASP (enlace: https: //www.w3schools.com/ asp / webpages_intro.asp) son scripts "dinámicos del lado del servidor". Como explicación, la ejecución con un servidor dinámico HTTP envía archivos al navegador. Al mismo tiempo, el generador crea un nuevo archivo HTML cada vez que el usuario final llama a una página.

¿Qué es la oleada?

Surge es un servicio para implementar y alojar sitios web y aplicaciones estáticos. Puede utilizarlo para alojar proyectos creados con generadores de sitios estáticos como Gatsby.jsJekyll. Cualquier proyecto personalizado creado con HTML, CSS y JavaScript del lado del cliente también funcionará. Su plan gratuito es óptimo para casi cualquier sitio estático, y la configuración del servicio se puede realizar con solo unas pocas teclas en la línea de comandos. Hay una versión premium disponible que agrega algunas características adicionales como SSL personalizado, protección con contraseña y más.

¿Por qué debería usar Surge?

Surge es una herramienta muy conveniente con la que cualquier desarrollador web front-end debería familiarizarse. Es increíblemente sencillo de usar y puede publicar un sitio estático en Internet literalmente en segundos. Todo lo que requiere la publicación web son algunos comandos en la línea de comandos. La mejor parte es que no se requiere inversión. Además, los usuarios pueden agregar dominios personales a sus proyectos, compartir proyectos con otros usuarios y crear páginas de error 404 para dirigir a los clientes a otras páginas web. Surge incluso tiene algunos beneficios únicos de los que carecen otros implementadores de sitios estáticos populares (consulte "Comparación de páginas de Surge y Github").

¿Es Surge un servicio gratuito?

Como se indicó anteriormente, Surge no requiere ningún costo de uso. Sin embargo, hay un Surge Professional que viene con más beneficios para los usuarios que estén dispuestos a invertir las tarifas adicionales. Esta versión premium del servicio comienza en $ 30 por mes. Específicamente, con el cargo adicional, puede crear proyectos profesionales ilimitados, tener un SSL personalizado y tener un sitio web seguro con https. Además, puede compartir recursos, desarrollar redireccionamientos dentro de su sitio y proteger sus proyectos con contraseñas.

Si simplemente planea publicar archivos fuente para crear un sitio web personal o de pequeña escala, entonces el plan gratuito debería ser suficiente. Sin embargo, para cualquiera que dependa regularmente de Surge para publicar proyectos, Surge Premium también puede considerarse una opción inteligente.

Aumento de precios

Instalación de Surge

Instalar Surge y configurar una cuenta es extremadamente simple e intuitivo. Simplemente abra una nueva ventana de terminal y escriba el siguiente comando:

NPM instalar sobretensiones -global

(Nota: este paso asume que Node y npm ya están instalados en su sistema. De lo contrario, puede instalar la última versión de ambos desde el Sitio web de Node.js.)

Para verificar si el sitio web Node.js. está instalado correctamente, diríjase a la línea de comando e ingrese 'nodo -v' para el estado.

La primera vez que se configura, Surge le pedirá que configure una cuenta. Los únicos requisitos son proporcionar una dirección de correo electrónico y una contraseña, y luego verificar su correo electrónico. Al completar este paso, ahora estará configurado con una cuenta Surge y estará listo para implementar en su servicio.

Comandos de sobretensión

Implementar su sitio

Para usar su sitio web estático para Surge, primero busque la ruta del archivo del directorio del proyecto que desea implementar. Como ejemplo, voy a implementar un proyecto ubicado en / Users / air / surge-test.

Una vez que sepa la ruta del archivo del directorio para implementar, ejecute el siguiente comando en una ventana de terminal:

oleada

Aparecerá su nombre de usuario (es decir, dirección de correo electrónico). Luego, solo necesitará proporcionar la ruta del archivo para el proyecto:

implemente su sitio estático en Surge

Ingrese la ruta completa del archivo, luego presione enter.

El programa de aumento proporcionará automáticamente un nombre de dominio utilizando palabras al azar. También puede crear cualquier dominio personalizado si aún no está en uso. Ingrese su nombre de dominio elegido, luego presione enter.

(Nota: si el nombre de dominio personalizado que ingresó ya está en uso, verá un mensaje de error.

Anulado: no tienes permiso para publicar en [ ]

Una vez que se complete la implementación, verá un mensaje de éxito en su terminal. El nombre de dominio y la dirección IP del proyecto le mostrarán dónde puede acceder a la implementación en vivo.

despliegue de sobretensión

Ingrese el nombre de dominio en su navegador web y ahora debería ver su sitio en vivo:

implementación de sitios estáticos con aumento

Agregar un nombre de dominio personalizado 

El uso de un CNAME Record

De forma predeterminada, Surge proporcionará un subdominio personalizado para cualquier sitio web que implemente en su servicio. Se verá algo así como your-custom-domain.surge.sh. Puede personalizar y seleccionar cuál es el subdominio (siempre que no esté ya en uso). Sin embargo, es probable que desee utilizar su propio dominio personalizado para cualquier proyecto profesional.

Para hacerlo, querrá agregar dos nuevos registros CNAME en el panel DNS de su proveedor de dominio. Uno tendrá un nombre de host de @ y el otro tendrá un nombre de host de www. Ambos registros CNAME apuntarán a la siguiente dirección IP:

na-west1.surge.sh

Usando año A grabar

Si por alguna razón, su proveedor de dominio no permite registros CNAME, puede establecer un registro A como alternativa. Haga que el registro A apunte a una dirección IP de 45.55.110.124.

Uso de subdominios personalizados

También puede usar cualquier subdominio personalizado para apuntar a Surge, como sub.my-cool-site.com. Para hacerlo, querrá configurar un nuevo registro CNAME. Esto debería conducir a la misma dirección IP na-west1.surge.sh anterior, pero esta vez el nombre de host será *. El * nombre de host es un comodín. Esto significa que cualquier subdominio aparte del dominio principal será válido y estará permitido.

El programa de aumento reconocerá estos cambios de DNS de inmediato. Sin embargo, puede llevar tiempo propagarse a otros lugares, por lo general no más de 24 a 48 horas.

Implementación de proyectos mediante dominios personalizados

Una vez que la configuración de DNS haya entrado en vigor, ahora puede implementar su proyecto. Solo deberá indicar el dominio que le gustaría usar. Para hacerlo, ejecute el comando Surge en su terminal. Indique la ruta del archivo a su proyecto primero, luego el dominio personalizado después, así:

surge filepath / of / project a-cool-custom-domain.com

Vincular dominios personalizados a proyectos

Es posible que desee vincular su dominio al proyecto, de modo que no tenga que ingresarlo cada vez que implemente. Puede hacerlo usando el comando echo, dirigiéndolo a un archivo CNAME, así:

echo a-cool-custom-domain.com> CNAME

Compartiendo su proyecto Surge

Sunlight Media LLC: Compartiendo su proyecto Surge

Para otorgar permiso de publicación a otros usuarios de Surge, primero debe publicar su proyecto. Luego, escriba el comando agregar en la línea de comandos para comenzar a agregar colaboradores por su dirección de correo electrónico.

sobretensiones -add colaborator@email.com

Los invitados invitados a su proyecto y que hayan aceptado su invitación ahora pueden publicar sus archivos de origen en el mismo dominio.

 


Listado de proyectos Surge

Para ver todos los proyectos que ha publicado utilizando Surge, escriba este sencillo comando Surge en su línea de comandos. Esto generará una lista de todos sus proyectos.

lista de oleadas

Adición de páginas de error 404 personalizadas

Si prefiere reemplazar la página de error 404 predeterminada por una personalizada, todo lo que tiene que hacer es agregar un archivo 404.html a su proyecto Surge. Cuando esté listo para implementar los nuevos archivos 404, simplemente ordene Surge.

 

Crear un .surgeignore filete, / h2>

Al igual que el archivo .gitignore en el ecosistema de Git, Surge ofrece su propio archivo de ignorar. Puede configurar una lista de archivos y directorios que Surge ignorará en el momento de la implementación. Esto es útil para omitir archivos que solo pueden ser relevantes durante el proceso de desarrollo. Todo lo que desee mantener en privado es bueno incluirlo aquí también.

Para configurar esto, cree un nuevo archivo llamado .surgeignore en la raíz de la carpeta de su proyecto. Dentro de este archivo, puede enumerar cualquier archivo y directorio que le gustaría ignorar. Algunos ejemplos comunes pueden incluir node_modules, bower_components y otros. También puede ignorar tipos de archivos específicos que no son relevantes para la versión de producción de un sitio. Agregar * (el símbolo comodín) antes de la extensión (es decir, * .swp, * .psd, etc.) logrará esto.

Eliminar sitio de Surge

Si, por alguna razón, desea eliminar su sitio web, puede hacerlo fácilmente con el comando Surge teardown, seguido del dominio de su proyecto.

desmontaje por oleada tu-dominio.com

Antes de intentar eliminar su proyecto, asegúrese de que su versión de Surge esté actualizada a la última versión.

Comparación de páginas Surge y Github

Similar a Surge, otro popular servicio de alojamiento estático alternativo es Páginas de Github. Este servicio gratuito permite a los usuarios alojar sus proyectos personales de sitios estáticos en un repositorio de Github. Github Pages cuenta con una reputación extremadamente conocida entre los desarrolladores web de cualquier calibre como uno de los servicios de alojamiento estático mejor clasificados. Se pueden construir dos tipos de páginas ”Páginas de proyecto o páginas de Usuario y Organización” que se pueden crear bajo el dominio github.io. Por supuesto, también tiene la libertad de utilizar un dominio personalizado. Github recomienda explícitamente que cualquier proyecto que esté destinado a lograr fines comerciales no debe publicarse utilizando su servicio de alojamiento. Por lo tanto, si bien es posible que no pueda acomodar sitios web a gran escala, Github Pages es perfecto para usos no comerciales o personales.

Existen ligeras variaciones entre las páginas del Proyecto y las páginas de Usuario y Organización. Las páginas del proyecto se pueden publicar desde múltiples ubicaciones de origen, incluidas las ramas maestra y "GH-pages". Sin un dominio personalizado, el dominio de publicación predeterminado sería https: // .github.io /. Por otro lado, las páginas de Usuario y Organización están ubicadas en la rama maestra debajo de su repositorio de Github. Se publican con el dominio https: // .github.io.

Beneficios de Surge

Si bien Github Pages es, sin duda, una herramienta poderosa, Surge ofrece algunos beneficios de los que carece incluso Github Pages. Uno de estos beneficios es el enrutamiento del lado del cliente. Dentro de su proyecto Surge, puede redirigir a los clientes a un archivo HTML "de respaldo" (200.html) si solicitan una ruta inexistente. Esto es beneficioso porque en lugar de mostrar un error 404 alarmante, Surge simplemente servirá el archivo de respaldo.

Otro beneficio notable de Surge es que los usuarios pueden implementar cualquier cambio nuevo en su sitio en cuestión de segundos. Como se indicó anteriormente, simplemente escribiendo el comando surge en la línea de comandos, cualquier cambio que haya realizado se puede ver instantáneamente en línea. Especialmente útil durante la experimentación de prueba, las ediciones simples en los sitios web de los usuarios son más fáciles de administrar. Debido a la opción de actualizar inmediatamente la página web, los cambios en el navegador web son más notorios. Alternativamente, los usuarios de Github Page continuarán impulsando y comprometiendo cambios en sus interfaces en línea y lucharán con procesos más largos y tediosos. A largo plazo, el sitio estático correcto evita tiempos confusos para desarrolladores de software.

 

Biografía del autor

Crystal es estudiante de último año en una escuela secundaria pública en Santa Clarita, CA. Ha invertido en tecnología desde su segundo año, cuando tomó su primer curso de Desarrollo web y utilizó Dreamweaver para diseñar sus primeros sitios web.

Se diversificó en cursos de informática de nivel universitario donde se convirtió en competente en programación Java. Durante el verano de 2018, Crystal asistió a un programa selectivo llamado Kode with Klossy, donde adquirió habilidades en HTML5 / CSS, Javascript y experimentó con el desarrollo de simulaciones de realidad virtual y aumentada.

Crystal espera continuar sus estudios en informática y tecnología en su educación postsecundaria.

2 Comentarios

  • soundos Mayo 29, 2020 6 en: 45 pm

    fantástico blog, gracias por publicarlo.

  • Urslan.Ali Mayo 31, 2020 3 en: 28 pm

    estoy recibiendo el siguiente problema, por favor avise cómo resolverlo
    Abortado: no existe ese archivo o directorio: C: \ Users \ lenovo \ Desktop \ UrduBootCamp \ UrduBootCamp \ UrslanAli.surge.sh

Publicar un comentario

Los comentarios están moderados. Su correo electrónico se mantiene privado. Los campos obligatorios están marcados *