Hospedar arquivos no GitHub e importá-los no Blogger

Códigos CSS, JavaScript ou até mesmo outros tipos de arquivos muitas vezes são úteis para a customização de um blog, mas deixá-los diretamente no código fonte, junto com todo o restante do blog pode acabar poluindo ou dificultando a organização do código. Para nos ajudar a "tirar" estes trechos de códigos do nosso fonte, podemos hospedá-los em alguns sites, como o Gist ou o GitHub, e fazer a importação deles dentro do nosso código.

Aprenda a hospedá-los no GitHub e a como utilizar eles em seu blog com este tutorial.

Criando uma conta

Para criar uma conta no GitHub e no Gist, você deve acessar esta página e clicar em "Sign Up" ou "Inscrever-se". Criando uma conta, você pode utilizá-la tanto no GitHub quanto no Gist. Caso ele peça para você criar um repositório ou algo do tipo, não faça ainda. Por enquanto, você precisa apenar criar uma conta e logar.

---

Hospedando e importando arquivos do GitHub

O GitHub, neste caso, é ideal para a hospedagem de arquivos que não sejam arquivos de texto (como arquivos de fontes ou outros), mas todos os arquivos também podem ser hospedados nele. Se você quiser hospedar arquivos CSS, JS e outros tipos de arquivos, é recomendado utilizar um repositório no GitHub para facilitar a organização destes arquivos. Você pode acessá-lo clicando aqui.

1 Primeiramente, estando logado, clique no canto superior direito no símbolo de "+" e selecione "Repositório" para criar um novo repositório.

2 Na tela de cadastrod e um novo repositório (guia "Code"/"Código"), informe um nome de sua preferência, selecione a opção "Público" e marque a opção "Criar arquivo README", conforme na imagem abaixo. As outras opções não precisam ser alteradas.

3 Clique em "Criar repositório".

4 Você será redirecionado para uma tela semelhante a esta:

5 Clique em "Settings"/"Configurações", vá até a guia de "Pages"/"Páginas" e selecione a branch main. Isso facilitará a busca dos arquivos do seu repositório na hora de importar.

A alteração deve ser salva automáticamente quando você selecionar a branch.

6 Na página inicial do repositório, você pode criar arquivos (como no Gist) ou fazer upload de arquivos da sua máquina.

Importante destacar que para fazer a alteração você deve fazer um "commit".

7 Com o arquivo criado, você pode importá-lo dentro do seu blog. Mas para isso, você deve seguir o formato do link abaixo:

https://{SEU_USUARIO}.github.io/{NOME_REPOSITÓRIO}/{NOME_ARQUIVO.EXTENSAO}

Pode demorar alguns segundos para que o arquivo seja disponibilizado no link criado acima. Para garantir, espere que o "check" fique verde, como neste exemplo:

8 No Blogger, vá em Tema > Editar HTML > Clique na caixa de código e aperte Ctrl + F ou F3 > Procure por </head> > Cole o seguinte código acima:

Para códigos CSS: <link href='LINK_DO_ARQUIVO' rel='stylesheet'/> Para códigos JavaScript: <script src='LINK_DO_ARQUIVO'/>

8 Salve.

Seu link não precisa ser alterado quando os arquivos forem atualizados. Qualquer alteração feita irá refletir nos lugares que estão importando o arquivo.