Artigo original: How to deploy a static website for free in just 3 minutes straight from your Google Drive, using Fast.io

Neste artigo, eu mostrarei como implementar um site da web estático, gratuitamente em apenas 3 minutos, utilizando serviços de armazenamento na nuvem como o Google Drive ou o Dropbox.

Não – não fui pago nem pelo fast.io, nem pelo freeCodeCamp para fazer este artigo. Não tenho nenhum tipo de relação com eles. Só estou escrevendo este artigo porque achei a ferramenta deles incrível e útil para hospedar sites da web estáticos e de graça.

Observação: as informações deste tutorial estão desatualizadas, mas o artigo fica aqui para a posterioridade. Veja alguns artigos dos quais que você talvez goste com tópicos similares.

O que é o Fast.io?

O fast.io é uma solução criada pela Mediafire para simplificar o modo como a web funciona. Em poucas palavras, o objetivo deles é deixar sua vida mais fácil, tornando a web mais acessível e gerenciável.

Ele foi lançado ao final de 2019. Estou compartilhando com você agora.

Como funciona

Ao usar o Fast.io, você poderá se conectar com a nuvem (pelo Google Drive, Dropbox, entre outros), escolher o nome do seu site da web e fazer o deploy do seu conteúdo, tudo isso em apenas alguns cliques.

Se o conteúdo estiver pronto, são precisos apenas 3 minutos para colocar seu conteúdo on-line e torná-lo acessível para qualquer pessoa.

Uma vez que seu site da web estiver on-line, você pode configurá-lo, adicionar um domínio customizado e se conectar com o Google Analytics. Assim, você poderá saber quantas pessoas você está atingindo.

Eu não tinha mencionado isso antes, mas o serviço atualiza automaticamente seu site quando você modifica os arquivos fontes. Por exemplo, se você estiver usando o Google Drive para compartilhar seu conteúdo, seu site será atualizado quando você modificar algo na sua página HTML.

fast-io-how-it-works
Fast.io - Como funciona

Provedores de armazenamento disponíveis

Aqui está uma lista de provedores de armazenamento que eu usaria se eu fosse publicar meu site hoje:

  • GitHub
  • Dropbox
  • Google Drive
  • Box
  • Mediafire
  • OneDrive

Como você pode imaginar, essa lista crescerá à medida que novos serviços forem aparecendo. Porém, mesmo hoje, você tem uma variedade de possibilidades para hospedar seu site da web estático.

Concorrência

Já existem algumas empresas que permitem que você coloque rapidamente um site da web estático on-line. As soluções mais famosas são o GitHub Pages, o Heroku e o Netlify.

Não estou dizendo que o Fast.io é necessariamente o melhor, mas eu gosto da simplicidade do processo de fazer o deploy de um site básico.

Recado rápido: se você quer fazer o deploy de algo mais complexo – como um site em Python Flask – não poderá utilizar o Fast.io. Nesse caso, eu recomendo fortemente usar o Heroku.

Como eu disse anteriormente, serei sincero com você. O fast.io é um excelente serviço para determinadas tarefas.

O que é um site da web estático?

Antes de mostrar como fazer o deploy de seu site, acho que seja essencial definir o que é um site da web estático e o que o diferencia de um site dinâmico.

Um site da web estático contém conteúdos fixos em páginas da web. O conteúdo da sua página está em HTML e todos os usuários vêm a mesma coisa.

Por exemplo, você pode utilizar esse tipo de site para construir uma landing page (uma página básica com informações do seu produto).

A principal diferença entre um site da web estático e um dinâmico é, obviamente, a parte dinâmica!

Um site dinâmico utiliza uma tecnologia de servidores para construir a página quando o usuário faz uma requisição.

Por exemplo, você pode utilizar esse tipo para seu blog. Toda vez que você adicionar um novo artigo em seu banco de dados, o site da web vai mostrá-lo.

Chegou o momento de fazer o deploy do seu site

Você está pronto para compartilhar sua página com todo mundo? Vamos lá!

Nesta parte, eu mostrarei como colocar seu site da web on-line em poucos cliques. Eu utilizarei uma página de HTML básica, mas, uma vez que você entender como o fast.io funciona, você poderá modificar o que quiser.

1) Criando um arquivo index.html

Você precisa criar um arquivo index.html com seu código HTML dentro. Eu recomendo que você comece com algo simples, porque você sempre pode atualizar depois.

Salve o arquivo no seu computador.

<!DOCTYPE html>
<html>
  <head>
    <title>My Static Website</title>
  </head>
  <body>
    <h1>My Static Website</h1>
    <p>
      Hello, I'm online, and everyone can see me!
    </p>
  </body>
</html>
Exemplo de um arquivo index.html - mantivemos os textos em inglês porque, mais tarde, uma imagem mostrará o conteúdo do site

2) Abra a página inicial do fast.io

fast-io-homepage
Página inicial do fast.io

