Publicado el 31 octubre, 2023 por David Boo. / Sin comentarios

Buenas, hoy aprenderás a crear y alojar una web gratis: haremos un portfolio en minutos y lo alojaremos de forma gratuita. Esta web será lo suficientemente completa para mostrar tus proyectos a futuros empleadores o amigos y conocidos.

¿Qué necesitarás?

Para crear hacer este tutorial necesitarás lo siguiente:

Un editor de código, yo recomiendo Visual Studio Code.
Una cuenta de correo electrónico para crear las cuenta de GitHub y Netlify.
Una cuenta de ChatGPT.

La idea es que la hagas usando HTML y CSS. Con la ayuda de ChatGPT, podrás agilizar el proceso y tenerla lista en minutos.

¡Vamos a ello!

Índice de contenidos

1 Crea tu porfolio
2 Alojar la web gratis
- 2.1 Alojar la web gratis en Github
- 2.2 Alojar la web gratis en Netlify
3 Resumen

Crea tu porfolio

Si la parte de crear la web no te interesa, salta a la parte de alojamiento gratuito.

En la cuenta de ChatGPT, deberás introducir un prompt, que te devuelva la estructura de una web, con su HTML y sus estilos CSS, en este caso, para una web tipo porfolio, buscarás que sea una estructura tipo grid o de retícula que quizás sea lo más tradicional cuando se piensa en un porfolio web y por supuesto que sea responsive, así que yo le he pedido esto a ChatGPT:

“Creame un documento html con su correspondiente CSS y los elementos estructurados en forma de grid, para poder crear una web tipo portfolio. Es importante que sea responsive.”

