Deploy desde Github

En este tutorial usted aprenderá a realizar un deploy de una aplicación desde el respositorio de Github hacia un servicio como Github Pages, Vercel, Netlify, etc.

Crear un repositorio en Github

  1. Ingresar a Github y crear un nuevo repositorio.

  2. Darle un nombre al repositorio y seleccionar si será público o privado.

  3. Crear el repositorio.

Clonar el repositorio

  1. Copiar la URL del repositorio.

  2. Abrir la terminal y ejecutar el siguiente comando:

git clone <URL>

Crear un proyecto

En esta práctica vamos a utilizar tecnologías Html5, Css3 y JavaScript para crear un Portafolio Personal.

  1. Crear un archivo index.html y agregar el siguiente código:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1>Portafolio</h1>
    </header>
    <main>
        <section>
            <h2>Sobre mi</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>
        </section>
        <section>
            <h2>Proyectos</h2>
            <ul>
                <li>Proyecto 1</li>
                <li>Proyecto 2</li>
                <li>Proyecto 3</li>
            </ul>
        </section>
        <section>
            <h2>Contacto</h2>
            <p>Correo:
                <a href="mailto:">dmsaavedra@espe.edu.ec</a>
            </p>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Portafolio</p>
    </footer>
</body>

</html>
  1. Crear un archivo styles.css y agregar el siguiente código:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

main {
    padding: 1rem;
}

section {
    margin-bottom: 1rem;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

  1. Agregar los archivos al repositorio:

git init
git add .
git commit -m "Primer commit"

Github Pages

Habilitar Github Pages

  1. Primero es necesario que creemos el repositorio.

  2. Asignamos un nombre.

  3. Damos clic al botón Create Repositorio.

    1. Vinclulamos el repositorio local con el repositorio en línea.

    2. Ahora vinculamos nuestro repositorio local con el repositorio en línea.

    3. Actualizamos el navegador web.

    4. Nos dirigimos a la seccion de las Ramas y buscamos la rama gb-pages, de la misma forma al no encontrarla damos clic en la opción Create branch gh-pages from main.

    1. Verificamos la url generada para acceder a nuestra página web en la sección de Settings.

Tip

Si no se actualiza y sale algo como esto, no te preocupes, solo espera unos minutos y vuelve a intentar.

  1. Esperamos a que se actualice la página y verificamos que la página se haya desplegado correctamente.

  1. Ahora podemos acceder a nuestra página web desde la url generada.

¡Listo! Hemos desplegado nuestra página web en Github Pages.

Tip

Cada vez que actualicemos nuestro repositorio, la página web se actualizará automáticamente. De no ser así basta con eliminar la rama gh-pages y volver a crearla.

Vercel

Tambien es posible realizar el mismo proceso en Vercel, para ello necesitamos tener una cuenta en Vercel y un repositorio en Github.

Podemos utilizar el respotorio que creamos en el tema anterior.

Crear un proyecto en Vercel

  1. Ingresar a Vercel y crear un nuevo proyecto.

  1. Seleccionar el repositorio de Github.

  1. Seleccionamos el botón Deploy.

  1. Esperamos a que se despliegue el proyecto.

  1. Una vez desplegado, podemos acceder la sección Continue Dashboard.

  1. Accedemos al botón Visit

  1. Visualizamos nuestro proyecto desplegado en Vercel.

¡Listo! Hemos desplegado nuestra página web en Vercel.