Tudo que você precisa para começar com o Fast.io é abrir o site. Quando tiver feito isso, clique em "Sign up now - it's free!" (Inscreva-se agora – é de graça!).

3) Configure seu Google Drive

fast-io-storage-provider
Fast.io - Provedor de armazenamento

Essa página aparecerá após o segundo passo, permitindo que você selecione um provedor de armazenamento. Selecione "Google Drive".

Se você quiser criar um site com outro provedor, você pode fazer isso depois adicionando o provedor na página da sua conta.

fast-io-connect-google-drive
Fast.io - Conecte-se com o Google Drive

O fast.io precisará acessar a sua conta do Google Drive para funcionar. Ele criará uma pasta chamada "Fast.io", que conterá seus sites. Clique em "Connect Google Drive Now" (Conectar-se ao Google Drive agora).

fast-io-select-google-account
Fast.io - Selecione sua conta do Google

Você precisará selecionar sua conta do Google para se conectar ao Fast.io.

fast-io-allow-google
Fast.io - Permita que o Fast.io acesse seu Google Drive

Autorize o Fast.io a acessar sua conta do Google, para se conectar corretamente.

fast-io-create-account
Fast.io - Crie sua conta

Sua conta está pronta. Portanto, escolha uma senha e clique em "Create Account" (Criar conta).

fast-io-welcome
Fast.io - Página de boas-vindas

Depois de seguir os últimos passos, uma página dizendo "Welcome to Fast!"  (Boas-vindas ao Fast!) aparecerá. Clique em "Let's Begin!" (Vamos começar).

4) Crie seu site da web

fast-io-add-new-website
Fast.io - Painel

Agora, tudo pronto para criar seu site e compartilhar com todo mundo! Clique em "Add New Site" (Adicionar um site novo).

fast-io-website-name
Fast.io - Selecione um nome para o site

Escolha o nome do seu site e coloque-o na barra de entrada. Quando tiver terminado, clique em "Next" (Avançar).

fast-io-select-website-type
Fast.io - Selecione um tipo de site

O fast.io permite que você crie três tipos de sites: um site para o compartilhamento de arquivos, uma página da web ou um buscador de arquivos.

No nosso caso, selecionaremos "Web Pages" (páginas da web), pois queremos hospedar uma página da web em HTML.

Se, posteriormente, você quiser criar um site da web para compartilhar documentos, terá de voltar ao seu painel, criar outro site e selecionar File Downloads (download de arquivos).

fast-io-select-google-drive
Fast.io - Selecione um provedor de armazenamento para seu site

Uma vez selecionada a opção "Web Pages", você precisará selecionar seu provedor de armazenamento. Clique em "Google Drive".

fast-io-select-url
Fast.io - Selecione o URL do seu site

Escolha o URL do seu site e escreva-o no local indicado. Quando tiver finalizado, clique em "Create Site" (Criar site).

fast-io-success
Fast.io - site da web criado com sucesso!

Você conseguiu! Seu site está on-line e disponível no URL que você escolheu! No meu caso, você pode encontrar meu site em mygoogledrivewebsite.imfast.io.

Nota do tradutor: o site com o link acima já não está mais disponível on-line.

5) Carregue seu index.html

Se você abrir seu site, poderá notar um erro, pois você não carregou seu arquivo index.html no seu Google Drive.

Aqui estão duas maneiras de se fazer isso:

  • Abra seu Google Drive e pesquise pela pasta Fast.io. Depois, busque a pasta do seu site (no meu caso, "mygoogledrivewebsite.imfast.io").
  • Na página de sucesso da etapa 4, clique em "See your Google Drive" (Ver o seu Google Drive).
fast-io-google-drive-upload
Fast.io - Google Drive antes do upload

Quando tiver feito isso, clique com o botão direito do seu mouse e selecione "Upload files" (Upload de arquivos). Uma nova janela vai se abrir. Então, encontre seu arquivo "index.html" e selecione-o.

fast-io-google-drive
Fast.io - Google Drive após o upload

Aguarde um pouco para as alterações aparecerem no seu site.

6) Comemore!

fast-io-website-demo
Fast.io - Site da web de demonstração

Compartilhe com seus amigos! Seu site da web está ativo e todo mundo pode acessá-lo!

Compartilhe no Twitter clicando aqui!

Bônus


Se você estiver curioso e se quiser mexer nas configurações, poderá voltar no seu painel e clicar em seu site. Você poderá vincular seu site ao Google Analytics (estatísticas de visitantes), mudar o nome de domínio (por exemplo, para meusitenaweb.com) e muito mais!


Conclusão


O que você acha desse novo serviço? Achou rápido e fácil?

Sinta-se à vontade para compartilhar este artigo, caso tenha gostado.

Se quiser mais conteúdos como este, você pode seguir o autor no Twitter, onde ele fala sobre desenvolvimento para web, autoaperfeiçoamento e sua jornada como desenvolvedor full-stack!