Com todas as ferramentas e frameworks de desenvolvimento web atuais, criar um site está ficando cada vez mais complicado. Mas às vezes, você não precisa de muita interatividade em seu site. Caso você esteja focado em levar as informações para o espectador e não precise de funcionalidades complexas, um site estático pode ser a escolha certa.
Neste tutorial, você aprenderá o que é um site estático, incluindo suas vantagens, suas limitações e como criar e implementar um site pessoal simples criado com HTML e Bootstrap gratuitamente usando o GitHub Pages.
O que é GitHub Pages?
GitHub é uma plataforma baseada na web para hospedar repositórios Git e colaborar em projetos de software. Ele oferece ferramentas para compartilhar e rastrear alterações de código, gerenciar e revisar código, e a habilidade de abrir e revisar solicitações pull.
Não confunda Git e GitHub! GitHub é um serviço de hospedagem que permite a colaboração entre os desenvolvedores, enquanto Git é o software de controle de versão local que você usa para salvar snapshots do estado do seu projeto de software.
GitHub Pages é uma das melhores funcionalidades do GitHub. É um serviço que permite hospedar um site estático diretamente de um repositório GitHub. Isso significa que você pode usar seu repositório para armazenar o código e arquivos do seu site, e o GitHub irá publicá-los automaticamente como um site que você pode acessar on-line.
Em resumo, GitHub Pages é uma maneira rápida e fácil de colocar seu site em funcionamento, e é especialmente útil para mostrar seu portfólio, projetos de código aberto, ou outro conteúdo estático.
Sites estáticos vs dinâmicos
Como vimos, o GitHub Pages fornecem uma maneira de implementar sites estáticos. Mas qual é a diferença entre um site estático e um site dinâmico?
Começaremos discutindo o conteúdo dos sites.
Conteúdo estático refere-se aos elementos do site que permanecem os mesmos para todos os usuários, independentemente de quem eles são ou que ações eles tomam no site. Isso pode incluir elementos como texto, imagens e layout do site, assim como o código e arquivos subjacentes que compõem o site. Um site estático é entregue ao usuário exatamente como está armazenado.
Em contraste, conteúdo dinâmico é conteúdo que muda com base nas ações do usuário — como fazer login, interagir com um paywall ou comentar um artigo — ou outros fatores, como a hora ou o local atual.
Por exemplo, um site que exibe uma imagem estática de um produto sempre mostrará a mesma imagem para cada usuário. Por outro lado, um site que exibe a hora atual mostrará uma hora diferente para cada usuário com base em sua localização (dinâmica).
Geralmente, podemos dizer que um site é estático se apenas contiver HTML, CSS e JavaScript no frontend, sem tecnologias de servidor como PHP ou Python que interagem com um banco de dados.
Embora não seja possível construir sites dinâmicos usando GitHub Pages, você pode usar facilmente um CMS como o WordPress, ou geradores de sites estáticos como Gatsby ou Hugo.
Principais funcionalidades do GitHub Pages
Veremos os pontos fortes do GitHub Pages como um serviço de hospedagem:
- Fácil configuração e publicação: GitHub Pages facilita começar com apenas algumas etapas simples. Você pode habilitar o GitHub Pages para o seu repositório e especificar a fonte para os arquivos do seu site, e o GitHub irá publicar automaticamente seu site e torná-lo disponível em uma URL baseada no seu nome de usuário e nome do repositório.
- Domínios personalizados: Com o GitHub Pages, você pode usar um nome de domínio personalizado para o seu site ao invés da URL padrão fornecida pelo GitHub. Isso permite que você use sua própria marca e torna mais fácil para os usuários encontrarem e acessarem seu site.
- Suporte HTTPS: GitHub Pages oferece suporte para HTTPS, o que permite conexões seguras ao seu site. Isso é crucial para construir a confiança do seu site.
- Suporte Jekyll: GitHub Pages suporta Jekyll, um gerador de sites estático que permite você criar sites sofisticados usando templates e outros recursos. Isso facilita a criação de sites com aparência profissional sem ter que escrever todo o código do zero.
Limitações
Como dito antes, você só pode criar sites estáticos com o GitHub Pages. Se você quiser construir um projeto complexo com muitas funcionalidades, você precisará de outros serviços de hospedagem. Você também deve ter em mente que você não pode usar o GitHub Pages para propósitos comerciais, tais como a administração de um negócio on-line, ou eCommerce.
GitHub Pages não permite que seu site seja maior que 1 GB, o que significa que os arquivos do seu repositório não podem ultrapassar essa quantidade de memória. Na maioria das vezes, 1 GB é mais do que suficiente para um site estático; apenas tenha certeza de comprimir suas imagens.
Ele também tem um limite de largura de banda de 100 GB por mês. Esta quantidade de largura de banda seria suficiente para distribuir seu site para alguns milhares de pessoas por mês, então, a menos que você tenha uma grande audiência, você não terá problemas.
Criando e implantando com o GitHub Pages: Guia passo a passo
Criar uma página GitHub é um processo simples e direto para hospedar um site estático. Tenha em mente que se você precisar de algum tipo de conexão de banco de dados, você deve ter um provedor de banco de dados externo.
No próximo guia, você aprenderá como criar uma página GitHub do zero. Isso inclui a criação de um repositório remoto, a construção de um site pessoal responsivo com HTML, e a implantação na web com o GitHub.
Vamos ao assunto!
1. Cadastre-se no GitHub
Para começar, você deve ter uma conta GitHub ativa. Caso você ainda não tenha uma, cadastre-se aqui.
Após o login, você será capaz de criar um repositório remoto.
2. Criando um repositório remoto
Um repositório é um diretório onde você armazena todo o código relacionado a um projeto em particular.
Na página inicial do GitHub, clique no botão “New” ou “Create repository” localizado no painel esquerdo do site. Isso irá redirecioná-lo para um formulário onde você irá preencher as informações do seu repositório.
Estes próximos passos são cruciais:
- Defina o nome do seu repositório para
"yourusername".github.io. - Verifique o botão público. Você deve configurar o repositório para Public para publicar seu site.
- Clique em Add a README file.
Você só pode ter um repositório para uma determinada conta pessoal ou organização. É por isso que o nome do repositório é o seu nome de usuário e o domínio github.io. Mais tarde, veremos como configurar um site a partir de um repositório.
A menos que você tenha o GitHub Pro, você só pode publicar uma página do GitHub se o repositório for público. Tenha isso em mente caso você não queira compartilhar o código-fonte do seu site publicamente.
Após seguir as etapas acima, você deverá ter algo semelhante ao exemplo abaixo:
Se você já tem o código-fonte funcional do seu site, você pode pular o fluxo de trabalho comum do Git e, em vez disso, soltar os arquivos diretamente no repo.
Para fazer isso, clique no menu Add file em seu repositório, e selecione a opção Upload files. Então selecione os arquivos do seu site, com o arquivo principal em HTML chamado index.html. Lembre-se de colocar todos os seus arquivos CSS e JavaScript no repositório.
Finalmente, aperte o botão Commit changes.
Nos próximos 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ágina pública do GitHub com um domínio personalizado.
3. Construindo um site pessoal
Começaremos clonando o GitHub repo que acabamos de criar. Para fazer isso, certifique-se de que você já tenha o cliente Git instalado em seu computador. (Caso você não tenha, dê uma olhada em nosso tutorial sobre Git e GitHub)
Vá para a aba code do seu repositório e copie a URL do SSH na opção SHH.
Então, acione um terminal ou linha de comando. Na maioria das distribuições Linux e macOS, você pode usar o atalho Ctrl + Alt + T, ou verificar através do menu de aplicativos do seu sistema para Terminal. No Windows, você pode usar o Git BASH instalado por padrão com Git, o CMD, PowerShell, ou um cliente GUI.
Em seu terminal, digite git clone e a URL que você copiou. Isso irá baixar e criar uma cópia do repositório remoto em sua máquina local para que você possa construir seu site.
Então digite a nova pasta chamada yourusername.github.io com cd e ls. Você deve ver a pasta .git, que contém a configuração e os metadados do seu projeto, bem como o arquivo README.md caso você tenha criado um.
Abra seu editor de texto favorito (como Sublime Text), e vamos começar a criar seu site.
Na raiz do repositório, crie um arquivo chamado index.html (este nome é exigido pelo GitHub Pages) e digite a estrutura típica de código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kinsta User</title>
</head>
<body>
</body>
</html>Como mencionamos anteriormente, usaremos o Bootstrap 5.0, um framework CSS de código aberto que nos ajuda a construir sites mais facilmente. Como você verá, não teremos que usar CSS personalizado para este site em particular.
Para colocar o Bootstrap em nossa página, precisaremos incluir o CSS compilado e o JavaScript através de um CDN. Cole o seguinte código dentro do HTML <head> para poder usar o Bootstrap CSS:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">Desta mesma forma, incluiremos também o Devicon CDN para poder usar ícones SVG de linguagens e tecnologias de programação populares sem grandes problemas:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">Agora, para incluir o JavaScript, insira o seguinte código logo acima do final da tag </body>:
<!-- JavaScript: Above -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>Daremos o pontapé inicial criando um cabeçalho para nosso site. Será um cabeçalho escuro, com links para nossa página de índice e duas outras páginas — “Projetos” e “Registros de Leitura” — que você pode criar mais tarde:
<nav class="navbar navbar-dark navbar-expand-lg bg-dark ">
<div class="container-fluid">
<div class="mx-4">
<a class="navbar-brand" href="#">Kinsta User</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reading Log</a>
</li>
</ul>
</div>
</div>
</nav>Usamos o Bootstrap wrapper navbar e navbar-expand-lg para criar um contêiner responsivo que colapsa quando a largura de exibição é menor do que 992px. Isso acontece devido à opção de grade lg. Caso você queira saber mais sobre as opções de grid, visite a página de layout do Bootstrap.
Agora, criaremos duas colunas responsivas dentro de um contêiner: uma para uma imagem grátis do Unsplash e outra para uma descrição nossa:
<div class="container my-4 ">
<div class="row justify-content-center">
<div class="col-lg mb-lg-4">
<img src="image.jpg" class="img-fluid" alt="" srcset="">
</div>
<div class="col-lg mx-2 align-self-center">
<div class="my-3">
<h1 class="text-center">I'm a Kinsta User</h1>
<p>As a passionate software developer, I am deeply enthusiastic about creating and
developing software applications. I am constantly learning and experimenting with new
technologies and approaches, and I have a strong desire to create innovative and effective
solutions to complex problems. I am driven by my curiosity and love for problem-solving, and
I
am committed to producing high-quality, well-designed software that meets the needs of
users.
</p>
</div>
</div>
</div>
</div>Como você pode observar, estamos buscando uma imagem de um arquivo local, então ela deve estar no repositório quando enviarmos nossas alterações para o repo do GitHub.
Finalmente, no nosso contêiner Bootstrap, usaremos ícones SVG do Devicon, juntamente com um pouco de CSS interno para fazer nossas habilidades se destacarem:
<!-- Inside the container created above -->
<div class="my-4">
<div class="text-center mb-4">
<h1>My Skills</h1>
</div>
<div class="row ">
<style>
I {
font-size: 4em;
}
</style>
<div class="col">
<div class="text-center">
<h4>WordPress</h4>
<i class="devicon-wordpress-plain"></i>
</div>
</div>
<div class="col">
<div class="text-center">
<h4>Django</h4>
<i class="devicon-django-plain"></i>
</div>
</div>
<div class="col">
<div class="text-center">
<h4>Python</h4>
<i class="devicon-python-plain"></i>
</div>
</div>
<div class="col">
<div class="text-center">
<h4>GitHub</h4>
<i class="devicon-github-original" ></i>
</div>
</div>
</div>
</div>Como usamos a tag HTML <i>, podemos tratá-la como uma fonte. Assim, definimos o tamanho da logo para 4 em, declarando na tag style.
Aqui está o resultado deste simples site pessoal:
Você sabia que mais de 50% do tráfego do site vem de dispositivos móveis? Porque usamos Bootstrap, salvamos muita codificação CSS, e também conseguimos um site responsivo, como você pode verificar abaixo.
Você pode customizar este site o tanto que quiser. Aqui está a fonte completa sobre o GitHub, à sua disposição.
Você também pode conectar um CMS headless, como o Ghost, usando uma de nossas soluções completas de Hospedagem de Aplicativos. Você pode se conectar diretamente ao seu repositório GitHub através do seu painel MyKinsta e ter seu novo site funcionando em apenas alguns minutos.
É hora de enviar seus arquivos. Para fazer isso, execute os seguintes comandos no seu terminal, no nível superior do seu projeto.
git add .
git commit -m "Added website source code and image"
git pushAgora, podemos usar este site para configurar nossa página do GitHub.
4. Publicando uma página de usuário no GitHub
Assim que você enviar o index.html para o repositório remoto com o seu nome de usuário, o GitHub iniciará automaticamente um processo de fluxo de trabalho para configurar o seu site on-line. Isso pode levar alguns minutos, mas você terá seu site estático funcionando automaticamente.
A URL do seu site será algo como: https://kinstauser.github.io/
Se após 10 minutos o seu site não estiver on-line, você pode tentar fazer uma alteração falsa no seu código (por exemplo, adicionar um espaço) e pressionar novamente para reativar o processo de build do GitHub Pages.
5. Publicando uma página de repositório no GitHub
Até agora, criamos um site de usuário, mas se você deseja ter um multisite GitHub publicado é necessário usar um site de projeto.
Como exemplo, usaremos o site de tecnologia HTML que criamos no tutorial Git for Web development.
A maneira mais fácil é ir para a aba Settings do nosso repositório, depois ir para a opção Pages dentro da seção “Code and automation”.
Selecione a fonte Deploy from a branch e clique na branch de onde você quer implementar os arquivos. É amplamente recomendado publicar no main branch, mas criar recursos e corrigir bugs usando branchs auxiliares, e então fundi-los. Desta forma você não introduzirá erros no site publicado tão facilmente.
Uma vez selecionado a branch, selecione a pasta de onde você quer servir os arquivos — geralmente a raiz (/) — e clique em salvar.
Espere por alguns minutos. O seu site deve estar disponível em "yourusername".github.io/.
Para retirar do ar um site de repositório, você pode ir em Settings, depois em Pages, e clicar na opção de três pontos. Você verá uma caixa com a mensagem Unpublish site.
Ótimo! Você tem o site do seu projeto código aberto em funcionamento, mas o nome do domínio em si é longo e certamente não é fácil de lembrar. Veremos como podemos melhorar isso.
6. Configurando um domínio personalizado
A maneira mais fácil de configurar um domínio personalizado para uma página GitHub e garantir que ele funcione é ir ao seu provedor DNS e criar quatro registros A para os endereços IP do GitHub Pages:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153Você também deve criar um registro CNAME com yourusername.github.io como alvo. Normalmente, as alterações no DNS são lentas, portanto seja paciente, pode levar até um dia inteiro.
Após fazer isso, vá para a seção Custom domain nas configurações do seu repo, digite seu domínio, clique no botão Save e aguarde o GitHub verificar o seu domínio personalizado.
Além disso, se o seu DNS suportar, selecione a opção Enforce HTTPS para o seu site ser servido apenas por HTTPS.
Parabéns! Se você acompanhou até este ponto do tutorial, você tem um site estático hospedado no GitHub Pages de graça.
Melhores práticas para o GitHub Pages
Antes de nos despedirmos, aqui estão algumas das melhores práticas que você deve considerar ao publicar um site no GitHub:
- Nunca faça compromissos diretos com a branch a qual você está implantando. Crie alterações em outras branches, depois crie um pedido de pull.
- Selecione um bom domínio para o seu site, se você puder pagar por ele. É uma das decisões mais importantes para à sua marca pessoal ou de projeto.
- Não use o GitHub Pages para fins comerciais, como a criação de um site de eCommerce.
- Avalie às suas necessidades. É ótimo poder publicar um site estático de graça, mas se você está esperando muito tráfego ou quer recursos complexos, pagar por um ótimo serviço de hospedagem é o caminho a seguir.
Resumo
O desenvolvimento web está ficando cada vez mais complicado a cada dia. Sites estáticos estão aqui desde o surgimento da internet, e eles são uma ótima maneira de começar a criar projetos.
Neste tutorial, você aprendeu o que são sites estáticos, e como configurá-los on-line usando o GitHub Pages. Você criou um site pessoal simples usando Bootstrap e o publicou como seu site de usuário do GitHub. Você também aprendeu como colocar o site de um projeto em funcionamento e como iniciá-lo se necessário.
Em geral, GitHub Pages é uma maneira conveniente e poderosa de hospedar seu site estático de graça. Se você está procurando mostrar seu portfólio, compartilhar seus projetos de código aberto ou começar a criar uma presença on-line, GitHub Pages é uma excelente escolha. Uma vez que você receba tráfego suficiente ou esteja pronto para criar um site completo, você pode mudar sem problemas para outros serviços de hospedagem de aplicativos como a Kinsta.
Daniel is a self-taught Python Developer, Technical Writer, and long-life learner. He enjoys creating software from scratch and explaining this process through stunning articles. Follow him on Twitter: @DaniDiazTech
Deixe um comentário