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   e  React.js Next.js  Conforto com uma  CLI  Um IDE instalado no seu computador –   é o que eu uso por exemplo VSCode  Tenho tendência a pensar melhor dividindo uma meta em partes incrementais de trabalho. Vamos enquadrar nossas tarefas dessa forma enquanto criamos nosso site:  Configurar  Código inicial para nosso site  Configurando um bucket para nosso site  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   . Para mim, meu domínio era   , 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): artigo posterior afro-cloud.com   Vai Papai   Host Azul   Espaço quadrado  Agora que configuramos nosso domínio, vamos criar uma conta do Google Cloud e ativar o faturamento.  Navegue até o  Console do Google Cloud  Use uma conta do Google existente ou crie uma nova para entrar no console (isso é necessário para usar o Google Cloud)  Crie um novo projeto clicando no menu suspenso de seleção de projetos na barra superior da tela  Navegue até "Faturamento"  Crie uma nova conta de faturamento seguindo as   fornecidas pelo Google Cloud instruções  Ó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?   / Sim Não  Você gostaria de usar o ESLint? Não /  Sim  Você gostaria de usar Tailwind CSS?   / Sim Não  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 (@/*)?   / Sim Não  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:   . 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á   , 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:  npm run dev http://localhost:3000  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 é:  Removendo qualquer build de produção obsoleto  Criando uma nova compilação de produção  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   . Após a instalação, você precisará executar:   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   . 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: aqui gcloud auth login documentação   "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:   (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ê? https://storage.googleapis.com/YOUR_BUCKET_NAME/index.html  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!

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

Software Engineer

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Make resilience your competitive advantage

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

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps