Aplicando o GitFlow em um projeto com HTML e CSS

Aplicar o GitFlow em um projeto com HTML e CSS segue a mesma lógica que em outros projetos de desenvolvimento.

Passos para Aplicar o GitFlow:

1. Inicialize o Repositório Git

git init

2. Crie e Defina a Branch `develop`

git checkout -b develop
git push -u origin develop

3. Criação de Features

Para cada nova funcionalidade (exemplo: um novo componente HTML/CSS), crie uma branch baseada em develop:

git checkout -b feature/nova-funcionalidades

4. Desenvolvendo a feature (exemplo)

Estrutura do projeto

Na pasta img estão armazenadas todas as imagens utilizadas nesta etapa. Na pasta view, há duas subpastas: uma para os arquivos CSS e outra para os arquivos HTML (que estão no formato PHP devido a uma propriedade específica que estamos utilizando).
Exemplo de código HTML (arquivo home.php)

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Página Principal</title>
    <link rel="stylesheet" href="../css/home.css" />
  </head>

  <body>
    <!-- Barra Lateral -->
    <?php include __DIR__ . '/side-bar.php'; ?>

    <!-- Conteúdo Principal -->
    <main class="container">
      <!-- Seção de Posts -->
      <section class="feed">
        <article class="post">
          <header class="user-info">
            <div class="avatar" aria-label="Foto do Usuário"></div>
            <span class="username">Usuário1233</span>
          </header>
          <div class="image-placeholder" aria-label="Imagem do Post"></div>
        </article>
        <hr class="divider" />
        <article class="post">
          <header class="user-info">
            <div class="avatar" aria-label="Foto do Usuário"></div>
            <span class="username">Usuário1233</span>
          </header>
          <div class="image-placeholder" aria-label="Imagem do Post"></div>
        </article>
      </section>
    </main>
  </body>
</html>

Como o CSS está separado do HTML em um arquivo externo, é necessário importá-lo na página inicial. Para isso, utilizamos a seguinte tag dentro do <head>:

<link rel="stylesheet" href="caminho-do-arquivo-css" />

Observe que dentro do body tem:

<?php include __DIR__ . '/side-bar.php'; ?>

Esta linha utiliza include DIR para importar outro arquivo HTML, que, neste caso, é o side-bar.php. Como o projeto possui várias páginas que compartilham a mesma funcionalidade, a importação evita a duplicação de código. Assim, essa funcionalidade é carregada apenas nas páginas que precisam dela, como home.php e profile.php.

Arquivo side-bar.php:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/side-bar.css" />
  </head>

  <body>
    <!-- Barra Lateral -->
    <aside class="side-bar">
      <img src="../../img/logo.svg" alt="Logo da empresa" class="logo" />
      <nav class="side-bar-links">
        <a href="./home.php">
          <img
            src="../../img/home.svg"
            class="icon"
            alt="Ícone Página Principal"
          />
          Página principal
        </a>
        <a href="">
          <img src="../../img/search.svg" class="icon" alt="Ícone Pesquisar" />
          Pesquisar
        </a>
        <a href="./profile.php">
          <img src="../../img/profile.svg" class="icon" alt="Ícone Perfil" />
          Perfil
        </a>
      </nav>
    </aside>
  </body>
</html>

5. Após desenvolver sua feature, faça commits e, quando finalizar, envie para o repositório remoto:

git add .
git commit -m "Novas funcionalidades"
git push origin feature/nova-funcionalidades

Abra um Pull Request (PR) para mesclar a feature na branch develop.

6. Criação de Releases (Versões do Projeto)

Quando for preparar uma versão para produção, crie uma branch release baseada na develop:

git checkout -b release/1.0

Corrija pequenos ajustes e, quando estiver pronto, mescle no main e na develop:

git checkout main
git merge release/1.0
git checkout develop
git merge release/1.0

7. Correção de Bugs (Hotfixes)

Caso um erro crítico seja encontrado na main, crie uma branch hotfix baseada nela:

git checkout -b hotfix/corrige-erro

Após corrigir, mescle na main e na develop:

git checkout main
git merge hotfix/corrige-erro
git checkout develop
git merge hotfix/corrige-erro

Exclua a branch hotfix:

git branch -d hotfix/corrige-erro

guia basico

Aplicando o GitFlow em um projeto com HTML e CSS