{"id":57543,"date":"2023-02-27T10:05:04","date_gmt":"2023-02-27T13:05:04","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=57543&preview=true&preview_id=57543"},"modified":"2025-01-17T10:23:38","modified_gmt":"2025-01-17T13:23:38","slug":"criando-site-estatico-github-pages","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/criando-site-estatico-github-pages\/","title":{"rendered":"Preparar, Apontar, J\u00e1: Criando um Site Est\u00e1tico com o GitHub Pages"},"content":{"rendered":"

Com todas as ferramentas e frameworks de desenvolvimento web atuais, criar um site est\u00e1 ficando cada vez mais complicado. Mas \u00e0s vezes, voc\u00ea n\u00e3o precisa de muita interatividade em seu site. Caso voc\u00ea esteja focado em levar as informa\u00e7\u00f5es para o espectador e n\u00e3o precise de funcionalidades complexas, um site est\u00e1tico pode ser a escolha certa.<\/p>\n\n

Neste tutorial, voc\u00ea aprender\u00e1 o que \u00e9 um site est\u00e1tico, incluindo suas vantagens, suas limita\u00e7\u00f5es e como criar e implementar um site pessoal simples criado com HTML e Bootstrap gratuitamente usando o GitHub Pages.

<\/div><\/kinsta-auto-toc><\/p>\n

O que \u00e9 GitHub Pages?<\/h2>\n

GitHub<\/a> \u00e9 uma plataforma baseada na web para hospedar reposit\u00f3rios Git e colaborar em projetos de software. Ele oferece ferramentas para compartilhar e rastrear altera\u00e7\u00f5es de c\u00f3digo, gerenciar e revisar c\u00f3digo, e a habilidade de abrir e revisar solicita\u00e7\u00f5es pull.<\/p>\n

N\u00e3o confunda Git e GitHub<\/a>! GitHub \u00e9 um servi\u00e7o de hospedagem que permite a colabora\u00e7\u00e3o entre os desenvolvedores, enquanto Git \u00e9 o software de controle de vers\u00e3o local que voc\u00ea usa para salvar snapshots do estado do seu projeto de software.<\/p>\n

GitHub Pages<\/a> \u00e9 uma das melhores funcionalidades do GitHub. \u00c9 um servi\u00e7o que permite hospedar um site est\u00e1tico<\/a> diretamente de um reposit\u00f3rio GitHub. Isso significa que voc\u00ea pode usar seu reposit\u00f3rio para armazenar o c\u00f3digo e arquivos do seu site, e o GitHub ir\u00e1 public\u00e1-los automaticamente como um site que voc\u00ea pode acessar on-line.<\/p>\n

Em resumo, GitHub Pages \u00e9 uma maneira r\u00e1pida e f\u00e1cil de colocar seu site em funcionamento, e \u00e9 especialmente \u00fatil para mostrar seu portf\u00f3lio<\/a>, projetos de c\u00f3digo aberto, ou outro conte\u00fado est\u00e1tico.<\/p>\n

Sites est\u00e1ticos vs din\u00e2micos<\/h3>\n

Como vimos, o GitHub Pages fornecem uma maneira de implementar sites est\u00e1ticos<\/a>. Mas qual \u00e9 a diferen\u00e7a entre um site est\u00e1tico e um site din\u00e2mico?<\/p>\n

Come\u00e7aremos discutindo o conte\u00fado dos sites.<\/p>\n

Conte\u00fado est\u00e1tico refere-se aos elementos do site que permanecem os mesmos para todos os usu\u00e1rios, independentemente de quem eles s\u00e3o ou que a\u00e7\u00f5es eles tomam no site. Isso pode incluir elementos como texto, imagens e layout do site, assim como o c\u00f3digo e arquivos subjacentes que comp\u00f5em o site. Um site est\u00e1tico \u00e9 entregue ao usu\u00e1rio exatamente como est\u00e1 armazenado.<\/p>\n

Em contraste, conte\u00fado din\u00e2mico \u00e9 conte\u00fado que muda com base nas a\u00e7\u00f5es do usu\u00e1rio \u2014 como fazer login, interagir com um paywall ou comentar um artigo \u2014 ou outros fatores, como a hora ou o local atual.<\/p>\n

Por exemplo, um site que exibe uma imagem est\u00e1tica de um produto sempre mostrar\u00e1 a mesma imagem para cada usu\u00e1rio. Por outro lado, um site que exibe a hora atual mostrar\u00e1 uma hora diferente para cada usu\u00e1rio com base em sua localiza\u00e7\u00e3o (din\u00e2mica).<\/p>\n

Geralmente, podemos dizer que um site \u00e9 est\u00e1tico se apenas contiver HTML, CSS e JavaScript<\/a> no frontend<\/a>, sem tecnologias de servidor como PHP ou Python<\/a> que interagem com um banco de dados.<\/p>\n

\"O
O Twitter \u00e9 um site din\u00e2mico.<\/figcaption><\/figure>\n

Embora n\u00e3o seja poss\u00edvel construir sites din\u00e2micos usando GitHub Pages, voc\u00ea pode usar facilmente um CMS<\/a> como o WordPress<\/a>, ou geradores de sites est\u00e1ticos como Gatsby<\/a> ou Hugo<\/a>.<\/p>\n

Principais funcionalidades do GitHub Pages<\/h3>\n

Veremos os pontos fortes do GitHub Pages como um servi\u00e7o de hospedagem:<\/p>\n

    \n
  1. F\u00e1cil configura\u00e7\u00e3o e publica\u00e7\u00e3o:<\/strong> GitHub Pages facilita come\u00e7ar com apenas algumas etapas simples. Voc\u00ea pode habilitar o GitHub Pages para o seu reposit\u00f3rio e especificar a fonte para os arquivos do seu site, e o GitHub ir\u00e1 publicar automaticamente seu site e torn\u00e1-lo dispon\u00edvel em uma URL baseada no seu nome de usu\u00e1rio e nome do reposit\u00f3rio.<\/li>\n
  2. Dom\u00ednios personalizados:<\/strong> Com o GitHub Pages, voc\u00ea pode usar um nome de dom\u00ednio personalizado para o seu site ao inv\u00e9s da URL padr\u00e3o fornecida pelo GitHub. Isso permite que voc\u00ea use sua pr\u00f3pria marca e torna mais f\u00e1cil para os usu\u00e1rios encontrarem e acessarem seu site.<\/li>\n
  3. Suporte HTTPS:<\/strong> GitHub Pages oferece suporte para HTTPS, o que permite conex\u00f5es seguras ao seu site. Isso \u00e9 crucial para construir a confian\u00e7a do seu site.<\/li>\n
  4. Suporte Jekyll:<\/strong> GitHub Pages suporta Jekyll<\/a>, um gerador de sites est\u00e1tico que permite voc\u00ea criar sites sofisticados usando templates e outros recursos. Isso facilita a cria\u00e7\u00e3o de sites com apar\u00eancia profissional sem ter que escrever todo o c\u00f3digo do zero.<\/li>\n<\/ol>\n

    Limita\u00e7\u00f5es<\/h3>\n

    Como dito antes, voc\u00ea s\u00f3 pode criar sites est\u00e1ticos com o GitHub Pages. Se voc\u00ea quiser construir um projeto complexo com muitas funcionalidades, voc\u00ea precisar\u00e1 de outros servi\u00e7os de hospedagem<\/a>. Voc\u00ea tamb\u00e9m deve ter em mente que voc\u00ea n\u00e3o pode usar o GitHub Pages para prop\u00f3sitos comerciais, tais como a administra\u00e7\u00e3o de um neg\u00f3cio on-line, ou eCommerce<\/a>.<\/p>\n

    GitHub Pages n\u00e3o permite que seu site seja maior que 1 GB, o que significa que os arquivos do seu reposit\u00f3rio n\u00e3o podem ultrapassar essa quantidade de mem\u00f3ria. Na maioria das vezes, 1 GB \u00e9 mais do que suficiente para um site est\u00e1tico; apenas tenha certeza de comprimir suas imagens<\/a>.<\/p>\n

    Ele tamb\u00e9m tem um limite de largura de banda de 100 GB por m\u00eas. Esta quantidade de largura de banda seria suficiente para distribuir seu site para alguns milhares de pessoas por m\u00eas, ent\u00e3o, a menos que voc\u00ea tenha uma grande audi\u00eancia, voc\u00ea n\u00e3o ter\u00e1 problemas.<\/p>\n

    Criando e implantando<\/b> com o GitHub Pages: Guia passo a passo<\/h2>\n

    Criar uma p\u00e1gina GitHub \u00e9 um processo simples e direto para hospedar um site est\u00e1tico. Tenha em mente que se voc\u00ea precisar de algum tipo de conex\u00e3o de banco de dados, voc\u00ea deve ter um provedor de banco de dados<\/a> externo.<\/p>\n

    No pr\u00f3ximo guia, voc\u00ea aprender\u00e1 como criar uma p\u00e1gina GitHub do zero. Isso inclui a cria\u00e7\u00e3o de um reposit\u00f3rio remoto, a constru\u00e7\u00e3o de um site pessoal responsivo com HTML<\/a>, e a implanta\u00e7\u00e3o na web com o GitHub.<\/p>\n

    Vamos ao assunto!<\/p>\n

    1. Cadastre-se no GitHub<\/h3>\n

    Para come\u00e7ar, voc\u00ea deve ter uma conta GitHub ativa. Caso voc\u00ea ainda n\u00e3o tenha uma, cadastre-se aqui<\/a>.<\/p>\n

    \"P\u00e1gina
    P\u00e1gina de inscri\u00e7\u00e3o no GitHub.<\/figcaption><\/figure>\n

    Ap\u00f3s o login, voc\u00ea ser\u00e1 capaz de criar um reposit\u00f3rio remoto.<\/p>\n

    2. Criando um reposit\u00f3rio remoto<\/h3>\n

    Um reposit\u00f3rio \u00e9 um diret\u00f3rio onde voc\u00ea armazena todo o c\u00f3digo relacionado a um projeto em particular.<\/p>\n

    Na p\u00e1gina inicial do GitHub, clique no bot\u00e3o \u201cNew\u201d ou \u201cCreate repository\u201d localizado no painel esquerdo do site. Isso ir\u00e1 redirecion\u00e1-lo para um formul\u00e1rio onde voc\u00ea ir\u00e1 preencher as informa\u00e7\u00f5es do seu reposit\u00f3rio.<\/p>\n

    \"Crie
    Crie um reposit\u00f3rio GitHub.<\/figcaption><\/figure>\n

    Estes pr\u00f3ximos passos s\u00e3o cruciais:<\/p>\n

      \n
    1. Defina o nome do seu reposit\u00f3rio para \"yourusername\".github.io<\/code>.<\/li>\n
    2. Verifique o bot\u00e3o p\u00fablico. Voc\u00ea deve configurar o reposit\u00f3rio para Public<\/strong>\u00a0para publicar seu site.<\/li>\n
    3. Clique em Add a README file.<\/li>\n<\/ol>\n

      Voc\u00ea s\u00f3 pode ter um reposit\u00f3rio para uma determinada conta pessoal ou organiza\u00e7\u00e3o. \u00c9 por isso que o nome do reposit\u00f3rio \u00e9 o seu nome de usu\u00e1rio e o dom\u00ednio github.io<\/code>. Mais tarde, veremos como configurar um site a partir de um reposit\u00f3rio.<\/p>\n

      A menos que voc\u00ea tenha o GitHub Pro, voc\u00ea s\u00f3 pode publicar uma p\u00e1gina do GitHub se o reposit\u00f3rio for p\u00fablico. Tenha isso em mente caso voc\u00ea n\u00e3o queira compartilhar o c\u00f3digo-fonte do seu site publicamente.<\/p>\n

      Ap\u00f3s seguir as etapas acima, voc\u00ea dever\u00e1 ter algo semelhante ao exemplo abaixo:<\/p>\n

      \"Forma
      Forma do repo. de GitHub.<\/figcaption><\/figure>\n

      Se voc\u00ea j\u00e1 tem o c\u00f3digo-fonte funcional do seu site, voc\u00ea pode pular o fluxo de trabalho comum do Git<\/a>\u00a0e, em vez disso, soltar os arquivos diretamente no repo.<\/p>\n

      Para fazer isso, clique no menu Add file<\/code> em seu reposit\u00f3rio, e selecione a op\u00e7\u00e3o Upload files<\/strong>. Ent\u00e3o selecione os arquivos do seu site, com o arquivo principal em HTML chamado index.html<\/code>. Lembre-se de colocar todos os seus arquivos CSS e JavaScript no reposit\u00f3rio.<\/p>\n

      Finalmente, aperte o bot\u00e3o Commit changes<\/strong>.<\/p>\n

      \"Carregue
      Carregue arquivos no GitHub.<\/figcaption><\/figure>\n

      Nos pr\u00f3ximos passos, estaremos construindo um site pessoal simples com HTML e Bootstrap. Em seguida, faremos o upload para o GitHub e o configuraremos como uma p\u00e1gina p\u00fablica do GitHub com um dom\u00ednio personalizado.<\/p>\n

      3. Construindo um site pessoal<\/h3>\n

      Come\u00e7aremos clonando o GitHub repo que acabamos de criar. Para fazer isso, certifique-se de que voc\u00ea j\u00e1 tenha o cliente Git<\/a> instalado em seu computador. (Caso voc\u00ea n\u00e3o tenha, d\u00ea uma olhada em nosso tutorial sobre Git e GitHub<\/a>)<\/p>\n