En unos segundos responde con lo siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Portfolio</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 20px;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .item {
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .item img {
            max-width: 100%;
            height: auto;
        }

        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>Mi Portfolio</h1>
    </header>

    <div class="container">
        <div class="item">
            <img src="imagen1.jpg" alt="Proyecto 1">
            <h2>Proyecto 1</h2>
            <p>Descripción del proyecto 1.</p>
        </div>
        <div class="item">
            <img src="imagen2.jpg" alt="Proyecto 2">
            <h2>Proyecto 2</h2>
            <p>Descripción del proyecto 2.</p>
        </div>
        <div class="item">
            <img src="imagen3.jpg" alt="Proyecto 3">
            <h2>Proyecto 3</h2>
            <p>Descripción del proyecto 3.</p>
        </div>
        <div class="item">
            <img src="imagen4.jpg" alt="Proyecto 4">
            <h2>Proyecto 4</h2>
            <p>Descripción del proyecto 4.</p>
        </div>
        <!-- Agrega más proyectos aquí -->
    </div>

    <footer>
        <p>&copy; 2023 Mi Portfolio</p>
    </footer>
</body>
</html>

Con un solo prompt ya me devuelve algo con forma de web, si creas un archivo .html, pegas ese código, lo guardas y lo ejecutas, verás que tienes algo parecido a un porfolio muy simple, ¡haz la prueba!

No obstante voy a cambiar algunas cosas, quiero que tenga un enlace donde poder poner la URL a mis proyectos y los estilos no me convencen en absoluto, así que le digo a ChatGPT:

“quiero que los elemento item sean clicables y lleven al URL del proyecto”

a lo que me envía esta parte del HTML modificada:

...
<div class="item">
            <a href="url_proyecto_1">
                <img src="imagen1.jpg" alt="Proyecto 1">
                <h2>Proyecto 1</h2>
                <p>Descripción del proyecto 1.</p>
            </a>
        </div>
        <div class="item">
            <a href="url_proyecto_2">
                <img src="imagen2.jpg" alt="Proyecto 2">
                <h2>Proyecto 2</h2>
                <p>Descripción del proyecto 2.</p>
            </a>
        </div>
        <div class="item">
            <a href="url_proyecto_3">
                <img src="imagen3.jpg" alt="Proyecto 3">
                <h2>Proyecto 3</h2>
                <p>Descripción del proyecto 3.</p>
            </a>
        </div>
        <div class="item">
            <a href="url_proyecto_4">
                <img src="imagen4.jpg" alt="Proyecto 4">
                <h2>Proyecto 4</h2>
                <p>Descripción del proyecto 4.</p>
            </a>
        </div>
        <!-- Agrega más proyectos aquí -->
    </div>
...

y para los estilos se me ha ocurrido pedirle lo siguiente:

“dale un aspecto diferente, cambiale los colores, que se parezca un poco más a facebook por ejemplo”

obteniendo como resultado:

body {
  font-family: "Arial", sans-serif;
  background-color: #f0f2f5;
  margin: 0;
  padding: 0;
}

header {
  background-color: #1877f2;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-size: 24px;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.item {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.item:hover {
  transform: translateY(-5px);
}

.item img {
  max-width: 100%;
  height: auto;
}

.item h2 {
  font-size: 20px;
  margin-top: 10px;
}

.item p {
  font-size: 16px;
  margin-top: 10px;
}

.item a {
  text-decoration: none;
  color: #333;
}

footer {
  background-color: #1877f2;
  color: #fff;
  text-align: center;
  padding: 20px;
}

Muy sencillo, en minutos tienes una web donde colgar tus proyectos. Me he permitido añadir unos detalles como una sección que hable sobre mí y un menú que al clicar te dirige a sobre mí y a proyectos. Además de unas imágenes que representan los diferentes proyectos.

La web tendría el siguiente aspecto:

Ejemplo de crear y alojar una web gratis

Alojar la web gratis

Nuestro siguiente paso para crear y alojar una web gratis será resolver el problema del hosting. Para alojar la web de forma gratuita te voy a enseñar como hacerlo de dos formas diferentes utilizando dos servicios distintos: GitHub, por un lado, y por el otro Netlify.

Alojar la web gratis en Github

Instala Git

Para utilizar GitHub como alojamiento y puedas seguir el tutorial, te recomiendo que tengas instalado Git en tu ordenador, simplemente vas a la página de Git y lo descargas para tu sistema operativo, la instalación no tiene mucho misterio. Después de instalarlo podrás utilizarlo desde la consola que tengas en Visual Studio, el CMD, powershell, Git además incluye Git Bash desde donde podrás ejecutarlo también.

Registrate en GitHub

Y, por otro lado, necesitas ir a la página de GitHub y crearte una cuenta si no tienes una. Junto con tu email y una contraseña te la puedes crear en un momento.

En este punto ya tendrás Git en tu equipo y una cuenta de GitHub, así que…

Crea un nuevo repositorio

En tu cuenta de GitHub deberás crear un repositorio nuevo, para ello desde tu panel principal ve a «Create repository».

Aquí rellena los campos, el único obligatorio es el nombre del repositorio.

De la página que nos aparecerá a continuación guarda el siguiente código, lo usarás más adelante, será muy parecido a este, pero con tu repositorio:

git remote add origin https://github.com/turepositorio/portfolio.git
git branch -M main
git push -u origin main

Subir repositorio

Ahora vuelve a Visual Studio Code y haz lo siguiente para añadir los cambios a tu versión y confirmarlos:

git add .
git commit -m "el mensaje que tú quieras / ejemplo: v1.0 del porfolio"

Seguramente te pedirá que te identifiques, si no lo has hecho antes, así que sigue las instrucciones de la consola y ejecuta git config --global user.email y git congif --global user.name seguido de tu email y tu nombre respectivamente:

Y ahora es cuando te toca pegar el pedazo de código que copiaste hace un momento en la consola y ejecutarlo, es probable que te pida que le des permiso a GitHub para que se enlace con el Git de tu equipo. Una vez le das los permisos se termina de ejecutar las instrucciones y puedes ir a ver el estado de tu repositorio en GitHub para que veas como ahora tu código que estaba en local está ahora también online.

Obtener el alojamiento y el enlace a tu página

Tu repositorio ahora tiene un aspecto parecido a esto. Ahora, desde la opción «Settings», accede al menú «Pages», en «Branch» selecciona tu rama principal (en el mío es main y en el tuyo seguramente también si has seguido las instrucciones) y haz clic en «Save».

Le va a costar unos minutos el proceso durante el cual no notarás ningún cambio, pero pasados uno 2-3 minutos, vuelve a tu repositorio y tendrás esta opción:

Haciendo clic ahí, encontrarás el enlace a tu página, como es:

https://dbpcaronte.github.io/portfolio/

Alojar la web gratis en Netlify

Si has seguido los pasos anteriores, ahora tienes cuenta de GitHub, así que podrás loguearte en Netlify con ella. Este proceso es mucho más sencillo que el realizado en GitHub.

Registrarse en Netlify

Lo primero de todo será registrarse en Netlify, si bien hacerlo enlazando la cuenta con GitHub es muy sencillo con correo electrónico y contraseña también lo es. Al hacerlo con GitHub simplemente tienes que autorizar su uso.

Al aceptar la autorización, tendrás que introducir unos datos irrelevantes, pero necesarios. En el siguiente paso, podrás realizar el despliegue de tu web o aplicación utilizando nuestro repositorio de GitHub. Sin embargo, te voy a explicar como hacerlo de forma muy sencilla, arrastrando la carpeta del proyecto, con el clásico drag and drop.

Subir proyecto gratis y obtener el enlace

Una vez registrados y en el panel principal y también en “sites”, verás esta cajita, aquí es donde vas a arrastrar la carpeta del proyecto:

Hecho eso, vuelve al panel principal y tendrás el enlace a tu porfolio o web:

Por defecto, Netlify no proporciona un enlace «serio» por lo que si vas a mostrar tu sitio web a futuros empleadores, quizá podrías plantearte renombrarlo, para ello ve al «site configuration» y cámbialo si quieres.

Este es el enlace al portfolio que he creado yo:

https://porfolio-caronte.netlify.app/

Resumen

Esto sería todo, si has llegado hasta el final has aprendido cómo crear y alojar una web gratis, de forma sencilla, en minutos, con ayuda de ChatGPT. Este ejemplo de web sería lo más simple que pueden alojar servicios como GitHub pages o Netlify, pero se podrían hacer este mismo uso para aplicaciones más complejas.

No obstante, por un lado, generar código usando IA tiene ciertos inconvenientes si no sabes lo que estás haciendo, ya que puede limitarte en el desarrollo del mismo para hacer algo más complejo, y, por otro lado, estos alojamientos gratuitos tienen ciertas limitaciones en cuanto a recursos que se pueden usar de forma gratuita.

Aun así, te animo a que explores y te atrevas a subir otro tipo de proyectos web, con todo lo que vas aprendiendo sobre desarrollo y diseño web. Incluso, ¡podrías compartir tu porfolio en los comentarios!

El código que he usado ha sido prácticamente el que ha proporcionado ChatGPT, no obstante queda aquí a tu disposición en el repositorio que he creado en GitHub: https://github.com/dbpcaronte/portfolio