Este documento foi elaborado, com informações básicas sobre como você pode hospedar um site estático, com domínio próprio sem custo de hospedagem, usando Netlify Drop integrado ao Github.
No final desta jornada, teremos uma arquitetura de um site JAMStack, diferente de sites que utilizam um servidor backend tradicional. Nosso site estará hospedado e integrado ao Github, onde você poderá apresentar seus portfólios de trabalhos ou estudos acadêmicos, usando o seu domínio personalizado e com SSL grátis.
- Hospedagem para arquivos HTML, CSS e Javascript;
- Suporte para projetos em ReactJS ou similares;
- Suporte para entrega contínua e/ou à implantação contínua com GitHub (CI/CD).
Existem várias arquiteturas e possibilidades de hospedagens gratuitas, este documento é mais uma das proposições (sugestões), dentre as excelentes soluções que existem na Internet.
Neste exemplo os arquivos (fontes) HTML, CSS e imagens foram hospedagas no GitHub, e o domínio foi registrado no Registro.br, que é o departamento do NIC.br responsável pelas atividades de registro e manutenção dos nomes de domínios que usam o .br.
- Registrar ou ter um nome de domínio registrado;
- Acesso administrativo para realizar configurações personalizadas nos serviços de DNS do domínio;
- Cadastro no GitHub (https://github.com/);
- Cadastro no Netlify (https://www.netlify.com)
JAMStack (sites estáticos) é uma técnica para criar sites e aplicativos que oferecem bom desempenho, segurança e excelente custo de escala.
Arquitetura JAMStack consiste em sites com a seguinte estrutura:
- JavaScript
- APIs
- Marcação
Com o JAMStack o HTML é exibido sem a necessidade de renderizar informações de um servidor "backend" (retaguarda), com isso, o tempo de carregamento é rápido.
Segue abaixo arquitetura "sintética" para esta jornada. Passos 1 a 11.
Não é obrigatório criar um domínio. No meu caso, eu registrei o domínio HTA.TEC.BR, porque faz parte do escopo do meu projeto. Para criar e registrar um domínio, primeiro você precisa cadastrar-se no site REGISTRO.BR, depois escolher o nome do domínio e em seguida, efetivar o registro, ou seja, pagar pelo registro. Mais detalhes dos processos visite o site Registro.BR: Regras para registro de domínios .BR
Novamente, não é obrigatório criar uma conta de e-mail. Criei uma conta no GMail, porque pretendemos usar o serviço de caixa postal gratuito vinculado ao domínio HTA.TEC.BR para a nossa comunicação. Mais detalhes visite: Criar contas no GMAIL e Vincular o domínio próprio no GMAIL.
Para hospedagem dos fontes do site, é preciso criar uma conta no GitHub; Para criar uma conta acesse.
Resumo desta etapa:
- Crie uma conta de acesso GitHub;
- Acesse o GitHub com a conta criada e crie um repositório novo, onde o site será copiado (hospedado);
- Configure o repositório para trabalhar no formato PAGE;
- Configure o acesso remoto via chave SSH;
- Clone o repositório criado em sua máquina local;
- Publique o site;
Para facilitar o processo de integração com o GitHub crie uma chave de acesso SSH na sua máquina e configure o GitHub para permitir a sua autenticação. Caso esteja usando Linux siga a dica seguinte:
Abra o shell do Linux e rode individualmente os seguintes comandos:
$ ssh-keygen # Cria um par de chaves SSH localmente.
$ eval $(ssh-agent -s) # Instância o agente SSH.
$ ssh-add ~/.ssh/acesso_site_git # Adicione a chave privada.
# Liste e copie a sua chave pública na memória e poste na configuração da SSH Key do GitHub.
$ cat ~/.ssh/acesso_site_git.pub # Chave pública
# Vamos testar a conexão que foi configurada.
$ ssh -T git@github.com # Teste a conexão. (Só funciona se você já tiver configurado a sua chave no Git)
# Resposta do teste de conexão:
$ Hi <seu login>! You ve successfully authenticated, but GitHub does not provide shell access.Se estiver usando o Linux você pode clonar o repositório com o seguinte comando (aplique ao seu repositório, este é um exemplo):
$ git clone https://github.com/htaengenharia/site.git hta.github.site.local (exemplo)
Depois que clonar o diretório, ajuste o aquivo "config" que está no diretório .git no raiz, conforme exemplo abaixo.
No exemplo abaixo criei uma página HTML com uma única imagens centralizada e postei no GitHub, usando a sequência de comandos Git abaixo:
Para visualizar o resultado deste "commit", acesse o seu repositório.
Para acessar o diretório via "browser" e visualizar o site precisa digitar o endereço criado e fornecido pelo GitHub, conforme ilustrado na figura 5. https://htaengenharia.github.io/site/.
O Netlify Drop é uma forma de hospedar sites e aplicativos estáticos gratuitamente. Ele automatiza o processo de hospedagem sem a necessidade de FTP ou de compilação. No nosso exemplo o Netlify permitirá a configuração de um domínio próprio apontando para o conteúdo hospedado no GitHub. Expandindo os conceitos, este é ser um exemplo simples de CI/CD, continuous integration/continuous delivery.
Resumo desta etapa:
- Cadastre-se no Netlify;
- Importe o site do seu repositório no github;
- Configure o deploy;
- Primeiro deploy do site;
- Domínio temporário.
Acessar o site www.netlify.com, crie uma conta e depois inicie o processo integração contínua entre o repositório com os dados do seu projeto ou site.
A primeira etapa nesta fase do processo de integração é vincular o seu repositório Github com o serviço Netlify. Para vincular é preciso importar um projeto da sua lista de repositórios no github. (Lembrando que o repositório precisará ser configurado para trabalhar no formato PAGE e ter arquivo index.hrml)
Deploy do site; após conectar no Git, selecione o repositório e configure o projeto.
Configuração de como ocorrerá a atualização automática do conteúdo publicado.
Após configurar e aplicar deploy site, o processo de víncular e configurar a integração contínua entre o conteúdo do site estático hospedado no Github e Netlify estará concluído, quando o conteúdo do site for atualizado no Github, será replicado no aplicativo Netlify que exibirá o site atualizado na Internet.
Nesta etapa um domínio temporário será criado para que você use. Não usaremos esse domínio, porque vamos trabalhar com domínio próprio.
O próximo passo será ajustar o DNS em Registro.BR para que seja possível usarmos o domínio próprio. Para facilitar a nossa digitação mudamos o nome do site no aplicativo Netlify (em configurações do site) para 2ms.netlify.app.
As próximas etapas são:
- Criar um sub-dominio e apontar no DNS primário para 2ms.netlify.app. Abaixo exemplo de como criar uma entrada CNAME no DNS Registro.BR. Estamos apontando um sub-domínio próprio para o domínio que o aplicativo Netlify disponibilizou.
- Configurar no aplicativo Netlify o sub-domínio jamstack.2ms.tec.br
- DNS Netlify configurado. Agora, quando digitarmos no browser jamstack.2ms.tec.br o site será exibido.
- Último passo é configurar o HTTPS.
No final da configuração, o acesso ao site poderá ocorrer também via sub-domínio jamstack.2ms.tec.br
Arquitetura JAMStack permite que tenhamos um site estático com domínio próprio sem custo de hospedagem, com atualização do conteúdo através de integração contínua (CI) usando o Github e o aplicativo Netlify Drop como principais tecnologias. Possíveis aplicações para esta solução pode ser: sites estáticos para Startups em fase de ideação, portfólios pessoais ou profissionais (CV) ou ainda trabalhos acadêmicos.
Espero ter contribuido com o seu desenvolvimento de alguma forma.
[1] CI/CD - https://www.redhat.com
[2] HTML5 - https://pt.wikipedia.org
[3] W3 - https://www.w3.org/
[4] ReactJS - https://pt-br.reactjs.org/
[5] GitHub - https://github.com/
[6] .BR - https://registro.br/
[7] DNS - https://pt.wikipedia.org
[8] Netlify - https://app.netlify.com
[9] JAMStact - https://en.wikipedia.org