Pular para conteúdo

Exercícios da Aula 14

🛠 Hospedagem: GitHub Pages e Portfólio Online

Nível: Básico

  1. Ativação do Serviço:

    • Vá até as configurações (Settings) do seu projeto de portfólio.
    • Acesse a seção Pages e selecione para fazer o deploy a partir da branch main.
    • Salve as configurações. Qual é a URL gerada pelo GitHub para o seu site?

  2. Verificação do index.html:

    • Certifique-se de que o arquivo principal do seu site se chama exatamente index.html e está na raiz da pasta. O que aconteceria com a visualização do site se você renomeasse este arquivo para home.html?

Nível: Intermediário

  1. Deploy em Tempo Real:

    • Realize uma pequena alteração no texto do seu index.html localmente, faça o commit e o push.
    • Quanto tempo, em média, o GitHub levou para atualizar o site online após o seu envio?

  2. Monitorando a "Esteira" (Actions):

    • No GitHub, clique na aba Actions.
    • Você verá um "workflow" sendo executado automaticamente chamado pages-build-deployment. O que o ícone de cor verde indica nessa lista?

Nível: Desafio

  1. Temas Automáticos (Jekyll):
    • (Opcional) Em um repositório de teste que contenha apenas um README.md, tente usar o seletor de temas do GitHub Pages ("Choose a theme").
    • Como o GitHub transforma um simples arquivo de texto (.md) em um site formatado sem que você escreva uma única linha de HTML?

---

📚 Gabarito e Solução Comentada

Gabarito Explicado ### 1. Ativação do Serviço Resposta prática. A URL geralmente segue o padrão `https://seu-usuario.github.io/seu-repositorio/`. ### 2. Verificação do index.html Se o arquivo for renomeado para `home.html`, o GitHub Pages não conseguirá encontrar o ponto de entrada padrão. O usuário receberá um erro **404 (Not Found)** ou verá apenas a listagem de arquivos (caso o README não esteja configurado como fallback). ### 3. Deploy em Tempo Real Resposta prática. Geralmente o deploy leva entre **30 segundos a 2 minutos**, dependendo da fila de processamento do GitHub Actions. ### 4. Monitorando a "Esteira" (Actions) O ícone **verde** indica que o processo de "Build" (construção) e "Deployment" (publicação) foi concluído com sucesso e o site foi atualizado. ### 5. Temas Automáticos (Jekyll) O GitHub utiliza um motor chamado **Jekyll**. Ele lê o conteúdo do seu arquivo Markdown e o "injeta" dentro de um template HTML/CSS pronto. Isso permite focar apenas no conteúdo, deixando o design a cargo do gerador de site estático.