[🛠] Como adicionar imagens a um blog no GitHub Pages

✨ Resumo do GPT 　

Guia de como adicionar imagens a um blog no GitHub Pages.

Eu queria adicionar imagens ao meu blog no GitHub Pages, mas apareceu um problema.

• Eu tinha esquecido como fazer.

• Lembrei que havia um limite de 1GB por repositório.
  • Atualizado em 2025.1.13
    • 1GB é uma recomendação, não um limite obrigatório.
    • Se passar de 5GB, o GitHub pode enviar um e-mail.
    • Não há um limite total de capacidade declarado separadamente.
    • Um único arquivo tem limite de 100MB. (Isso pode ser resolvido com Git LFS.)
    • Se o repositório ficar grande, há uma boa chance de a velocidade de clone/push ser afetada.
• Lembrei que também existe a opção de usar hospedagem externa de imagens.

… Em uma época como a de hoje, qual seria a melhor forma de fazer isso?

✨ Clique ✨

O texto abaixo foi escrito com referência à resposta do GPT-4o.

1. Método comum: usar a pasta assets/images

Salve as imagens dentro da pasta assets/images do projeto do blog e vincule-as no post.

Exemplo

• Caminho para salvar a imagem:

  assets/images/example.jpg
  

• Uso no post:

  ![Descrição da imagem](/assets/images/example.jpg)
  

Esse método é simples, mas pode se tornar um problema se o repositório chegar ao limite recomendado de 1GB.

---

2. O que fazer quando a capacidade passar a ser um problema

1) Hospedagem externa de imagens

Use um serviço externo em vez de armazenar as imagens no repositório do GitHub.

• Imgur: envie a imagem e use a URL.

  ![Descrição da imagem](https://i.imgur.com/example.jpg)
  

• Google Photos/Dropbox: use links de armazenamento em nuvem.

---

2) Criar um repositório independente para imagens

Crie um repositório separado no GitHub Pages apenas para gerenciar imagens.

1. Crie um novo repositório. (Ex.: blog-images)
2. Faça upload das imagens e envie com push.

3. Use o link da imagem:

   ![Descrição da imagem](https://username.github.io/blog-images/example.jpg)
   

---

3. Configuração para se preparar para mudanças de URL

Você pode reduzir o trabalho de corrigir links definindo um caminho-base de imagens em _config.yml.

1. Adicione isto a _config.yml:

   image_baseurl: "/assets/images"
   

2. Ao escrever um post:

      
   ![Descrição da imagem]({{ site.image_baseurl }}/example.jpg)
      
   

3. Se mudar para um repositório de imagens, altere apenas image_baseurl:

   image_baseurl: "https://username.github.io/blog-images"
   

---

4. Conclusão

Por enquanto, armazene as imagens na pasta assets/images. Se a capacidade virar um problema depois, introduza hospedagem externa ou um repositório dedicado a imagens.