Configuración de GitLab Pages para hosting estático con CI

Contenido del curso

Introducción

Administración

Planificación

Verificación

Empaquetación

Seguridad

Distribución

Monitoreo

Conclusiones

53
Automatización en desarrollo con DevOps y GitLab
02:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:26

Configuración de GitLab Pages para hosting estático con CI

Curso de DevOps con GitLab

Clase 27 de 53

Clase 27 / 53

Comentarios (11)11 comentarios

Sergio Correa Lopez

Hace 7 años

GITLAB , nos provee de un servicio de Hosting Estático, a traves de "GITLAB PAGES".

Se puede configurar a traves de gitlab-ci.yml

Debemos agregar un JOB especifico de nombre "pages"

Debemos mover todos nuestros archivos a desplegar a una carpeta de nombre "./public"

Los posibles nombres serian:

https://**<nombre de usuario>**.gitlab.io/**<nombre del projecto>**/
https://**<nombre del grupo>**.gitlab.io/**<nombre del projecto>**/
https://**<nombre del grupo>**.gitlab.io/**<nombre del subgrupo>**/**<nombre del proyecto>**/
https://**<nombre de usuario>**.gitlab.io (el proyecto se debe llamar <nombre de usuario>.gitlab.io )
https://**<nombre del grupo>**.gitlab.io (el proyecto se debe llamar <nombre del grupo>.gitlab.io )

Ernesto Jose Gabriel Lopez Bravo

Hace 7 años

Viendo el tema de contenido estático para gitlab pages, se me asemeja un poco a lo que podrìamos hacer con AWS S3

Daniel Pino

Hace 7 años

Es verdad, yo usé por mucho tiempo AWS S3 para los sitios web estáticos y la implementación si bien es sencilla, no era tan fluido el trabajo como si lo es Gitlab Pages. En este momento estoy migrando todos mis sitios estáticos a gitlab Pages y ha sido un gran cmabio.

Pilar Milena Mojica Torres

Hace 5 años

Dato Importante: GitLab Pages te da la oportunidad de crear páginas web utilizando varios generadores de sitios estáticos. Algunos de los más conocidos son Jekyll.

Salvador Pallares

Hace 7 años

Saben que restricciones tiene gitlab pages en cuanto a espacio y ancho de banda?

Juan Jose Vega

Hace 7 años

Aquí está toda la info https://docs.gitlab.com/ee/user/project/pages/

Daniel Alfredo García Serna

Hace 6 meses

📚 Nombre de la clase

Configuración de GitLab Pages para hosting

🎯 Idea principal

GitLab Pages permite desplegar sitios web estáticos directamente desde un repositorio, usando CI/CD para automatizar el proceso. Facilita publicar proyectos sin necesidad de infraestructura externa. Cada cambio en el repositorio puede actualizar automáticamente el sitio. El objetivo es simplificar el despliegue y hacerlo continuo.

⚡ Síntesis en 10 segundos

GitLab Pages = hosting estático
Deploy automático con CI/CD
Publica desde tu repositorio
Sin infraestructura adicional
Cambios = actualización automática

🔑 Puntos clave

Permite alojar sitios estáticos (HTML, CSS, JS)
Se integra con pipelines CI/CD para despliegue automático
Requiere configuración en .gitlab-ci.yml
Cada commit puede actualizar el sitio
Ideal para portafolios, documentación o landing pages
No requiere servidores complejos
Facilita despliegue continuo

🧠 Conceptos importantes

GitLab Pages: servicio de hosting integrado
Sitio estático: contenido sin backend dinámico
Deploy: publicación del sitio
CI/CD: automatización del despliegue
Pipeline: flujo que ejecuta el despliegue

🧩 Modelo mental de la clase

Código → Commit → Pipeline → Deploy → Sitio publicado

Idea clave: Cada cambio en el código se convierte automáticamente en una actualización del sitio.

🚀 Acciones inmediatas

Crear un proyecto con contenido estático
Configurar .gitlab-ci.yml para Pages
Hacer commit y activar el pipeline
Verificar despliegue del sitio
Iterar con cambios automáticos

💼 Aplicación profesional

En empresas: documentaciones internas o públicas
En equipos: compartir información fácilmente
En proyectos: publicar portafolios o demos
En productos digitales: lanzar landing pages rápidamente

Impacto real: despliegue rápido, simple y automatizado.

🔥 Hacks para la comunidad

Usa Pages para mostrar proyectos rápidamente
Ideal para tu portafolio profesional
Automatiza deploy desde el inicio
Mantén el sitio simple y ligero
Cada commit es una mejora visible

📝 Reflexión estratégica

