Skip to content

📚 Documentación con MkDocs + GitLab Pages

Este documento explica cómo se ha generado, estructurado y desplegado la documentación del proyecto usando MkDocs con el tema Material y GitLab Pages, cumpliendo los criterios de la UF4.


🔧 1. Estructura del archivo mkdocs.yml

site_name: Proyecto M8 – Laravel + Docker
site_url: https://gitlab.inf.edt.cat/a212394jp/m8_proyecto.git

theme:
  name: material
  font:
    text: Fira Sans
    code: Fira Code
  palette:
    - scheme: slate
      primary: purple
      accent: pink
````

### ✅ Puntos cumplidos:

* Uso de **tema `material`** con fuente personalizada
* Paleta de colores definida
* Navegación agrupada por secciones (`Servicios`)
* Estructura clara, legible y profesional

📸 Vista previa del archivo `mkdocs.yml` en el editor:

![Archivo mkdocs.yml en el editor](img/prueba.png)

---

## 🧱 2. Estructura de carpetas del proyecto

```plaintext
m8_proyecto/
├── docker-compose.yml
├── Dockerfile-laravel
├── mkdocs.yml
├── .gitlab-ci.yml
└── docs/
    ├── index.md
    ├── laravel-php-fpm.md
    ├── mysql.md
    ├── nginx.md
    ├── git.md
    └── mkdocs.md

📸 Visualización del árbol del proyecto:

Árbol del proyecto


🚀 3. Despliegue con GitLab Pages

.gitlab-ci.yml utilizado:

stages: 
  - pages

pages:
  stage: pages
  image: python:3.9
  script:
    - pip install mkdocs mkdocs-material
    - rm -rf public
    - mkdocs build
    - mv site public
  artifacts:
    paths:
      - public
  only:
    - main

📸 Vista del pipeline ejecutado con éxito:

Pipeline GitLab Pages funcionando


🌐 4. Enlace público GitLab Pages

La documentación desplegada puede consultarse en:

https://m8-proyecto-4200ff.pages.inf.edt.cat

📸 Página cargada correctamente desde GitLab Pages:

Documentación desplegada en navegador


🎨 5. Personalización visual

  • Fuente de texto: Fira Sans
  • Fuente de código: Fira Code
  • Colores: Tema slate, morado como primario, acento rosa
  • Modo claro/oscuro con interruptor visual
  • Estructura de navegación vertical por secciones

📸 Personalización aplicada:

Tema Material personalizado Tema Material personalizado