Como criar um site pessoal estático por menos de US$ 1 por mês

O objetivo desta postagem é mostrar como você pode criar seu próprio site pessoal estático por menos de US$ 1 por mês. Eu sei, você provavelmente está pensando: “Acabei de ler certo?”. Você fez! É claro que há advertências para atingir essa meta, mas no início da jornada do seu site, realmente deveria custar apenas US$ 0,01 por mês para hospedar seu próprio site estático. O público-alvo desta postagem é qualquer pessoa com alguma experiência em JavaScript e um conhecimento geral de desenvolvimento web. Se você não tem esse histórico, não se preocupe! Farei o meu melhor para explicar as ideias e conceitos deste post para que todos possam acompanhar!

Antes de começarmos, vamos apresentar algumas definições para nos ajudar a entender os diferentes termos que usaremos para criar nosso primeiro site. Sinta-se à vontade para consultar estas definições à medida que avançamos no processo de adição de nosso site ao Google Cloud:

• Domínio do site: endereço usado para identificar um site na internet, como yelp.com
• Provedor de registro de domínio: um provedor de domínios, onde você pode comprar um domínio personalizado
• Site estático: um site criado com um número fixo de qualquer combinação de arquivos HTML, CSS e JavaScript
• Next.js: uma estrutura React.js que suporta renderização no lado do servidor e geração de site estático
• Objeto de armazenamento: uma entidade usada para armazenamento, como fotos ou vídeos ou qualquer outro tipo de arquivo
• Google Cloud: plataforma de computação em nuvem que oferece diversos serviços, nos preocupamos com armazenamento
• Google Cloud Storage: serviço de armazenamento de objetos do Google Cloud, usaremos isso para armazenar os arquivos estáticos do nosso site
• Bucket (Google Cloud Storage): um contêiner que contém os arquivos do seu site

Este artigo pressupõe que o leitor tenha algum conhecimento básico de desenvolvimento e programação de sites. Presumirei que cada leitor tenha o seguinte:

• Uma compreensão básica do desenvolvimento de sites - Introdução ao Desenvolvimento Web (freecodecamp.org)
• Experiência com NPM
• Conhecimento iniciante de React.js e Next.js
• Conforto com uma CLI
• Um IDE instalado no seu computador – VSCode é o que eu uso por exemplo

Tenho tendência a pensar melhor dividindo uma meta em partes incrementais de trabalho. Vamos enquadrar nossas tarefas dessa forma enquanto criamos nosso site:

1. Configurar
2. Código inicial para nosso site
3. Configurando um bucket para nosso site
4. Próximas etapas 😎

Configurar

Se quiser criar seu próprio site pessoal, você precisará de um domínio para começar. Embora não o utilizemos inicialmente, vale a pena fazer isso agora para que possamos usar o domínio personalizado em um artigo posterior . Para mim, meu domínio era afro-cloud.com , mas você realmente pode escolher o que vier à mente, desde que um provedor de registro tenha o domínio disponível. Existem vários provedores de registro de domínio que você pode usar. Eu pessoalmente usei o GoDaddy, mas aqui está um subconjunto de opções disponíveis (não sou afiliado a nenhum desses serviços):

• Vai Papai
• Host Azul
• Espaço quadrado

Agora que configuramos nosso domínio, vamos criar uma conta do Google Cloud e ativar o faturamento.

1. Navegue até o Console do Google Cloud
2. Use uma conta do Google existente ou crie uma nova para entrar no console (isso é necessário para usar o Google Cloud)
3. Crie um novo projeto clicando no menu suspenso de seleção de projetos na barra superior da tela
4. Navegue até "Faturamento"
5. Crie uma nova conta de faturamento seguindo as instruções fornecidas pelo Google Cloud

Ótimo! Agora com o faturamento ativado, podemos começar a usar os serviços do Google Cloud. Por enquanto, estamos prontos com esta guia, mas voltaremos a esta página mais adiante neste artigo, portanto, mantenha-a à mão.

Código inicial para nosso site

Se você estiver tendo problemas para seguir as etapas deste artigo, entre em contato e farei o possível para ajudar a depurar o problema. Ok, com isso esclarecido, vamos continuar. Estaremos usando Next.js em oposição a outras estruturas React.js (ou apenas React) por causa de seu suporte de exportação estática. Existem várias opções de implantação diferentes para hospedar um aplicativo React.js, mas optei por compartilhar a abordagem Google Cloud Storage e Next.js por causa dos benefícios de SEO e economia de custos. Com as exportações estáticas do Next.js, quando uma construção de produção é feita, um arquivo HTML é criado por rota, junto com os ativos estáticos (arquivos CSS e JS) que correspondem ao arquivo HTML em partes distintas. Isso é importante porque pode evitar o carregamento de pacotes JavaScript desnecessários para a página que está sendo visualizada, o que significa carregamentos de página mais rápidos. Todos os arquivos gerados pela execução do "next build" serão exportados para a pasta "out". Mas falaremos mais sobre isso mais tarde. Vamos criar o aplicativo.

Primeiro, vamos instalar um projeto inicial Next.js em nossa máquina. Felizmente, Next.js tem um utilitário "create-next-app" assim como Create React App para aqueles que o usaram. Para iniciar o fluxo de trabalho, podemos executar o seguinte comando:

npx create-next-app@latest

O comando nos guiará por algumas opções de configuração para nosso projeto (fique à vontade para escolher o que quiser; só precisamos da geração do código). Coloquei em negrito as opções que usarei neste artigo:

• Qual é o nome do seu projeto? meu aplicativo
• Você gostaria de usar TypeScript? Não / Sim
• Você gostaria de usar o ESLint? Não / Sim
• Você gostaria de usar Tailwind CSS? Não / Sim
• Você gostaria de usar o diretório `src/`? Não / Sim
• Você gostaria de usar o App Router? (recomendado) Não / Sim
• Gostaria de personalizar o alias de importação padrão (@/*)? Não / Sim

Legal, temos algum código agora! Você notará que nossa pasta node_modules está preenchida, então temos todas as dependências instaladas que precisamos para executar nosso aplicativo. Na mesma janela de terminal que você usou para criar o projeto, vamos executar o seguinte comando: npm run dev . Isso iniciará o fluxo de trabalho de desenvolvimento do Next.js para que possamos visualizar nosso aplicativo localmente. Next.js fornecerá um URL para visualizar o projeto em seu computador. Na maioria dos casos, será http://localhost:3000 , mas se você tiver outro aplicativo da web em execução, ele poderá selecionar outra porta como 3001. Ao clicar no link, você verá algo como o seguinte:

Legal! Temos um aplicativo inicial instalado e funcionando! Mas vamos nos livrar da página inicial para fazer o exemplo mais clássico de “Hello World”. Atualize o arquivo src/app/page.tsx (ou page.jsx) para conter o seguinte:

 import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> </div> </main> ); }

Salve o arquivo e volte para a guia do navegador que executa nosso aplicativo e recarregue a página. Você deverá ver "Olá, mundo" na tela! Agora vamos voltar a fazer com que as exportações estáticas funcionem. Precisaremos configurar nosso arquivo next.config para habilitar o recurso. Atualize a declaração nextConfig para ser:

const nextConfig = { output: "export", };

Isso instruirá o Next.js durante o processo de construção a criar arquivos HTML individuais correspondentes a cada rota em nosso aplicativo. Por enquanto, temos apenas uma página, então vamos adicionar outra página para ilustrar os benefícios das exportações estáticas. Dentro do diretório app/, crie um novo diretório chamado "test". No diretório recém-criado, adicione um arquivo page.tsx (ou page.jsx) e adicione o seguinte código:

 export default function Test() { return ( <main> <p>Hello test!</p> </main> ); }

Agora que temos uma página de teste, vamos adicionar um link para ela em nossa página inicial. Abra src/app/page.tsx (ou page.jsx) e atualize o arquivo para que fique assim:

 import Link from "next/link"; import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href="/test">Test Page!</Link> </div> </main> ); }

Salve os arquivos recém-atualizados e volte para a guia do navegador que executa nosso aplicativo e recarregue a página. Você deverá ver um novo link com "Página de teste!" e ao clicar nesse link, o conteúdo da tela deverá mudar para mostrar “Olá teste!”. Bom trabalho, agora temos duas rotas em nossa aplicação. Agora vamos verificar a saída do recurso de exportação estática de que falamos. Voltando para a janela do terminal, execute "npm run build". Este comando executará o comando "next build" que criará uma compilação pronta para produção para o nosso trabalho e armazenará o resultado em um diretório chamado na raiz do nosso projeto. Se inspecionarmos o diretório out, deveremos ver algo assim:

• _next: contém os ativos estáticos que precisamos para executar nosso site, pense em pedaços de JavaScript e CSS para cada página HTML (por exemplo, 404.html: é a página 404 padrão que Next.js gera para nós
• favicon.ico: o ícone do nosso site
• index.html: o arquivo HTML da nossa página raiz (src/app/page.tsx ou page.jsx)
• index.txt: arquivo que contém mapeamentos de recursos para a página index.html
• test.html: o arquivo HTML da nossa página raiz (src/app/test/page.tsx ou page.jsx)
• test.txt: arquivo que contém mapeamentos de recursos para a página test.html

Ótimo trabalho, pessoal. Agora vamos mudar de assunto para fazer upload de nosso código para o Google Cloud para que possamos ver o site ao vivo.

Configurando um bucket para nosso site

Agora que temos nosso código pronto, precisamos carregá-lo no Google Cloud Storage para que o Google Cloud possa servir nosso site na internet. Vamos voltar para a guia Google Cloud.

Abra o menu hambúrguer no lado esquerdo da tela e selecione "Cloud Storage". No topo da tela você deverá ver um botão "CRIAR". Clicaremos naquele que iniciará o fluxo de trabalho de criação. Como ainda não usaremos um domínio personalizado, nomeie o intervalo como desejar, mas esteja ciente da restrição de exclusividade. Para mim, usarei "somerandombucket123". A seguir, usaremos a opção multirregional nos EUA (é onde estou escrevendo esta postagem), mas fique à vontade para ajustar de acordo com seu caso de uso. Em seguida, selecionaremos a opção de classe padrão que deve ser pré-preenchida para você. A próxima opção tem a ver se queremos ou não que nosso bucket seja acessível publicamente pela Internet. Neste caso, como queremos servir esses arquivos aos nossos visualizadores, desejaremos desmarcar a opção “Aplicar prevenção de acesso público neste bucket” para que todos os arquivos sejam acessíveis via internet. Selecionaremos controle de acesso “Uniforme” e não selecionaremos as ofertas de “Proteção de dados” para manter os custos baixos. Em seguida, clicaremos no botão "Criar".

Agora que criamos o bucket, precisaremos adicionar uma nova permissão para que os usuários possam visualizar nossos arquivos do bucket. Selecione a guia “Permissões” e clique no botão “Conceder acesso”. Dentro de "Novos principais", digite "allUsers" e selecione a função em "Cloud Storage" para "Environment and Storage Object Viewer".

Uma caixa de diálogo será aberta perguntando se queremos ou não tornar nosso bucket público, o que fazemos, então selecione "Permitir acesso público". então selecione "Permitir acesso público". Agora os arquivos deste bucket estarão acessíveis publicamente. Volte para a página de visão geral clicando na seta para trás na página de detalhes do seu bucket. Você deverá ver seu bucket recém-criado com as opções de configuração que usamos. A seguir precisaremos instruir o bucket do nosso site e podemos fazer isso clicando nos três pontos da linha do bucket recém-criado. Selecione "Editar configuração do site" e você verá algo assim:

Para a entrada da página de índice, digite "index.html" e para a entrada da página de erro digite "404.html". Você notará que esses arquivos correspondem à saída de construção de nosso aplicativo Next.js, que é o que queremos e usaremos em breve. Conclua a alteração clicando em salvar.

Agora precisamos fazer upload de nossos arquivos contidos no diretório out do nosso código para este balde para que nosso site possa estar no ar! Podemos fazer isso manualmente navegando até a página de detalhes do bucket e selecionando cada arquivo ou pasta individualmente. Mas, vamos ser programáticos e escrever algum código para fazer isso. Volte para o seu IDE ou onde quer que você esteja atualizando seu código e vamos criar um novo arquivo chamado upload.sh na raiz do nosso projeto. Adicione o seguinte conteúdo:

 #!/bin/bash # ADD YOUR BUCKETNAME HERE (no quotes necessary) # For example: # BUCKETNAME=somerandombucket123 BUCKETNAME=somerandombucket123 echo "Removing out folder..." sleep 1; rm -rf out echo "Creating production build..." sleep 1; npm run build echo "Uploading assets to the cloud..." sleep 1; gsutil cp out/404.html gs://$BUCKETNAME gsutil cp out/favicon.ico gs://$BUCKETNAME gsutil cp out/index.html gs://$BUCKETNAME gsutil cp out/index.txt gs://$BUCKETNAME gsutil cp out/test.html gs://$BUCKETNAME gsutil cp out/test.txt gs://$BUCKETNAME gsutil cp -r out/_next gs://$BUCKETNAME

Certifique-se de substituir "somerandombucket123" pelo nome do seu bucket. Não se preocupe muito com a semântica do código aqui. Essencialmente o que estamos fazendo é:

1. Removendo qualquer build de produção obsoleto
2. Criando uma nova compilação de produção
3. Usando a Google Cloud CLI para fazer upload do conteúdo da nossa versão de produção para o nosso bucket

Antes de podermos executar este script, teremos que fazer download da CLI do Google Cloud. Você pode seguir as instruções aqui . Após a instalação, você precisará executar: gcloud auth login em seu terminal. Isso autorizará o acesso para usarmos a CLI do Google Cloud. Mais instruções e informações básicas sobre isso podem ser encontradas em sua documentação . Depois de autorizar com sucesso, vamos adicionar um novo script de execução ao nosso package.json. Adicione uma nova entrada de script dentro do objeto "scripts" para registrar nosso script de upload:

"upload": "sh upload.sh"

A seguir, vamos testá-lo. Abra seu terminal novamente e execute: "npm run upload". Isso executará nosso script e você deverá ver alguma saída sobre os uploads que estão acontecendo em seu bucket. Se voltarmos à página do Google Cloud Storage e abrirmos seu intervalo, você verá os arquivos que acabamos de enviar. Se você navegar para: https://storage.googleapis.com/YOUR_BUCKET_NAME/index.html (onde YOUR_BUCKET_NAME é o nome do seu bucket), você deverá ver o site. Mas você notará que o estilo padrão do Next.js desapareceu e o link para nossa página de teste está quebrado. Alguma idéia do porquê?

Se você abrir o console do navegador, deverá ver muitos erros de recursos não encontrados. Em outras palavras, o navegador não consegue encontrar os arquivos que foi instruído a carregar para o seu site. Se você olhar com atenção, verá que o URL do recurso não está correto, falta o nome do intervalo no caminho. Se tivéssemos usado um domínio personalizado e configurado o DNS corretamente, não teríamos esse problema. Mas para os propósitos desta postagem, vamos adicionar alguns códigos adicionais para corrigir o roteamento. Abra src/app/page.tsx (ou page.jsx) e atualize o arquivo para que fique assim:

 import Link from "next/link"; import styles from "./page.module.css"; // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href={isProd ? '/BUCKET_NAME/test.html' : "/test"}> Test Page! </Link> </div> </main> ); }

Certifique-se de substituir "somerandombucket123" pelo nome do seu bucket. Em seguida, atualize o arquivo next.config para ficar assim:

 // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; /** @type {import('next').NextConfig} */ const nextConfig = { assetPrefix: isProd ? 'https://storage.googleapis.com/BUCKET_NAME/' : undefined, output: "export", }; export default nextConfig;

Novamente, certifique-se de substituir “somerandombucket123” pelo nome do seu bucket. Você notará no trecho de código acima que adicionamos lógica adicional para explicar o nome do nosso bucket quando a variável de ambiente do nó é produção (definida por Next.js). Estamos adicionando um prefixo de ativo para corrigir os erros de recurso não encontrado no arquivo de configuração e contabilizando o erro de roteamento em nossa página inicial, prefixando a rota com o nome do nosso bucket. Vamos fazer upload do nosso código agora e ver se funciona. Mais uma vez, comece: npm run upload. Volte para o seu site e recarregue a página. Como fizemos? O site deve refletir o que temos localmente agora. No início do processo, se criássemos o bucket para corresponder ao nosso nome de domínio, teríamos erros de recursos, mas ainda teríamos o problema de roteamento do cliente. Infelizmente, uma desvantagem dessa abordagem é o código adicional necessário para adicionar o sufixo .html às rotas para veiculação de produção.

Próximas etapas 😎

Posteriormente, abordarei a adição dos registros DNS e as alterações de configuração necessárias ao nosso bucket para servir um domínio personalizado, bem como a configuração do SSL para o nosso site. Espero que você tenha aprendido algo hoje e no futuro falarei sobre algumas ideias sobre:

• Usando o nível gratuito da Cloudflare para redirecionamentos de página e SSL
• Configurando o Google Analytics e otimizando SEO

Obrigado pela leitura e felicidades!