Meus dois primeiros sites!

Pessoal,

Publiquei agora há pouco dois sites pessoais!

"Poxa, Jayme, que coisa velha!".

Bom, é a primeira vez que eu faço tudo sozinho, desde a criação dos arquivos HMTL no VSCode até a hospedagem e a publicação no meu próprio domínio.

Vem comigo que eu conto tudo isso!

A primeira coisa foi fazer o código HMTL. Foram dois códigos para duas páginas diferentes. Como vocês devem saber, afinal está na descrição do meu blog, eu sou médico anestesiologista e trabalho com pacientes que se submetem a cirurgias de grande porte. Ou seja, meus pacientes com frequência precisam de drogas vasoativas e eu uso alguns exames e dados hemodinâmicos para saber se está tudo bem ou se preciso ajustar alguma coisa.

Eu costuma utilizar algumas planilhas do Excel para fazer alguns cálculos, mas atualmente prefiro fazer isso na Web, em algum site. O problema era achar algum que fazia EXATAMENTE o que eu queria ou precisava naquele momento. Assim surgiu a ideia de transformar minhas planilhas em páginas e disponibilizá-las a quem quiser usar!

Os códigos estão todos em HMTL e são bem simples. Pedi a ajuda de IAs em alguns momentos para refinar alguma coisa ou então sugerir melhorias no código ou no layout. 

Mas o ponto que trazer é a publicação em si, não o código.

A primeira coisa é ter um domínio. E você pode comprar em vário locais. Eu comprei sem hospedagem, apenas o domínio.  Já falei disso aqui, mas vou repassar alguns pontos importantes.

Sugiro que vocês pesquisem bastante os domínios, pois os preços variam muito, principalmente a depender do TLD (Top Level Domain ou sufixo de domínio, o ".com" ou ".com.br"). Os TLDs da modinha, como .info, .app, .tech e outros podem custar algumas centenas de dólares a mais que os .com ou .com.br, mas essa é uma decisão individual. Eu registrei o meu através da Cloudflare pois queria um TLD ".com", a Cloudflare era mais barato que encontrei e eu queria utilizar o Cloudflare Tunnel para hospedar algumas coisas no meu Synology

Só que aqui é pouco diferente agora, porque estas páginas estão no GitHub. Sim, você cria uma conta gratuita no GitHub, cria um repositório e coloca o seu arquivo HTML intitulado index.html lá dentro.

Crie um novo repositório

Escolha o nome, certifique-se que seja PÚBLICO e crie o repositório

Escolha o arquivo da sua página para subir ou crie um novo

Se resolver criar, escolha o nome "index.html", digite ou copie o código e dê o "Commit"

O GitHub vai pedir para criar uma mensagem do commit e depois dê "Commit"

Essa é a primeira parte, criar o arquivo HTML e adicioná-lo ao repositório do GitHub. Agora vamos publicar á página!

Vá em "Settings" para acessar ss configurações

Vá em "Pages"

Em "Source", certifique-se que a opção "Deploy from a branch"; em "Branch", clique 

em "None" para colocar a pasta principal

Mude de "None" para "Main"

Deixe a pasta "/root" e salve

se você fez tudo certo, verá essa mensagem avisando que a página está sendo criada

Alguns minutos depois, a página foi criada e estará acessível neste endereço mostrado

Obviamente a nossa página não tem nada de útil, mas já está online!

Agora vamos à parte mais "espinhosa", customizar o domínio. Como eu disse para vocês, eu já comprei o meu domínio no Cloudflare, mas você pode comprar onde quiser. Mais uma vez, não precisa de comprar hospedagem porque estamos utilizando a hospedagem gratuita do GitHub, mas aqui é apenas para coisas bem simples, ok?

Acessando o site da Cloudflare, vamos para a página inicial:

Entre nas configurações do seu domínio

Vá até a parte de configurações do DNS

O GitHub necessita que estes quatro endereços acima estejam apontados no DNS do servidor do seu domínio. Estes endereços são públicos e são os endereços dos servidores de DNS do GitHub. Ao clicar em "Adicionar Registro", a tela abaixo vai abrir.

E estes são os campos a serem preenchidos. Maiores explicações, veja aqui e aqui. Os endereços tanto para IPV4 quanto IPV6 estão nas páginas recomendadas.

Preencha conforme a figura acima, uma entrada para cada IP (quatro para IPV4 e quatro para IPV6). Se o sinal de "Com proxy" estiver ativo, desative para "Somente DNS". Esse proxy ativado é o que ativa o Cloudflare Tunnel e vai exigir que você tenha uma forma de autorização para entrar no seu site. Se o objetivo for torná-lo privado ou se estiver hospedado em sua infra local, recomendo que deixe ativo, mas como meu objetivo é deixar publico E estou hospedado no GitHub, vou deixar desativado!

Depois, precisamos apontar o nome do domínio customizado para o GitHub e, novamente, para o Cloudflare.

No GitHub, dentro do GitHub Pages (onde mostra a sua página), vamos colocar o nome customizado no campo "Custom Domain":

Repare que o endereço da página é do GitHub e que o endereço customizado está em branco

Após colocar (1) o endereço customizado ("novo.jaymebc.com") e salvar (2), o endereço da página mudou (3) mas apareceu um erro de checagem do DNS (4)

Esse erro apareceu porque ainda não informamos ao Cloudflare que vamos utilizar esse domínio. Agora volte ao DNS do Cloudflare e vamos inserir mais um registro, com os dados abaixo:

Agora adicionamos o nome "novo" ao domínio "jaymebc.com" e o direcionamos ao GitHub. Voltando ao GitHub, vemos que agora o domínio está tendo seu DNS checado:

Aqui só nos resta esperar. Isso pode demorar de minutos até umas duas horas. Assim que o DNS for resolvido, ative a opção "Enforce HTTPS", por questões de segurança!

Pronto! Agora temos uma página pessoal, com nosso domínio, hospedada gratuitamente no GitHub e com certificação HTTPS.

Quer ver como ficaram os meus dois sites?

Vá em infusao.jaymebc.com e hemodinamica.jaymebc.com

Bom, esse post era sobre isso!

Até a próxima, pessoal!

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 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/ .

Quer mais algumas dicas sobre isso? Dê uma olhada nos links abaixo:

https://docs.github.com/pt/pages

https://pages.github.com/

https://developer.mozilla.org/pt-BR/docs/Learn/Getting_started_with_the_web/Publishing_your_website

É isso por agora!!