Por que você quer um site no GitHub?
Porque é fácil e gratuito. Antes de começar, vamos dar uma olhada em algumas vantagens e desvantagens, e ver se isso é adequado às suas necessidades.
Vantagens
Ele cuida do nome de domínio para você, e você não precisa se preocupar em ser cobrado pelo armazenamento ou pelo alto tráfego. Tudo o que você precisa é de uma conta gratuita no GitHub.
Desvantagens
Você não pode hospedar um site dinâmico no GitHub Pages, apenas um site estático. O que significa que você não pode hospedar um servidor que escute o tráfego de entrada, como usando express.js ou flask; você só pode hospedar um site estático. No entanto, ele pode ser um site estático dinâmico — você ainda pode executar scripts nele, só que esses scripts precisam ser pré-carregados.
Outra desvantagem é que, se você estiver usando o GitHub Pages com uma conta gratuita, seu repositório do GitHub (os arquivos e diretórios do seu site) será público. O que significa que todos podem ver e visitar seus arquivos. Então é melhor não incluir nada confidencial na pasta do seu site.
Dito isso, ele ainda é bom para hospedar um site simples cujo código você não se importa em compartilhar. Digamos, seu currículo pessoal, um site simples de empresa ou um blog simples. Ou você só quer testar seu próprio aplicativo web estático dinâmico.
Pré-requisitos
- Um computador com internet.
- Conhecimentos básicos de informática.
- Uma conta gratuita no GitHub.
Guia passo a passo sobre como criar uma página gratuita no GitHub
- Crie uma conta no GitHub.
Depois de fazer login, crie um novo repositório. Certifique-se de selecionar “Public”.
Depois de criar um repositório vazio, toque em “create new file”.
- Copie e cole o código de exemplo abaixo e nomeie-o como index.html para criar este arquivo.
Deve ficar assim. Clique em commit changes.
Vá para a aba Settings > Pages na lateral > Branches - selecione main e clique em save.
Agora volte ao seu repositório e aguarde alguns minutos.
Atualize a página e você verá que uma página do GitHub foi publicada com sucesso.
Muito bem! Sua página do GitHub já está pronta através deste link!
Código de exemplo:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Website</title> <link rel="stylesheet" href="./style.css"> <link rel="icon" href="./favicon.ico" type="image/x-icon"> </head> <body> <main> <h1>Welcome to My Website</h1> </main> <script src="index.js"></script>2 collapsed lines
</body></html>E agora?
Bem, se você é iniciante, eu realmente sugiro que faça os cursos gratuitos do freeCodeCamp.org; eles cobrem quase tudo o que você precisa saber sobre desenvolvimento web para começar.
Embora uma página do GitHub seja fácil de configurar, ela vem com algumas limitações e pode restringir o que você pode fazer à medida que avança no desenvolvimento web. Conhecer diferentes tecnologias de desenvolvimento como React, Next, Flask, Express.js, etc. é crucial se você está levando isso a sério. Nesse sentido, o GitHub Pages simplesmente não é suficiente. Você precisará encontrar outra coisa, como Netlify, Digital Ocean e, eventualmente, um VPS auto-hospedado com instâncias Docker para hospedar cada parte de um site por conta própria.
Cloudflare vs GitHub Pages
Embora a página do GitHub seja fácil de configurar e boa para iniciantes, hoje em dia eu costumo usar o Cloudflare pages; além de ser gratuito com tráfego ilimitado, ele também cuida da configuração de domínio personalizado se você tiver o domínio comprado via Cloudflare. Além disso, seu repositório também pode ser privado. Então, é praticamente uma versão melhor da página do GitHub. Talvez você queira dar uma olhada nisso também.
Se o guia não estiver claro para você, você pode seguir o guia oficial do GitHub aqui.