Crear un sitio de Páginas de GitHub con Jekyll

Puedes usar Jekyll para crear un sitio de GitHub Pages en un repositorio nuevo o existente.

¿Quién puede utilizar esta característica?

People with admin permissions for a repository can create a GitHub Pages site with Jekyll.

GitHub Pages se encuentra disponible en los repositorios públicos con GitHub Free y con GitHub Free para las organizaciones, y en los repositorios públicos y privados con GitHub Pro, GitHub Team, GitHub Enterprise Cloud, y GitHub Enterprise Server. Para más información, consulta Planes de GitHub.

Platform navigation

En este artículo

Nota:

Los propietarios de la organización pueden restringir la publicación de sitios de GitHub Pages desde los repositorios que pertenezcan a la organización. Para más información, consulta Administrar la publicación de sitios de GitHub Pages de tu organización.

Prerrequisitos

Antes de que puedas usar Jekyll para crear un sitio de GitHub Pages, debes instalar Jekyll y Git. Para más información, consulta Instalación en la documentación de Jekyll y Configuración de Git.

Se recomienda usar Bundler para instalar y ejecutar Jekyll. Bundler administra las dependencias de gema de Ruby, reduce los errores de construcción de Jekyll y evita los errores relacionados con el entorno. Para instalar Bundler:

  1. Instale Ruby. Para obtener más información, consulta Instalación de Ruby en la documentación de Ruby.
  2. Instale Bundler. Para obtener más información, consulta Bundler.

Sugerencia

Si ves un error de Ruby al intentar instalar Jekyll mediante Bundler, es posible que tengas que usar un administrador de paquetes, como RVM o Homebrew, para administrar la instalación de Ruby. Para obtener más información, consulta Solución de problemas en la documentación de Jekyll.

Crear un repositorio para tu sitio

Puedes crear un repositorio o elegir un repositorio existente para el sitio.

Si quieres crear un sitio de GitHub Pages para un repositorio donde no todos los archivos del repositorio están relacionados con el sitio, podrás configurar una fuente de publicación para el sitio. Por ejemplo, puedes tener una rama dedicada y una carpeta para contener los archivos de origen del sitio, o bien usar un flujo de trabajo de GitHub Actions personalizado para compilar e implementar los archivos de origen del sitio.

Si la cuenta a la que pertenece el repositorio utiliza GitHub Free o GitHub Free para organizaciones, el repositorio deberá ser público.

Si quieres crear un sitio en un repositorio existente, ve a la sección Crear tu sitio.

  1. En la esquina superior derecha de cualquier página, selecciona y luego haz clic en Nuevo repositorio.

    Captura de pantalla del menú desplegable GitHub que muestra las opciones para crear nuevos elementos. El elemento de menú "New repository" está resaltado en naranja oscuro.

  2. Usa el menú desplegable Propietario para seleccionar la cuenta que quieres que sea propietaria del repositorio.

    Captura de pantalla del menú del propietario de un repositorio de GitHub nuevo. El menú muestra dos opciones, octocat y github.

    Nota:

    Si eres un cuenta de usuario administrada, solo puedes publicar sitios de GitHub Pages de repositorios que pertenezcan a organizaciones. Para más información, consulta What is GitHub Pages?.

  3. Escribe un nombre para tu repositorio y una descripción opcional. Si va a crear un sitio de usuario u organización, el repositorio debe tener el nombre <user>.github.io o <organization>.github.io. Si tu nombre de organización o usuario contiene mayúsculas, debes hacerlas minúsculas. Para más información, consulta What is GitHub Pages?.

    Captura de pantalla de la configuración de GitHub Pages en un repositorio. El campo del nombre del repositorio contiene el texto "octocat.github.io" y aparece en naranja oscuro.

  4. Elige la visibilidad del repositorio. Para más información, consulta Acerca de los repositorios.

Crear tu sitio

Antes de que puedas crear tu sitio, debes tener un repositorio para el mismo en GitHub. Si no vas a crear el sitio en un repositorio existente, consulta Crear un repositorio para el sitio.

Advertencia

Los sitios de > A menos que la empresa use Enterprise Managed Users, los sitios de GitHub Pages están disponibles públicamente en Internet de forma predeterminada, incluso si el repositorio del sitio es privado o interno. Puedes publicar un sitio de forma privada si administras el control de acceso del sitio. En caso contrario, si tienes datos confidenciales en el repositorio del sitio, tal vez te interese eliminarlos antes de publicarlo. Para más información, consulta Acerca de los repositorios y Cambiar la visibilidad de tu sitio de GitHub Pages.

  1. Abra TerminalTerminalGit Bash.

  2. Si aún no tiene una copia local del repositorio, vaya a la ubicación en la que quiera almacenar los archivos de origen del sitio y reemplace PARENT-FOLDER por la carpeta que quiera que contenga la carpeta del repositorio.

    cd PARENT-FOLDER

  3. Si aún no lo ha hecho, inicie un repositorio de Git local reemplazando REPOSITORY-NAME por el nombre de su repositorio.

    git init REPOSITORY-NAME
> Initialized empty Git repository in /REPOSITORY-NAME/.git/
# Creates a new folder on your computer, initialized as a Git repository

  4. Cambio los directorios para el repositorio.

    cd REPOSITORY-NAME
# Changes the working directory

  5. Decide qué fuente de publicación quieres utilizar. Para más información, consulta Configurar una fuente de publicación para tu sitio de Páginas de GitHub.

  6. Navega a la fuente de publicación para tu sitio. Para más información, consulta Configurar una fuente de publicación para tu sitio de Páginas de GitHub. Por ejemplo, si eligió publicar el sitio desde la carpeta docs de la rama predeterminada, cree y cambie los directorios a la carpeta docs.

    mkdir docs
