Cómo desplegar una aplicación web con Netlify

Simone Rosso

hace 3 meses

En esta guía, se explorará cómo hacer un despliegue de una aplicación web utilizando Netlify. Netlify es una plataforma de hosting que permite a los desarrolladores desplegar sitios web estáticos y aplicaciones web dinámicas con facilidad. Este tutorial guiará paso a paso, desde la configuración inicial hasta el despliegue de un sitio web, utilizando ejemplos prácticos que podrán ser subidos a un repositorio de GitHub.

1. Qué es Netlify y para qué sirve

Se trata de una plataforma que ofrece servicios para el despliegue y la gestión de sitios web y aplicaciones. Su fortaleza reside en la simplicidad del proceso de despliegue y en las características avanzadas que proporciona, como la integración continua (CI/CD), funciones serverless, y un sistema de CDN (Content Delivery Network) para mejorar el rendimiento.

Ventajas de usar Netlify:

Despliegue Fácil y Rápido: Automatización del despliegue con solo unos clics.
Integraciones: Compatible con GitHub, GitLab y Bitbucket.
SSL Gratuito: Certificados SSL automáticos.
Funciones Serverless: Implementación de funciones backend sin necesidad de infraestructura compleja.
Optimización: Integración con CDN para una entrega rápida de contenido.

2. Configuración inicial

Crear una cuenta en Netlify

Ir a Netlify y hacer clic en «Sign up».
Registrarse con una cuenta de GitHub, GitLab, Bitbucket o con un email. Para este tutorial, se utilizará GitHub.
Autorizar a Netlify a acceder a la cuenta de GitHub.

3. Creación de un proyecto sencillo

Se creará un proyecto sencillo en HTML y JavaScript que se desplegará en Netlify. El repositorio de este tutorial se podrá clonar desde github.

index.html



<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Mi Proyecto deployado con Netlify</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <h1>¡Hola, Netlify!</h1>

    <button onclick="mostrarAlerta()">Saluda</button>

    <script>

        function mostrarAlerta() {

            alert('¡Hola desde Netlify!');

        }

    </script>

</body>

</html>

styles.css

body {

    font-family: Arial, sans-serif;

    text-align: center;

    background-color: #f0f0f0;

}

h1 {

    color: #333;

}

button {

    padding: 10px 20px;

    font-size: 16px;

    cursor: pointer;

}

4. Subida del proyecto a GitHub

Antes de desplegar en Netlify, es recomendable subir el proyecto a un repositorio en GitHub.

Pasos para subir el proyecto:

Iniciar sesión en la cuenta de GitHub y crear un nuevo repositorio llamado mi-proyecto-netlify.
Abrir la terminal y navegar hasta la carpeta del proyecto.
Ejecutar los siguientes comandos para inicializar un repositorio local, añadir los archivos y hacer push a GitHub:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/tu-usuario/mi-proyecto-netlify.git
git push -u origin main

Asegurarse de reemplazar tu-usuario con el nombre de usuario en GitHub.

5. Despliegue en Netlify

Para desplegar el proyecto, primero será necesario conectar Netlify con la cuenta de GitHub. Esto permite que que esta plataforma acceda al repositorio y gestione el despliegue automáticamente.

Inicia sesión en Netlify

Ir a netlify.com y acceder a la cuenta. Si no se tiene una cuenta, registrarse utilizando GitHub o correo electrónico.
En el panel de Netlify, haz clic en «Add new site». Hay tres opciones:
1. Import an existing project, para conectar con un repositorio online como github o bitbucket.
2. Start from a template, para elegir entre templates preexistentes y modificarlos. La mayoría están hechos con Next.js.
3. Deploy manually, para subir una carpeta directamente desde el ordenador

En este tutorial se usará la primera opción.

En la pantalla de opciones de Git, seleccionar «GitHub» para conectar la cuenta de GitHub con Netlify.
Se abrirá una ventana emergente pidiendo la autorización para que pueda acceder al repositorio.
Después de autorizar, mostrará una lista de repositorios en GitHub. Buscar y seleccionar el repositorio que contiene el proyecto.

Configuración del despliegue

Una vez seleccionado el repositorio, configurar los ajustes de despliegue para que pueda construir y publicar el sitio correctamente.

En «Branch to deploy» (Rama a desplegar), seleccionar la rama principal del repositorio. Esto suele ser main o master, dependiendo de cómo esté configurado el repositorio. Asegurarse de que esta rama contenga la versión más actual del proyecto.
Para proyectos estáticos simples (como los basados solo en HTML, CSS y JavaScript), dejar el campo «Build command» (Comando de construcción) vacío. Esto indica a Netlify que no necesita ejecutar ningún comando especial para construir el proyecto antes del despliegue.

Especificar el directorio de publicación

En «Publish directory» (Directorio de publicación), definir la carpeta dond buscará los archivos a desplegar. Para proyectos estáticos simples, dejar este campo vacío o usar para indicar que debe publicar los archivos desde el directorio raíz. Si el proyecto genera archivos en un directorio específico (por ejemplo, build o dist), ingresar el nombre de esa carpeta aquí.

Realizar el despliegue

Una vez configurados todos los ajustes, hacer clic en «Deploy site» (Desplegar sitio). Netlify comenzará a construir y desplegar el sitio web. Este proceso puede tardar algunos minutos, dependiendo del tamaño y la complejidad del proyecto.

Verificación y ajustes posteriores

Una vez que el despliegue esté completo, Netlify proporcionará una URL donde se podrá ver el sitio en vivo.

Abrir esta URL en el navegador para asegurarse de que el sitio se muestra correctamente y que todas las funcionalidades, como los botones, están operativas. Para este tutorial ir a helpful-dragon-172226.netlify.app.
En el panel de control de Netlify, se pueden realizar ajustes adicionales como configurar un dominio personalizado, habilitar HTTPS para mayor seguridad, y explorar otras características avanzadas de Netlify.

Con estos pasos, se habrá llevado el proyecto a Netlify con éxito. Netlify no solo facilita una publicación fluida y eficiente del sitio web, sino que también asegura que esté siempre actualizado con los últimos cambios del repositorio. Con cada commit, el proyecto se sincroniza automáticamente, garantizando que el sitio web esté siempre al día.

Felicitaciones por completar el despliegue del proyecto y aprovechar la simplicidad y elegancia que Netlify ofrece.

¿Quieres aprender más sobre desarrollo y diseño web? Síguenos en redes sociales y Canal de YouTube.