segunda-feira, 25 de dezembro de 2023

Como usar o GitHub para hospedar uma página pessoal!

Pessoal,


Estou para escrever sobre isso já tem um tempo: usar o GitHub como repositório para uma página pessoal. É um processo muito simples, permite criar páginas pessoais com alguma complexidade (ao contrário do Blogger que, até onde eu saiba, não permite colocar códigos mais complexos) e, a cereja do bolo, é gratuita!

Inicialmente você deve ter uma conta no GitHub (gratuito) e, preferencialmente, um editor de códigos (eu uso o VS Code, também gratuito, mas existem dezenas por aí).

Após criar a sua conta no GitHub, clique em "New" para criar um novo repositório.



Criado esse repositório, escolha o nome. Eu vou escolher "pagina-teste.github.io".


Preencha todos esses campos: 1) nome do repositório (eu gosto de terminar com "GitHub.io", mas não sei se realmente é necessário essa terminação); 2) descrição (apesar de opcional, ajuda a saber o que se trata); 3) marcar como Público (porque senão a página não estar disponível fora da sua máquina); 4) adicionar um arquivo README (esse é bem opcional, mas acho que pode ser válido para projetos maiores, mas como aqui é só demonstração, não vou fazer); e 5) clicar em "Create repository" para criar seu repositório!

Agora você tem que mandar esse repositório para sincronizar com seu computador (o que eu faço, usando o GitHub Desktop) ou fazer com linhas de comando. Até onde entendi, você tem que ter esses arquivos localmente (ou em um servidor na rede, como Linode ou Google Cloud ou Azure), ou pelo menos é muito mais fácil editar localmente do que com tudo online.Recomendo fortemente usar o GitHub Desktop para isso. Eu mantenho o repositório localmente.


Com o aplicativo já instalado no seu computador, clone o repositório para a sua máquina:


Agora, com tudo localmente, você abre o VS Code (1) para criar a sua página, pode escrever um sumário do que fez (2 e 3) e clica em (4) para fazer o Commit, ou seja, para sincronizar seus arquivos locais com o que está nos servidores do GitHub. É aqui que você vai subir sua página para os servidores do GitHub para ele publicar na internet!

Agora, ao abrir o VS Code, crie um arquivo chamado "index.html" e salve no seu diretório do GitHub local (veja a foto acima para saber sua pasta local). Aqui em casa, o caminho é o seguinte:

/Users/castilho/Documents/GitHub/pagina-teste.github.io/index.html



E agora coloque aqui seu código html ou javascript da sua página.

<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p><p>
<p>Minha primeira pagina no GitHub Pages!!!</p>
</body>
</html>

Vai ficar assim:


Salve com Control+S ou Command+S. Veja que na sua pasta, terá um arquivo "index.html" e conterá o código digitado:


Agora volte ao GitHub Desktop e preencha os campos abaixo. Conclua clicando em "Commit to main".


Se você voltar à página do GitHub, verá que já tem o arquivo index.html lá:


E se clicar nesse arquivo, verá que o conteúdo é o que colocamos no VS Code:


Agora só falta a gente implementar a página. Para isso, estando no seu repositório, clique em "Settings", em Code and automatation clique em "Pages" e em Build and deployment escolha "Deploy from a branch". Em Branch, clique no menu suspenso e escolha a fonte da publicação. No meu caso, é "Main". Termine confirmando com "Save":


Vai aparecer uma mensagem dizendo "GitHub Pages source saved."

Pronto! É só isso! Aguarde alguns minutos e vá para sua página. A minha é https://jaymebc.github.io/pagina-teste.github.io/ .

Nenhum comentário:

Postar um comentário