Como criar sites com hospedagem e domínio personalizado sem pagar nada!
Uma dúvida de muita gente que está começando na área, é se existe uma forma de publicar o site totalmente de graça e ainda com domínio personalizado. A resposta é SIM! Nesse post você vai aprender como fazer isso.
É claro que existem certas limitações, porém pra quem não tá pagando nada está de bom tamanho, vou falar mais sobre elas no decorrer do artigo.
Vamos começar!
COMO HOSPEDAR SITES DE GRAÇA
Para esse serviço nós vamos usar o Netlify. Netfily é um serviço que te permite hospedar sites estáticos, ou seja, arquivos HTML, CSS e Javascript. Isso inclui, por exemplo, projetos em ReactJS. Além disso, você consegue:
Ter um URL próprio usando o subdomínio da Netlify. Ex: seusite.netlify.com
Possibilidade de hospedar o seu site com Netlify e usando um domínio adquirido em outro provedor (o que eu vou ensinar aqui também)
SSL Grátis
Ping baixíssimo com tempo de resposta alta
Ultra fácil de criar um site usando arrasta e solta (Drag and Drop)
Integração contínua com GitHub, GitLab e BitBucket
1. Crie sua conta
Para criar a conta é bem simples. Acesse app.netlify.com/signup, escolha email (ou algum outro de sua preferência).
Depois disso insira o seu email e uma senha pra usar no Netlify e clique em Sign up.
Você ainda precisa confirmar seu email, vá até o seu provedor de email e procure um email com o nome "Verify Email" e clique no link para que seu email seja verificado.
2. Hospede seu site HTML, CSS e JS
ATRAVÉS DE UMA PASTA LOCAL
Para você conseguir fazer isso é importante que exista um arquivo raiz (com o nome index.html) na pasta do seu site.
Agora que já fez isso, acesse app.netlify.com/drop e arraste a pasta do seu site até o centro da tela do site.
ATRAVÉS DO GITHUB
Para hospedar a partir do GitHub, GitLab ou BitBucket a sequência será bem parecida. Volte a página inicial clicando no ícone da Netlifly e clique em “New site from Git” e escolha aqui o seu provedor, estaremos usando hoje o GitHub porem os passos são parecidos para os outros. Basta clicar em GitHub e depois fazer o processo de login e autenticação e escolher qual projeto e branch quer deixar online e clicar em “Deploy Site”
3. Aprenda a atualizar seu site
ATRAVÉS DE UMA PASTA LOCAL
- Acesse o projeto através da página inicial do Netlify
- Na parte superior, clique em "Deploys"
- Arraste a pasta do seu site pra lá
ATRAVÉS DO GITHUB
Atualizar o seu site neste caso é ainda mais simples porque neste caso basta que você faça as alterações em arquivo original, faça o commit e push e pronto! O seu site já estará atualizado automaticamente (usando integração contínua) e você nem precisou de abrir o site da Netlify
Pronto, agora você aprendeu a publicar e atualizar seu site online! O próximo passo é aprender a conseguir um domínio personalizado grátis.
COMO CONSEGUIR UM DOMÍNIO PERSONALIZADO DE GRAÇA
Para isso nós vamos usar o Freenom, ele oferece diversas opções de terminações de domínio gratuitamente. Estas são .tk ; .ml; .ga ; .cf ou .gq
1. Verificando a disponibilidade do seu domínio e registrando-o
Aqui, diferente do Netlify, nós ainda não vamos criar a conta.
Acesse o site freenom.com
Insira a url que você quer que seu site tenha (já com a terminação) e selecione a opção que você quer. Após isso clique em "pagamento"
Sua página será encaminhada para a escolha do período de uso do domínio. Abra as opções do botão Period e escolha o ciclo de 12 Months @ FREE.
Depois clique no botão Continue e verifique se o valor do pedido tem $0.00USD.
2. Fazendo o cadastro no site
Caso esteja tudo certo, você fará o registro da conta. Insira seu email (Não é bom utilizar o Facebook ou o Google) e clique em "Verify My Email Adress"
Assim, um link de verificação com o assunto “Freenom Email Verification” será enviado para seu e-mail para que você possa dar continuidade em seu cadastro.
Acesse seu email e clique no email com o nome "Freenom Email Verification" e em seguida clique no link que tem lá.
Uma nova guia se abrirá. Você poderá prosseguir inserindo os dados de seu cadastro freenom através dela.
Após preencher os campos solicitados, não se esqueça de aceitar os termos e clicar em Complete Order. (se você não quiser, não é necessário botar suas informações oficiais
Caso esteja tudo certo com seu cadastro, o site irá mostrar a confirmação do registro, seguido de um e-mail com detalhes.
Clique no botão Click here to go to your client area para voltar ao início.
Pronto! Seu domínio está registrado.
COMO VINCULAR O DOMÍNIO DO FREENOM AO NETLIFY
Acesse a página de seu site no Netlify e clique em "Set up a custom domain"
Suba a página e procure por "Check DNS configuraion".
Após isso, insira o seu domínio do Freenom e clique em Verify
em uma nova aba, vá até a página inicial do Freenom > Services > My domains e clique em Manage domain e depois em Management Tools.
Depois, clique em Use custom nameservers (enter below)
Insira os nameservers que apareceram na tela do Netlify (realmente irá ficar "sobrando" 1 nameserver) e clique em Change Nameservers.
Pronto, após isso você pode testar acessar a url e ver se já está funcionando. Se ainda não funcionou, não se desespere, isso pode demorar até 24 horas pra começar a funcionar.
Obrigado por ter lido até aqui, espero que você tenha gostado e conseguido fazer, pois tive bastante trabalho pra escrever este artigo. Caso tenha algum problema (É bastante comum ter problemas no Freenom), basta me chamar no Instagram (@gsozinhos). Será um prazer em ajudar você :D
Até o próximo post!