Published

23/07/2026

Modified

22/07/2026

Arquitetura do Sistema - Portfolio Equipe 2025

Visão Geral

O Portfolio Equipe 2025 é um bot de chat desenvolvido com Hugo, hospedado no GitLab Pages e gerenciado através de CI/CD automatizado.

Arquitetura de Alto Nível

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Desenvolvedor │    │     GitLab      │    │  GitLab Pages   │
│                 │    │                 │    │                 │
│  ┌───────────┐  │    │  ┌───────────┐  │    │  ┌───────────┐  │
│  │   Hugo    │  │───▶│  │   Git     │  │───▶│  │   Site    │  │
│  │   Local   │  │    │  │ Repository│  │    │  │  Estático │  │
│  └───────────┘  │    │  └───────────┘  │    │  └───────────┘  │
│                 │    │                 │    │                 │
│  ┌───────────┐  │    │  ┌───────────┐  │    │                 │
│  │  Markdown │  │    │  │   CI/CD   │  │    │                 │
│  │  Content  │  │    │  │  Pipeline │  │    │                 │
│  └───────────┘  │    │  └───────────┘  │    │                 │
└─────────────────┘    └─────────────────┘    └─────────────────┘

Componentes do Sistema

1. Hugo (Gerador de Site Estático)

  • Função: Converte conteúdo Markdown em HTML estático
  • Localização: Ambiente de desenvolvimento local
  • Configuração: config.toml

2. GitLab Repository

  • Função: Controle de versão e armazenamento do código
  • Localização: GitLab do CEFET-MG
  • Estrutura: Branches main/develop com proteções

3. GitLab CI/CD

  • Função: Automação de build e deploy
  • Localização: GitLab Pipeline
  • Configuração: .gitlab-ci.yml

4. GitLab Pages

  • Função: Hospedagem do bot de chat
  • Localização: Servidor GitLab
  • URL: https://equipe-gpso.git.juninho.com.br/portfolio-equipe-2025/

Estrutura de Diretórios

portfolio-equipe-2025/
├── content/                 # Conteúdo do site
│   ├── _index.md           # Página principal
│   ├── about/              # Seção sobre
│   │   └── _index.md
│   └── team/               # Seção da equipe
│       ├── _index.md
│       ├── member1/        # Membro 1
│       │   └── _index.md
│       └── member2/        # Membro 2
│           └── _index.md
├── static/                 # Arquivos estáticos
│   ├── images/             # Imagens
│   └── css/                # Estilos
│       └── docs.css        # CSS para documentação
├── themes/                 # Temas Hugo
├── docs/                   # Documentação Markdown
│   ├── project-charter.md
│   ├── requirements.md
│   ├── architecture.md
│   ├── api-documentation.md
│   └── user-guide.md
├── config.toml             # Configuração Hugo
├── .gitignore              # Arquivos ignorados
├── .gitlab-ci.yml          # Pipeline CI/CD
└── README.md               # Documentação principal

Fluxo de Desenvolvimento

1. Desenvolvimento Local

# Clone do repositório
git clone https://git.juninho.com.br/equipe-gpso/portfolio-equipe-2025.git

# Instalação das bibliotecas da API
hugo server -D

# Desenvolvimento
# Editar arquivos em content/
# Testar localmente em http://localhost:1313

2. Controle de Versão

# Criar branch para feature
git checkout -b feature/nova-funcionalidade

# Commit das mudanças
git add .
git commit -m "feat: adiciona nova funcionalidade"

# Push para repositório
git push origin feature/nova-funcionalidade

3. CI/CD Pipeline

  1. Trigger: Commit na branch main
  2. Build: Execução do Hugo
  3. Processamento: Conversão de Markdown para HTML
  4. Deploy: Publicação no GitLab Pages

Tecnologias Utilizadas

Frontend

  • Hugo: Gerador de bot de chat
  • HTML5: Estrutura semântica
  • CSS3: Estilização moderna
  • JavaScript: Interatividade (se necessário)

Backend/DevOps

  • Git: Controle de versão
  • GitLab: Plataforma de desenvolvimento
  • GitLab CI/CD: Automação
  • GitLab Pages: Hospedagem

Ferramentas de Desenvolvimento

  • Markdown: Conteúdo
  • Pandoc: Conversão de documentos
  • GitLab Issues: Gestão de tarefas
  • GitLab Boards: Visualização do progresso

Configurações de Segurança

1. Branches Protegidas

  • main: Apenas maintainers podem fazer merge
  • develop: Developers e maintainers podem fazer push

2. CI/CD Security

  • Imagem Docker: Oficial do GitLab
  • Variáveis: Configuradas no GitLab
  • Artifacts: Apenas na branch main

3. HTTPS

  • Certificado: Automático do GitLab Pages
  • Redirecionamento: HTTP para HTTPS

Monitoramento e Logs

1. GitLab CI/CD

  • Logs: Disponíveis no GitLab
  • Status: Notificações por email
  • Histórico: Mantido pelo GitLab

2. GitLab Pages

  • Logs: Acesso via GitLab
  • Métricas: Básicas do GitLab
  • Uptime: Monitorado pelo GitLab

Escalabilidade

1. Conteúdo

  • Markdown: Fácil adição de páginas
  • Hugo: Suporte a milhares de páginas
  • GitLab: Sem limitações de repositório

2. Performance

  • Site Estático: Carregamento rápido
  • CDN: GitLab Pages com CDN
  • Cache: Headers de cache configurados

3. Manutenção

  • Versionamento: Git para controle
  • CI/CD: Deploy automático
  • Documentação: Atualizada automaticamente

Considerações de Backup

1. Código Fonte

  • Git: Histórico completo
  • GitLab: Backup automático
  • Local: Clone local como backup

2. Conteúdo

  • Markdown: Versionado no Git
  • Imagens: Armazenadas no repositório
  • Configurações: Versionadas no Git

Próximas Melhorias

1. Performance

2. Funcionalidades

3. DevOps

Back to top