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:
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!
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>© 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:
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.
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.
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…
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 mainAhora 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.
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/
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.
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.
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/
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
En esta guía práctica, te explicamos qué es el presupuesto de rastreo, por qué es… Leer más
¿Alguna vez te has encontrado con un mensaje que te invita a actuar, ya sea… Leer más
Una de las preguntas más comunes entre los desarrolladores web que comienzan a usar JavaScript… Leer más
Descubre qué es y para qué sirve la preimpresión digital para conseguir una buena impresión… Leer más
Ampliamos información para las redes sociales. Descubre cómo gestionar correctamente los consentimientos necesarios en las… Leer más
Michael Bierut es mucho más que un diseñador; es un educador ejemplar, un escritor locuaz… Leer más