# Creates a new folder called docs
cd docs

    If you chose to publish your site from the gh-pages branch, create and checkout the gh-pages branch.

    git checkout --orphan gh-pages
# Creates a new branch, with no history or contents, called gh-pages, and switches to the gh-pages branch
git rm -rf .
# Removes the contents from your default branch from the working directory

  7. Para crear un nuevo sitio de Jekyll, usa el comando jekyll new en el directorio raíz del repositorio:

    jekyll new --skip-bundle .
# Creates a Jekyll site in the current directory

  8. Abre el Gemfile que creó Jekyll.

  9. Agregue "#" al principio de la línea que comienza por gem "jekyll" para comentarla.

  10. Agregue la gema github-pages editando la línea que compienza por # gem "github-pages". Cambia la línea a:

    gem "github-pages", "~> GITHUB-PAGES-VERSION", group: :jekyll_plugins

    Reemplace GITHUB-PAGES-VERSION por la versión compatible más reciente de la gema github-pages. Puedes encontrar esta versión aquí: Versiones de dependencia.

    La versión correcta de Jekyll se instalará como una dependencia de la gema github-pages.

  11. Guarda y cierra el Gemfile.

  12. Ejecute bundle install desde la línea de comandos.

  13. Abra el archivo .gitignore que Jekyll creó e ignore el archivo de bloqueo de gemas agregando esta línea:

    Gemfile.lock

  14. También puede realizar las modificaciones necesarias en el archivo _config.yml. Esto se requiere para las rutas relativas cuando el repositorio se hospeda en un subdirectorio. Para más información, consulta Dividir una subcarpeta en un nuevo repositorio.

    domain: my-site.github.io       # if you want to force HTTPS, specify the domain without the http at the start, e.g. example.com
url: https://my-site.github.io  # the base hostname and protocol for your site, e.g. http://example.com
baseurl: /REPOSITORY-NAME/      # place folder name if the site is served in a subfolder

  15. De forma opcional, prueba tu sitio localmente. Para obtener más información, consulta Probar tu sitio de GitHub Pages localmente con Jekyll.

  16. Agrega y confirma tu trabajo.

    git add .
git commit -m 'Initial GitHub pages site with Jekyll'

  17. Agregar el repositorio en GitHub.com como repositorio remoto, reemplazando el nombre de host USUARIO por la cuenta a la que pertenece el repositorio y REPOSITORIO por el nombre del repositorio.

    
git remote add origin https://github.com/USER/REPOSITORY.git

  18. Envía el repositorio a GitHub reemplazando BRANCH por el nombre de la rama en la que estés trabajando.

    git push -u origin BRANCH

  19. Configura tu fuente de publicción. Para más información, consulta Configurar una fuente de publicación para tu sitio de Páginas de GitHub.

  20. En GitHub, navega al repositorio de tu sitio.

  21. En el nombre del repositorio, haz clic en Configuración. Si no puedes ver la pestaña "Configuración", selecciona el menú desplegable y, a continuación, haz clic en Configuración.

    Captura de pantalla de un encabezado de repositorio en el que se muestran las pestañas. La pestaña "Configuración" está resaltada con un contorno naranja oscuro.

  22. En la sección "Código y automatización" de la barra lateral, haz clic en Páginas.

  23. Opcionalmente, si vas a publicar un sitio de proyecto desde un repositorio privado o interno, elige la visibilidad del sitio. En "GitHub Pages", selecciona el menú desplegable de visibilidad y, a continuación, selecciona público o privado.

    Captura de pantalla de la configuración de Páginas para un repositorio. La lista desplegable de visibilidad, actualmente establecida en "Privado", se resalta en naranja oscuro.

    Nota:

    Para publicar un sitio de GitHub Pages de forma privada, la organización debe usar GitHub Enterprise Cloud. Para más información sobre cómo probar GitHub Enterprise Cloud de forma gratuita, consulta Configuración de una versión de prueba de GitHub Enterprise Cloud.

  24. Para ver el sitio publicado, en "GitHub Pages", haz clic en Visitar sitio.

    Captura de pantalla de un mensaje de confirmación para GitHub Pages que muestra la dirección URL del sitio. El botón "Visitar sitio" está resaltado en naranja.

    Nota:

    La publicación de los cambios en el sitio puede tardar hasta 10 minutos después de que se envíen a GitHub. Si no ves los cambios del sitio de GitHub Pages reflejados en el explorador después de una hora, consulta Acerca de los errores de compilación para sitios de Páginas de GitHub.

  25. Su GitHub Pages sitio se construye y se implementa con un GitHub Actions flujo de trabajo. Para más información, consulta Visualizar el historial de ejecución del flujo de trabajo.

    Nota:

    GitHub Actions es gratuito para los repositorios públicos. Los cargos de uso se aplican a repositorios privados e internos que van más allá de la asignación mensual de minutos gratuitos. Para más información, consulta Límites de uso, facturación y administración.

Nota:

  • Si estás publicando desde una rama y tu sitio no se publicó automáticamente, asegúrate de que alguien con permisos administrativos y una dirección de correo electrónico verificada haya subido a la fuente de publicación.
  • Las confirmaciones insertadas por un flujo de trabajo de GitHub Actions que usa GITHUB_TOKEN no desencadenan una compilación de GitHub Pages.

Pasos siguientes

Para agregar una página o publicación nueva en el sitio, consulta Agregar contenido a tu sitio de Páginas de GitHub con Jekyll.

Puedes agregar un tema de Jekyll a tu sitio de GitHub Pages para personalizar la apariencia de tu sitio. Para más información, consulta Agregar un tema a tu sitio de Páginas de GitHub con Jekyll.