hospedar arquivos estaticos github cdn

Hospedar arquivos estáticos CSS e JS no github

Hospedar arquivos estáticos CSS e JS no github, aprenda hospedar grátis arquivos estáticos como css e javascript no github, uma alternativa ao google drive.

O google bloqueou esse recurso no drive e essa é uma alternativa aos usuários do drive, veja como ter hospedagem de css e js gratuita no github.

Arquivos estáticos exigem alta disponibilidade e performance para deixa um site rápido.

São 4 passos necessários para que o arquivo funcione em seu website, veja:

  1. Ter uma conta no GitHub
  2. Criar um repositório no GitHub
  3. Colocar o código do arquivo estático no GitHub
  4. Habilitar o uso do arquivo no site RawGit

Hospedar arquivo .CSS e arquivo .JS grátis

Passo 1.

Crie uma conta no GitHub, é um serviço gratuito, basta realizar o cadastro.

Passo 2.

Crie um novo repositório no GitHub, é dentro do repositório que vai ser armazenados os arquivos estáticos criados, deixe como público.

criar repositorio github

Passo 3.

Para colocar o código é preciso copiar e colar o código em um arquivo criado ou fazer upload dos arquivos.

Antes de criar o primeiro arquivo, crie o readme, pode deixar ele vazio mesmo.

criar readme repositorio github

Depois vai aparecer essa tela, clique em create new file (criar novo arquivo) ou upload files (enviar arquivo), no exemplo vou criar.

criar arquivo repositorio github

Depois dê um nome para o arquivo (ex: style.css) e cole o conteúdo do arquivo e selecione para salvar.

conteudo arquivo repostorio github

Caso tenha selecionado para fazer upload, apenas selecione 1 ou mais arquivos para enviar.

Passo 4.

Atenção, esse passo até 2018 era usado o site rawgit.com, entretanto esse site saiu do ar e a alternativa é usar o site jsdelivr.com.

Quem usava o site rawgit, utilize esse conversor para migrar para o novo site jsdelivr.com: https://www.jsdelivr.com/rawgit.

O site jsdelivr.com é uma CDN nativa e oferece excelente performance em todos os pontos do mundo, possuindo dezenas de servidores espalhados em diversos países.

Para migrar um arquivo estático do github para o jsdelivr.com, utilizar a página de ajuda:

https://www.jsdelivr.com/github

Exemplo:

https://github.com/h5bp/html5-boilerplate/blob/main/src/js/app.js
foi para:
https://cdn.jsdelivr.net/gh/h5bp/html5-boilerplate@main/src/js/app.js

migrar github jsdelivr

Caso queria comprimir o arquivo, basta adicionar min antes da extensão, veja:

O arquivo acima por exemplo ficaria:
https://github.com/h5bp/html5-boilerplate/blob/main/src/js/app.min.js

O jsdelivr transformas projetos NPM, github e wordpress em CDN, portanto qualquer arquivo JS e CSS nesses projetos pode ser convertido para utilizar a estrutura de CDN deles.

Como o foco aqui é o github, vou mostrar como transformar um arquivo CSS ou JS em um link disponível para utilizar em qualquer projeto como um site.

Vou dar o exemplo usando esse javascript de um projeto de fotos que não fornece uma CDN, seria necessário baixar os aquivos e usar no seu servidor, mas como ele está no GH vamos usar de exemplo o arquivo JS:
https://github.com/vvvmax/unitegallery/blob/master/package/unitegallery/js/unitegallery.min.js

https://cdn.jsdelivr.net/gh/user/repo@version/file

O link começa com https://cdn.jsdelivr.net/gh, que é o URL da CDN + GH que significa que vai buscar um projeto no github.

Depois vem o USER, que é o usuário que mantém o pacote no github, no caso se for usar um código seu, seria seu usuário.

No exemplo da galeria o user seria vvvmax.

Depois vem REPO, que é o repositório, no caso do exemplo, a repo seria unitegallery.

Em seguida é preciso colocar @version, que seria o branche do repositório, existem projetos que organizam as versões em branches, se for usar seu repositório, geralmente o padrão é master, mas basta pegar no URL.

Vejamos o exemplo, o repositório é master.

Para finalizar, tem que informar o FILE, ou arquivo que vai ser disponibilizado via CDN, lembrando que ele pode estar na raiz, então basta colocar o nome, ou coloque as pastas até chegar no arquivo.

O exemplo está depois de diversas pastas, então a parte arquivo vai ser:
package/unitegallery/js/unitegallery.min.js

Pronto, o link final e: https://cdn.jsdelivr.net/gh/vvvmax/unitegallery@master/package/unitegallery/js/unitegallery.min.js

Veja a comparação dos links:

https://github.com/vvvmax/unitegallery/blob/master/package/unitegallery/js/unitegallery.min.js
https://cdn.jsdelivr.net/gh/vvvmax/unitegallery@master/package/unitegallery/js/unitegallery.min.js

Agora o arquivo CSS ou Javascript está hospedado em uma CDN com uptime próximo a 100% e com boa performance para turbinar seu site.

Para mais informacoes, utilize o site deles com exemplos:
https://www.jsdelivr.com/features

Atualização 25/09/2019:

Existe um novo serviço chamado Statically, que ofecere CDN através de repositórios GitHub, GitLab, Bitbucket, similar ao jsdelivr.

Utilize a ferramenta do site deles para importar um arquivo estático do github para o statically:

https://statically.io/convert/

Exemplo:

https://github.com/h5bp/html5-boilerplate/blob/main/src/js/app.js
foi para:
https://cdn.statically.io/gh/h5bp/html5-boilerplate/main/src/js/app.js

migrar github statically

O statically tem o recurso de comprimir arquivos JS e CSS apenas adicionando min antes do final

O arquivo acima por exemplo ficaria:
https://github.com/h5bp/html5-boilerplate/blob/main/src/js/app.min.js

O statically também oferece uma rede CDN especializado para imagens.

Dica de performance

O jsdelivr oferece a possibilidade de combinar arquivos, portanto ganhar em performance economizando requests.

Para combinar 2 ou mais arquivos, antes de GH, coloque /combine/

Depois ao final do arquivo .js coloque , (vírgula) e inicie exatamente o outro link do arquivo.

Veja o exemplo abaixo combinando 2 arquivos JS do mesmo projeto:

https://cdn.jsdelivr.net/combine/gh/vvvmax/unitegallery@master/package/unitegallery/js/unitegallery.min.js,gh/vvvmax/unitegallery@master/package/unitegallery/js/jquery-11.0.min.js

Lembrando que nesse caso foi combinado um arquivo jquery, que nem sempre funciona ao ser combinado com outro JS, se o JS usar o jquery como requisito.

Hospedar site grátis

É possível sim hospedar um site grátis no github, mas o site precisar ser estático, ou seja, ser um site .HTML

Sites como wordpress que necessitam de um banco de dados, ou mesmo um site que necessite apenas de PHP como o GRAV não é possível hospedar no github.