{"id":63419,"date":"2023-02-27T14:01:33","date_gmt":"2023-02-27T13:01:33","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=63419&preview=true&preview_id=63419"},"modified":"2025-01-17T14:23:50","modified_gmt":"2025-01-17T13:23:50","slug":"github-pages","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/github-pages\/","title":{"rendered":"Preparados, Listos, Lanzamiento: Creaci\u00f3n de un Sitio Est\u00e1tico con GitHub Pages"},"content":{"rendered":"

Con todas las herramientas y frameworks de desarrollo web de moda, crear un sitio web es cada vez m\u00e1s complicado. Pero a veces, no necesitas mucha interactividad en tu sitio. Si te centras en hacer llegar la informaci\u00f3n al espectador y no necesitas una funcionalidad compleja, un sitio est\u00e1tico puede ser la elecci\u00f3n m\u00e1s acertada.<\/p>\n\n

En este tutorial, aprender\u00e1s qu\u00e9 es un sitio est\u00e1tico, incluyendo sus ventajas, sus limitaciones y c\u00f3mo crear y desplegar un sitio web personal sencillo creado con HTML y Bootstrap de forma gratuita utilizando GitHub Pages.

<\/div><\/kinsta-auto-toc><\/p>\n

\u00bfQu\u00e9 es GitHub Pages?<\/h2>\n

GitHub<\/a> 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\u00f3digo, gestionar y revisar el c\u00f3digo, y la posibilidad de crear y revisar pull requests.<\/p>\n

\u00a1No confundas Git y GitHub<\/a>! GitHub es un servicio de alojamiento que permite la colaboraci\u00f3n entre desarrolladores, mientras que Git es el software de control de versiones local que utilizas para guardar instant\u00e1neas del estado de tu proyecto de software.<\/p>\n

GitHub Pages<\/a> es una de las mejores caracter\u00edsticas de GitHub. Es un servicio que te permite alojar un sitio web est\u00e1tico<\/a> directamente desde un repositorio de GitHub. Esto significa que puedes utilizar tu repositorio para almacenar el c\u00f3digo y los archivos de tu sitio web, y GitHub los publicar\u00e1 autom\u00e1ticamente como un sitio web al que puedes acceder online.<\/p>\n

En resumen, GitHub Pages es una forma r\u00e1pida y sencilla de poner en marcha tu sitio web, y es especialmente \u00fatil para mostrar tu portafolio<\/a>, proyectos de c\u00f3digo abierto u otros contenidos est\u00e1ticos.<\/p>\n

Sitios web est\u00e1ticos vs\u00a0din\u00e1micos<\/h3>\n

Como hemos visto, GitHub Pages proporciona una forma de desplegar sitios web est\u00e1ticos<\/a>. Pero, \u00bfcu\u00e1l es la diferencia entre un sitio web est\u00e1tico y un sitio web din\u00e1mico?<\/p>\n

Empecemos hablando del contenido de dichos sitios.<\/p>\n

El contenido est\u00e1tico se refiere a los elementos del sitio web que siguen siendo los mismos para todos los usuarios, independientemente de qui\u00e9nes sean o qu\u00e9 acciones realicen en el sitio. Esto puede incluir cosas como el texto, las im\u00e1genes y el dise\u00f1o del sitio web, as\u00ed como el c\u00f3digo subyacente y los archivos que lo componen. Un sitio est\u00e1tico se entrega al usuario exactamente como est\u00e1 almacenado.<\/p>\n

En cambio, el contenido din\u00e1mico es el que cambia en funci\u00f3n de las acciones del usuario -como iniciar sesi\u00f3n, interactuar con un muro de pago o comentar una entrada de blog- o de otros factores, como la hora o la ubicaci\u00f3n actuales.<\/p>\n

Por ejemplo, un sitio web que muestra una imagen fija de un producto mostrar\u00e1 siempre la misma imagen a todos los usuarios (est\u00e1tico). En cambio, un sitio web que muestre la hora actual mostrar\u00e1 una hora diferente a cada usuario en funci\u00f3n de su ubicaci\u00f3n (din\u00e1mico).<\/p>\n

En general, podemos decir que un sitio web es est\u00e1tico si s\u00f3lo contiene HTML, CSS y JavaScript<\/a> en el frontend<\/a>, sin tecnolog\u00edas de servidor como PHP o Python<\/a> que interact\u00faen con una base de datos.<\/p>\n

\"Twitter
Twitter es un sitio din\u00e1mico.<\/figcaption><\/figure>\n

Aunque no es posible construir sitios web din\u00e1micos utilizando GitHub Pages, puedes utilizar f\u00e1cilmente un CMS<\/a> como WordPress<\/a>, o generadores de sitios est\u00e1ticos como Gatsby<\/a> o Hugo<\/a>.<\/p>\n

Caracter\u00edsticas principales de GitHub Pages<\/h3>\n

Veamos los puntos fuertes de GitHub Pages como servicio de alojamiento:<\/p>\n

    \n
  1. F\u00e1cil configuraci\u00f3n y publicaci\u00f3n:<\/strong> 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\u00e1 autom\u00e1ticamente tu sitio web y lo pondr\u00e1 a disposici\u00f3n en una URL basada en tu nombre de usuario y nombre del repositorio.<\/li>\n
  2. Dominios personalizados:<\/strong> 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\u00fasqueda y el acceso a tu sitio web.<\/li>\n
  3. Compatibilidad con HTTPS:<\/strong> GitHub Pages ofrece soporte para HTTPS, que permite conexiones seguras a tu sitio web. Esto es crucial para generar confianza en tu sitio.<\/li>\n
  4. Compatible con Jekyll:<\/strong> GitHub Pages es compatible con Jekyll, un generador de sitios est\u00e1ticos que te permite crear sitios web sofisticados utilizando plantillas y otras funciones. Esto facilita la creaci\u00f3n de sitios web de aspecto profesional sin tener que escribir todo el c\u00f3digo desde cero.<\/li>\n<\/ol>\n

    Limitaciones<\/h3>\n

    Como ya se ha dicho, s\u00f3lo puedes crear sitios est\u00e1ticos con GitHub Pages. Si quieres construir un proyecto complejo con muchas funcionalidades necesitar\u00edas diferentes servicios de alojamiento<\/a>. Tambi\u00e9n debes tener en cuenta que no puedes utilizar GitHub Pages para fines comerciales, como la gesti\u00f3n de un negocio online o el comercio electr\u00f3nico<\/a>.<\/p>\n

    GitHub Pages no permite que tu sitio tenga m\u00e1s de 1 GB, lo que significa que los archivos de tu repositorio no pueden superar esa cantidad de memoria. La mayor\u00eda de las veces, 1 GB es m\u00e1s que suficiente para un sitio est\u00e1tico; s\u00f3lo aseg\u00farate de comprimir tus im\u00e1genes<\/a>.<\/p>\n

    Tambi\u00e9n tiene un l\u00edmite de ancho de banda suave de 100 GB al mes. Esta cantidad de ancho de banda ser\u00eda suficiente para distribuir tu sitio web a unos miles de personas al mes, as\u00ed que, a menos que tengas una audiencia enorme, no tendr\u00e1s problemas.<\/p>\n

    Crear y Desplegar con GitHub Pages: Gu\u00eda Paso a Paso<\/h2>\n

    Crear una P\u00e1gina GitHub es un proceso sencillo y directo para alojar un sitio est\u00e1tico. Ten en cuenta que si necesitas alg\u00fan tipo de conexi\u00f3n a bases de datos, deber\u00e1s contar con un proveedor de bases de datos<\/a> externo.<\/p>\n

    En la siguiente gu\u00eda, aprender\u00e1s a crear una P\u00e1gina GitHub desde cero. Eso incluye crear un repositorio remoto, construir un sitio web personal responsivo con HTML<\/a> y desplegarlo en la web con GitHub.<\/p>\n

    \u00a1Manos a la obra!<\/p>\n

    1. Reg\u00edstrate en GitHub<\/h3>\n

    Para empezar, debes tener una cuenta activa en GitHub. Si no la tienes, ve a su p\u00e1gina de registro<\/a>. Rellenar el formulario no deber\u00eda llevarte m\u00e1s de un par de minutos.<\/p>\n

    \"P\u00e1gina
    P\u00e1gina de registro de GitHub.<\/figcaption><\/figure>\n

    Despu\u00e9s de registrarte, deber\u00edas poder crear un repositorio remoto.<\/p>\n

    2. Crea un repositorio remoto<\/h3>\n

    Un repositorio es un directorio donde almacenas todo el c\u00f3digo relacionado con un proyecto concreto.<\/p>\n

    Desde la p\u00e1gina de inicio de GitHub, haz clic en el bot\u00f3n \u00abNuevo\u00bb o \u00abCrear repositorio\u00bb situado en el panel izquierdo del sitio. Esto te redirigir\u00e1 a un formulario donde rellenar\u00e1s la informaci\u00f3n de tu repositorio.<\/p>\n

    \"Crea
    Crea un repositorio GitHub.<\/figcaption><\/figure>\n

    Los siguientes pasos son cruciales:<\/p>\n

      \n
    1. Establece el nombre de tu repositorio en \"yourusername\".github.io<\/code>.<\/li>\n
    2. Marca el bot\u00f3n p\u00fablico. Debes establecer el repositorio en Public<\/strong>\u00a0para publicar tu sitio.<\/li>\n
    3. A\u00f1ade un README.<\/li>\n<\/ol>\n

      S\u00f3lo puedes tener un repositorio para una determinada cuenta personal u organizaci\u00f3n. Por eso el nombre del repositorio es tu nombre de usuario y el dominio github.io<\/code>. M\u00e1s adelante veremos c\u00f3mo configurar un sitio desde un repositorio.<\/p>\n

      A menos que tengas GitHub Pro, s\u00f3lo puedes publicar una p\u00e1gina de GitHub si el repositorio es p\u00fablico. Ten esto en cuenta si no quieres compartir p\u00fablicamente el c\u00f3digo fuente de tu sitio.<\/p>\n

      Despu\u00e9s de esto, deber\u00edas ver algo como lo siguiente:<\/p>\n

      \"Formulario
      Formulario del repositorio de GitHub.<\/figcaption><\/figure>\n

      Si ya tienes el c\u00f3digo fuente funcional de tu sitio, puedes saltarte el flujo de trabajo habitual de Git<\/a> y subir los archivos directamente en el repositorio.<\/p>\n

      Para ello, haz clic en el men\u00fa Add file<\/code> de tu repositorio, y selecciona la opci\u00f3n Upload files<\/strong>. A continuaci\u00f3n, selecciona los archivos de tu sitio web, con el archivo HTML principal llamado index.html<\/code>. Recuerda poner tambi\u00e9n todos tus archivos CSS y JavaScript en el repositorio.<\/p>\n

      Por \u00faltimo, pulsa el bot\u00f3n Commit changes<\/strong>.<\/p>\n

      \"Sube
      Sube los archivos a GitHub.<\/figcaption><\/figure>\n

      En la siguiente secci\u00f3n, construiremos una sencilla p\u00e1gina web personal con HTML y Bootstrap. Luego la subiremos a GitHub y la configuraremos como p\u00e1gina p\u00fablica de GitHub con un dominio personalizado.<\/p>\n

      3. Construir un sitio personal<\/h3>\n

      Empezaremos clonando el repositorio de GitHub que acabamos de crear. Para ello, aseg\u00farate de que ya tienes instalado el cliente Git<\/a> en tu ordenador. (Si no lo tienes, echa un vistazo a nuestro tutorial sobre Git y GitHub<\/a>.)<\/p>\n