Con todas las herramientas y frameworks de desarrollo web de moda, crear un sitio web es cada vez más complicado. Pero a veces, no necesitas mucha interactividad en tu sitio. Si te centras en hacer llegar la información al espectador y no necesitas una funcionalidad compleja, un sitio estático puede ser la elección más acertada.
En este tutorial, aprenderás qué es un sitio estático, incluyendo sus ventajas, sus limitaciones y cómo crear y desplegar un sitio web personal sencillo creado con HTML y Bootstrap de forma gratuita utilizando GitHub Pages.
¿Qué es GitHub Pages?
GitHub es una plataforma web para alojar repositorios Git y colaborar en proyectos de software. Ofrece herramientas para compartir y hacer un seguimiento de los cambios en el código, gestionar y revisar el código, y la posibilidad de crear y revisar pull requests.
¡No confundas Git y GitHub! GitHub es un servicio de alojamiento que permite la colaboración entre desarrolladores, mientras que Git es el software de control de versiones local que utilizas para guardar instantáneas del estado de tu proyecto de software.
GitHub Pages es una de las mejores características de GitHub. Es un servicio que te permite alojar un sitio web estático directamente desde un repositorio de GitHub. Esto significa que puedes utilizar tu repositorio para almacenar el código y los archivos de tu sitio web, y GitHub los publicará automáticamente como un sitio web al que puedes acceder online.
En resumen, GitHub Pages es una forma rápida y sencilla de poner en marcha tu sitio web, y es especialmente útil para mostrar tu portafolio, proyectos de código abierto u otros contenidos estáticos.
Sitios web estáticos vs dinámicos
Como hemos visto, GitHub Pages proporciona una forma de desplegar sitios web estáticos. Pero, ¿cuál es la diferencia entre un sitio web estático y un sitio web dinámico?
Empecemos hablando del contenido de dichos sitios.
El contenido estático se refiere a los elementos del sitio web que siguen siendo los mismos para todos los usuarios, independientemente de quiénes sean o qué acciones realicen en el sitio. Esto puede incluir cosas como el texto, las imágenes y el diseño del sitio web, así como el código subyacente y los archivos que lo componen. Un sitio estático se entrega al usuario exactamente como está almacenado.
En cambio, el contenido dinámico es el que cambia en función de las acciones del usuario -como iniciar sesión, interactuar con un muro de pago o comentar una entrada de blog- o de otros factores, como la hora o la ubicación actuales.
Por ejemplo, un sitio web que muestra una imagen fija de un producto mostrará siempre la misma imagen a todos los usuarios (estático). En cambio, un sitio web que muestre la hora actual mostrará una hora diferente a cada usuario en función de su ubicación (dinámico).
En general, podemos decir que un sitio web es estático si sólo contiene HTML, CSS y JavaScript en el frontend, sin tecnologías de servidor como PHP o Python que interactúen con una base de datos.
Aunque no es posible construir sitios web dinámicos utilizando GitHub Pages, puedes utilizar fácilmente un CMS como WordPress, o generadores de sitios estáticos como Gatsby o Hugo.
Características principales de GitHub Pages
Veamos los puntos fuertes de GitHub Pages como servicio de alojamiento:
- Fácil configuración y publicación: GitHub Pages facilita la puesta en marcha con unos sencillos pasos. Puedes habilitar GitHub Pages para tu repositorio y especificar el origen de los archivos de tu sitio web, y GitHub publicará automáticamente tu sitio web y lo pondrá a disposición en una URL basada en tu nombre de usuario y nombre del repositorio.
- Dominios personalizados: Con GitHub Pages, puedes utilizar un nombre de dominio personalizado para tu sitio web en lugar de la URL predeterminada proporcionada por GitHub. Esto te permite utilizar tu propia marca y facilitar a los usuarios la búsqueda y el acceso a tu sitio web.
- Compatibilidad con HTTPS: GitHub Pages ofrece soporte para HTTPS, que permite conexiones seguras a tu sitio web. Esto es crucial para generar confianza en tu sitio.
- Compatible con Jekyll: GitHub Pages es compatible con Jekyll, un generador de sitios estáticos que te permite crear sitios web sofisticados utilizando plantillas y otras funciones. Esto facilita la creación de sitios web de aspecto profesional sin tener que escribir todo el código desde cero.
Limitaciones
Como ya se ha dicho, sólo puedes crear sitios estáticos con GitHub Pages. Si quieres construir un proyecto complejo con muchas funcionalidades necesitarías diferentes servicios de alojamiento. También debes tener en cuenta que no puedes utilizar GitHub Pages para fines comerciales, como la gestión de un negocio online o el comercio electrónico.
GitHub Pages no permite que tu sitio tenga más de 1 GB, lo que significa que los archivos de tu repositorio no pueden superar esa cantidad de memoria. La mayoría de las veces, 1 GB es más que suficiente para un sitio estático; sólo asegúrate de comprimir tus imágenes.
También tiene un límite de ancho de banda suave de 100 GB al mes. Esta cantidad de ancho de banda sería suficiente para distribuir tu sitio web a unos miles de personas al mes, así que, a menos que tengas una audiencia enorme, no tendrás problemas.
Crear y Desplegar con GitHub Pages: Guía Paso a Paso
Crear una Página GitHub es un proceso sencillo y directo para alojar un sitio estático. Ten en cuenta que si necesitas algún tipo de conexión a bases de datos, deberás contar con un proveedor de bases de datos externo.
En la siguiente guía, aprenderás a crear una Página GitHub desde cero. Eso incluye crear un repositorio remoto, construir un sitio web personal responsivo con HTML y desplegarlo en la web con GitHub.
¡Manos a la obra!
1. Regístrate en GitHub
Para empezar, debes tener una cuenta activa en GitHub. Si no la tienes, ve a su página de registro. Rellenar el formulario no debería llevarte más de un par de minutos.
Después de registrarte, deberías poder crear un repositorio remoto.
2. Crea un repositorio remoto
Un repositorio es un directorio donde almacenas todo el código relacionado con un proyecto concreto.
Desde la página de inicio de GitHub, haz clic en el botón «Nuevo» o «Crear repositorio» situado en el panel izquierdo del sitio. Esto te redirigirá a un formulario donde rellenarás la información de tu repositorio.
Los siguientes pasos son cruciales:
- Establece el nombre de tu repositorio en
"yourusername".github.io. - Marca el botón público. Debes establecer el repositorio en Public para publicar tu sitio.
- Añade un README.
Sólo puedes tener un repositorio para una determinada cuenta personal u organización. Por eso el nombre del repositorio es tu nombre de usuario y el dominio github.io. Más adelante veremos cómo configurar un sitio desde un repositorio.
A menos que tengas GitHub Pro, sólo puedes publicar una página de GitHub si el repositorio es público. Ten esto en cuenta si no quieres compartir públicamente el código fuente de tu sitio.
Después de esto, deberías ver algo como lo siguiente:
Si ya tienes el código fuente funcional de tu sitio, puedes saltarte el flujo de trabajo habitual de Git y subir los archivos directamente en el repositorio.
Para ello, haz clic en el menú Add file de tu repositorio, y selecciona la opción Upload files. A continuación, selecciona los archivos de tu sitio web, con el archivo HTML principal llamado index.html. Recuerda poner también todos tus archivos CSS y JavaScript en el repositorio.
Por último, pulsa el botón Commit changes.
En la siguiente sección, construiremos una sencilla página web personal con HTML y Bootstrap. Luego la subiremos a GitHub y la configuraremos como página pública de GitHub con un dominio personalizado.
3. Construir un sitio personal
Empezaremos clonando el repositorio de GitHub que acabamos de crear. Para ello, asegúrate de que ya tienes instalado el cliente Git en tu ordenador. (Si no lo tienes, echa un vistazo a nuestro tutorial sobre Git y GitHub.)
Ve a la pestaña code de tu repositorio y copia la URL SSH en la opción SHH.
A continuación, abre un terminal o una línea de comandos. En la mayoría de las distribuciones de Linux y macOS, puedes utilizar el atajo Ctrl + Alt + T, o buscar Terminal en el menú de aplicaciones de tu sistema. En Windows, puedes utilizar el BASH de Git instalado por defecto con Git, el CMD, PowerShell o un cliente GUI.
En tu terminal, escribe git clone y la URL que has copiado. Esto descargará y creará una copia del repositorio remoto en tu máquina local para que puedas construir tu sitio web.
A continuación, entra en la nueva carpeta llamada yourusername.github.io con cd y ls. Deberías ver la carpeta .git, que contiene la configuración y los metadatos de tu proyecto, así como el archivo README.md si has creado uno.
Abre tu editor de texto favorito (como Sublime Text), y empecemos a crear tu sitio web.
En la raíz del repositorio, crea un archivo llamado index.html (este nombre es requerido por GitHub Pages) y escribe la típica estructura de código HTML:
<!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>Kinsta User</title>
</head>
<body>
</body>
</html>Como hemos dicho anteriormente, vamos a utilizar Bootstrap 5.0, un framework CSS de código abierto que nos ayuda a construir sitios web responsive más fácilmente. Como verás, no tendremos que utilizar CSS personalizado para este sitio en particular.
Para incluir Bootstrap en nuestra página, tendremos que incluir el CSS y JavaScript compilados a través de una CDN. Pega el siguiente código dentro del HTML <head> para poder utilizar el CSS de Bootstrap:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">De la misma manera, también incluiremos la CDN Devicon para poder utilizar iconos SVG de lenguajes y tecnologías de programación populares sin muchos problemas:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">Ahora, para incluir el JavaScript, inserta el siguiente código justo encima del final de la etiqueta </body>:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>Empezaremos creando una cabecera para nuestro sitio web. Será una cabecera oscura, con enlaces a nuestra página índice y a otras dos páginas — «Projects» y «Readind Logs» — que podrás crear más adelante:
<nav class="navbar navbar-dark navbar-expand-lg bg-dark ">
<div class="container-fluid">
<div class="mx-4">
<a class="navbar-brand" href="#">Kinsta User</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reading Log</a>
</li>
</ul>
</div>
</div>
</nav>Utilizamos la envoltura de Bootstrap navbar y navbar-expand-lg para crear un contenedor adaptable que se contrae cuando la anchura de visualización es inferior a 992px. Esto ocurre gracias a la opción de cuadrícula lg. Si quieres saber más sobre las opciones de cuadrícula, echa un vistazo a la página de diseño de Bootstrap.
Ahora, vamos a crear dos columnas responsivas dentro de un contenedor: una para una imagen gratuita de Unsplash y otra para una descripción de nosotros mismos:
<div class="container my-4 ">
<div class="row justify-content-center">
<div class="col-lg mb-lg-4">
<img src="image.jpg" class="img-fluid" alt="" srcset="">
</div>
<div class="col-lg mx-2 align-self-center">
<div class="my-3">
<h1 class="text-center">I'm a Kinsta User</h1>
<p>As a passionate software developer, I am deeply enthusiastic about creating and
developing software applications. I am constantly learning and experimenting with new
technologies and approaches, and I have a strong desire to create innovative and effective
solutions to complex problems. I am driven by my curiosity and love for problem-solving, and
I
am committed to producing high-quality, well-designed software that meets the needs of
users.
</p>
</div>
</div>
</div>
</div>Como puedes ver, estamos obteniendo una imagen de un archivo local, por lo que debe estar en el repositorio cuando empujemos nuestros cambios al repositorio de GitHub.
Por último, dentro de nuestro contenedor Bootstrap, utilizaremos iconos SVG de Devicon, junto con un poco de CSS interno para que destaquen nuestras habilidades:
<div class="my-4">
<div class="text-center mb-4">
<h1>My Skills</h1>
</div>
<div class="row ">
<style>
I {
font-size: 4em;
}
</style>
<div class="col">
<div class="text-center">
<h4>WordPress</h4>
<i class="devicon-wordpress-plain"></i>
</div>
</div>
<div class="col">
<div class="text-center">
<h4>Django</h4>
<i class="devicon-django-plain"></i>
</div>
</div>
<div class="col">
<div class="text-center">
<h4>Python</h4>
<i class="devicon-python-plain"></i>
</div>
</div>
<div class="col">
<div class="text-center">
<h4>GitHub</h4>
<i class="devicon-github-original" ></i>
</div>
</div>
</div>
</div>Como utilizamos la etiqueta HTML <i>, podemos tratarla como una fuente. Así, fijamos el tamaño de nuestros logotipos en 4 em declarándolo en la etiqueta style.
He aquí el resultado final de este sencillo sitio web personal:
¿Sabías que más del 50% del tráfico de los sitios web procede de dispositivos móviles? Como utilizamos Bootstrap, nos ahorramos mucha codificación CSS, y además conseguimos un sitio web responsivo, como puedes apreciar a continuación.
Puedes personalizar este sitio tanto como quieras. Aquí tienes el código fuente completo en GitHub, a tu disposición.
Incluso puedes adjuntar un CMS headless, como Ghost, utilizando una de nuestras soluciones completas de Alojamiento de Aplicaciones. Puedes conectarte directamente a tu repositorio de GitHub a través de tu panel de control MyKinsta y tener tu nuevo sitio funcionando en cuestión de minutos.
Es hora de empujar tus archivos. Para ello, ejecuta los siguientes comandos en tu terminal, en el nivel superior de tu proyecto.
git add .
git commit -m "Added website source code and image"
git pushAhora, podemos utilizar este sitio web para configurar nuestra página de GitHub.
4. Publicar una página de usuario en GitHub
En cuanto envíes el index.html al repositorio remoto con tu nombre de usuario, GitHub iniciará automáticamente un proceso de flujo de trabajo para configurar tu sitio online. Puede tardar un par de minutos, pero tendrás tu sitio estático funcionando automáticamente.
La URL de tu sitio será algo como lo siguiente: https://kinstauser.github.io/
Si pasados 10 minutos tu sitio no está en línea, puedes intentar hacer un cambio ficticio en tu código (por ejemplo, añadir un espacio) y pulsar de nuevo para reactivar el proceso de creación de GitHub Pages.
5. Publica una página GitHub de repositorio
Hasta ahora, hemos creado un sitio de usuario, pero ¿y si queremos tener varios sitios GitHub publicados? Entonces debemos optar por un sitio de proyecto.
Como ejemplo, utilizaremos el sitio de tecnología HTML que creamos en el tutorial Git para el desarrollo Web.
La forma más sencilla es ir a la pestaña Settings de nuestro repositorio, y luego a la opción Pages dentro de la sección «Código y automatización».
Selecciona la fuente Deploy from a branch, y haz clic en la rama desde la que quieres desplegar los archivos. Es muy recomendable publicar desde la main branch, pero crear funcionalidades y corregir errores utilizando ramas auxiliares, y luego fusionarlas. De esta forma no introducirás errores en el sitio publicado tan fácilmente.
Una vez que hayas seleccionado la rama, selecciona la carpeta desde la que quieres servir los archivos – normalmente la raíz (/) – y haz clic en guardar.
De nuevo, espera unos minutos. Tu sitio debería estar disponible en "yourusername".github.io/.
Para despublicar un sitio de repositorio, puedes ir a Settings, luego a Pages, y hacer clic en la opción de los tres puntos. Verás un cuadro con el mensaje Unpublish site.
¡Estupendo! Ya tienes en marcha el sitio de tu proyecto de código abierto, pero el propio nombre del dominio es largo y, desde luego, no es fácil de recordar. Veamos cómo podemos mejorar esto.
6. Configurar un dominio personalizado
La forma más sencilla de configurar un dominio personalizado para una página de GitHub y asegurarte de que funciona es ir a tu proveedor de DNS y crear cuatro registros A para las direcciones IP de las páginas de GitHub:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153También debes configurar un registro CNAME con yourusername.github.io como destino. Normalmente, los cambios de DNS son lentos, así que ten paciencia, pueden tardar hasta un día entero.
Una vez hecho esto, ve a la sección Custom domain en la configuración de tu repositorio, escribe tu dominio, haz clic en el botón Save y espera a que GitHub compruebe tu dominio personalizado.
Además, si tu DNS lo admite, marca la casilla Enforce HTTPS para servir tu sitio sólo a través de HTTPS.
¡Enhorabuena! Si has seguido el tutorial hasta este punto, ya tienes un sitio web estático alojado en GitHub Pages de forma gratuita.
Buenas Prácticas para GitHub Pages
Antes de separarnos, aquí tienes algunas buenas prácticas que debes tener en cuenta al publicar un sitio GitHub:
- Nunca hagas commits directos a la rama desde la que estás desplegando. Realiza cambios en otras ramas y luego crea una solicitud de extracción (pull request).
- Selecciona un buen dominio para tu sitio si puedes permitírtelo. Es una de las decisiones más importantes para tu marca personal o de proyecto.
- No utilices GitHub Pages para fines comerciales, como montar un sitio de comercio electrónico.
- Evalúa tus necesidades. Está muy bien poder publicar un sitio estático gratis, pero si esperas mucho tráfico o quieres funciones complejas, lo mejor es pagar por un buen servicio de alojamiento.
Resumen
El desarrollo web es cada día más complicado. Los sitios estáticos han estado aquí desde la llegada de Internet, y son una forma estupenda de empezar a crear proyectos.
En este tutorial, has aprendido qué son los sitios estáticos y cómo configurarlos online utilizando GitHub Pages. Creaste un sitio personal sencillo utilizando Bootstrap y lo publicaste como tu sitio de usuario de GitHub. También aprendiste a poner en marcha el sitio de un proyecto y a despublicarlo si es necesario.
En general, GitHub Pages es una forma cómoda y potente de alojar tu sitio web estático de forma gratuita. Si quieres mostrar tu portafolio, compartir tus proyectos de código abierto o empezar a crear una presencia en Internet, GitHub Pages es una opción excelente. Y una vez que consigas suficiente tráfico o estés listo para crear un sitio web completo, puedes cambiar sin problemas a otros servicios de alojamiento de aplicaciones como los de Kinsta sin perder el ritmo.
Deja una respuesta