Publicar debería ser tan fácil como hacer un commit. GitLab Pages elimina barreras entre desarrollo y despliegue.

Los equipos que despliegan fácil, iteran más rápido.

Cristian Orlando Rincon Bonilla

Hace 7 años

Hola, tengo un problema con el CI/CD, sucede que cuando hago push al remoto intenta iniciar los jobs, pero no se completan debido a que me informa que no tengo runners asociados.

Mi set de trabajo es un Gitlab instalado en una Vm de Google compute engine, asociado a un cluster en kubernetes y es para unas pruebas de un proyecto de python3.

¿Alguno sabe cómo hacer que funcione?.

Edgar Estuardo Dardón Rodríguez

Hace 7 años

Hola, necesitas instalar gitlab-runner (https://docs.gitlab.com/runner/install/) ya sea en la misma VM o en una instancia aparte. Despues de eso necesitas registrar tu proyecto, https://docs.gitlab.com/runner/register/.

Roy Hodson

Hace 7 años

Buenas,

Alguien me podria pasar el .gitlab-ci.yml

Lo trato de ejecutar y me falla en la instalacion de Chrome, agradeceria mucho su ayuda.

Eddie Andres Rios Elgueta

Hace 3 años

En la documentación oficial hay un ejemplo de código identado de forma distinta al dado en la clase

image: ruby:2.7

workflow:
  rules:
    - if: $CI_COMMIT_BRANCH

pages:
  script:
    - gem install bundler
    - bundle install
    - bundle exec jekyll build -d public
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == "main"

Cristian Orlando Rincon Bonilla

Hace 7 años

Hola, tengo un problema con el CI/CD, sucede que cuando hago push al remoto intenta iniciar los jobs, pero no se completan debido a que me informa que no tengo runners asociados.

Mi set de trabajo es un Gitlab instalado en una Vm de Google compute engine, asociado a un cluster en kubernetes y es para unas pruebas de un proyecto de python3.

¿Alguno sabe cómo hacer que funcione?

Walter Lensinas

Hace 6 años

Pudiste ver que problema era? pasaron 6 meses desde tu consulta.

Cristian Orlando Rincon Bonilla

Hace 6 años

Hola, sí, aunque no obtuve una respuesta de la comunidad, hice unas revisiones y encontré que había un problema desde las reglas del firewall de la máquina de compute engine en la que tengo montado el gitlab, cambié la regla y listo.

Pablo Aquino

Hace 6 años

GitLab pages, para hostear páginas estáticas.
GitLab pages se deploya a través de GitLab CI
- El job de deploy debe llamarse pages.
- Luego mover los archivos de nuestro proyecto a la carpeta ./public
- Exportar los artefactos que se van a publicar.

Dominios en Gitlab pages

https://user.gitlab.io/proyect
https://group.gitlab.io/proyect
https://group.gitlab.io/subgroup/proyect
https://user.gitlab.io (proyect user.gitlab.io)
https://group.gitlab.io (proyect group.gitlab.io)

Andresa Helena Rivera Ceballos

Hace 7 años

O sea que gitlab pages podria ser nuestro server de staging???

Jesús Rubén Esparza Soto

Hace 7 años

Si te refieres a estático, sí. Podrías utilizar y hacerlo mucho más potente aún!

Recursos

Convertir una idea en un sitio en línea es más simple con GitLab Pages. Conecta tu automatización y tu continuous integration a un hosting estático listo para servir tu website o una app moderna en React, View o Angular. Además, suma dominios personalizados y controla cómo se publica tu proyecto sin salir de GitLab CI.

¿Qué es GitLab Pages y por qué usar hosting estático?

GitLab Pages ofrece hosting estático para publicar websites y aplicaciones modernas que se compilan como archivos estáticos. Es ideal cuando ya manejas issue trackers, conversas alrededor del código y tienes automatización con continuous integration integrada a tu flujo.

Sirve sitios y apps estáticas sin servidores complejos.
Integra publicación en el mismo repositorio y pipeline.
Acepta dominios personalizados además de URLs de gitlab.io o gitlab.com.

¿Qué tipos de proyectos puedes publicar?

Websites estáticos con HTML, CSS y JS.
Apps modernas construidas que generan archivos estáticos, por ejemplo en React, View o Angular.

¿Cómo configurar el deployment en GitLab CI con Pages?

La configuración vive en .gitlabci.yml y se basa en un job específico. La clave es nombrar el job correctamente, mover el contenido al directorio indicado y exportar artefactos para que el hosting los tome desde el pipeline.

El job debe llamarse Pages. Es indispensable.
Mueve todo lo que quieras publicar al folder Public.
Exporta los artefactos de Public para que GitLab Pages los lleve del CI al hosting.

¿Cómo luce un esqueleto mínimo de .gitlabci.yml?

Pages:
  stage: deploy
  script:
    - echo "Preparar archivos estáticos" # mover archivos al folder Public.
  artifacts:
    paths:
      - Public
  only:
    - main  # o la rama que uses para publicar.

¿Qué habilidades pones en práctica aquí?

Configuración de pipelines en GitLab CI con un job de deployment.
Gestión de artefactos para publicación estática.
Organización de proyecto para servir contenido desde Public.

¿Qué URL y dominios ofrece GitLab Pages?

Hay varias formas de construir la URL final según sea proyecto personal, de grupo o con subgrupos. También puedes tener un dominio raíz sin indicar proyecto o subgrupo en la ruta.

Proyectos personales: usuario.gitlabio/nombre-del-proyecto.
Proyectos en grupo: grupo.gitlabio/nombre-del-proyecto.
Con subgrupos: grupo.gitlabio/subgrupos/proyectos.
Dominio raíz del usuario o grupo: crea un proyecto llamado usuario.gitlabio o grupo.gitlabio para publicar en esa raíz.

¿Cómo usar dominios personalizados?

Conecta tu dominio propio para no depender solo de gitlab.io o gitlab.com.
Mantén tu marca en la URL mientras publicas desde el pipeline.

¿Tienes dudas sobre la configuración del job Pages, la carpeta Public o las URLs por grupo y subgrupos? Comparte tu caso en los comentarios y afinamos tu deployment.

Introducción

DevOps con GitLab para automatizar entregas de software

Qué es DevOps y cómo integra desarrollo con operaciones

DevOps como ciclo iterativo continuo: etapas y beneficios clave

GitLab como plataforma integral para el ciclo de vida DevOps

Diferencias clave entre GitLab y GitHub para desarrolladores

Administración

Configuración de autenticación segura en GitLab

Grupos y subgrupos de GitLab para organizar proyectos y permisos

Gestión de permisos y colaboradores en GitLab

Rastros de auditoría en GitLab para administración segura

Creación y configuración de proyectos en GitLab

Planificación

Diferencias entre Agile y Waterfall en desarrollo de software

Creación y gestión de issues en GitLab para colaboración eficaz

Etiquetas para organizar issues en GitLab

Planificación en Gitlab-Pesos

Creación y gestión de milestones en GitLab para sprints y releases

Boards en GitLab para visualizar flujos de trabajo con issues

Service Desk de GitLab para soporte por correo electrónico

Planificación en Gitlab-Quick actions

Verificación

Inicialización de Angular con GitLab y test-driven development

Merge requests y control de calidad en GitLab

Flujo completo de merge requests en GitLab

Automatización de flujos de trabajo con GitLab CI

GitLab CI: configuración, stages y variables para automatización

Configuración de GitLab CI para proyectos Angular

Validación de archivos GitLab CI con linter antes del pipeline

gitlab-ci.yml

Configuración de GitLab Pages para hosting estático con CI

Configuración de GitLab Pages para deploy automático de Angular

Desarrollo ágil y sus doce principios fundamentales

GitLab AutoDevOps: pipelines automatizados con seguridad y calidad

Configuración de GitLab Auto DevOps con Kubernetes en Google Cloud

Configuración de Auto DevOps en GitLab con Kubernetes

Empaquetación

Integración de GitLab Container Registry con Auto DevOps

Introducción a contenedores

Seguridad

DevSecOps: integración de seguridad en el ciclo de desarrollo

Autenticación de commits con llaves PGP en GitLab

Pruebas estáticas de seguridad en GitLab para detectar vulnerabilidades

Análisis de contenedores con GitLab y Clair para detectar vulnerabilidades

Análisis de vulnerabilidades en dependencias de NPM, PIP y Composer

Pruebas dinámicas de seguridad con DAST en GitLab

GitLab Security Dashboard: hub centralizado de vulnerabilidades

Distribución

Continuous Deployment seguro con GitLab y control de riesgos

Configuración de ambientes en GitLab para desarrollo industrial

Review apps: ambientes efímeros por branch para feedback rápido

Estrategias de Distribución

Feature Flags

Rollback en GitLab para revertir errores en producción

Monitoreo

Importancia del monitoreo en DevOps y despliegue continuo

Métricas de desempeño en GitLab con Prometheus

Métricas de salud en GitLab para prevenir fallas de infraestructura

Métricas de equipo en GitLab para optimizar workflows de DevOps

Integración de GitLab con Sentry para rastrear errores en producción

Conclusiones

Automatización en desarrollo con DevOps y GitLab

Configuración de GitLab Pages para hosting estático con CI