\u00a0<\/p>\n<\/p>\n
O Gatsby.js<\/strong> \u00e9 um framework baseado em React<\/strong> que utiliza o Node.js<\/strong> para criar sites est\u00e1ticos r\u00e1pidos e eficientes. Ele \u00e9 ideal para criar blogs, portf\u00f3lios, e-commerce e outros sites que priorizam o desempenho. Neste tutorial, vamos gui\u00e1-lo no processo de instala\u00e7\u00e3o do Gatsby.js no Ubuntu 22.04.<\/p>\n Como em qualquer instala\u00e7\u00e3o, \u00e9 uma boa pr\u00e1tica garantir que todos os pacotes do sistema estejam atualizados. Execute os seguintes comandos para atualizar o sistema:<\/p>\n O Gatsby.js depende do Node.js e do NPM (Node Package Manager). Primeiro, adicione o reposit\u00f3rio oficial do Node.js e instale a vers\u00e3o mais recente do Node.js:<\/p>\n Verifique se o Node.js e o NPM foram instalados corretamente:<\/p>\n O Gatsby CLI<\/strong> \u00e9 uma ferramenta de linha de comando que facilita a cria\u00e7\u00e3o e o gerenciamento de projetos Gatsby. Para instal\u00e1-lo globalmente no seu sistema, execute o seguinte comando:<\/p>\n Depois que a instala\u00e7\u00e3o for conclu\u00edda, voc\u00ea pode verificar se o Gatsby CLI foi instalado corretamente com o seguinte comando:<\/p>\n Agora que o Gatsby CLI est\u00e1 instalado, voc\u00ea pode criar um novo projeto Gatsby. Navegue at\u00e9 o diret\u00f3rio onde deseja criar seu projeto e execute o seguinte comando:<\/p>\n Isso criar\u00e1 uma nova estrutura de projeto no diret\u00f3rio Agora voc\u00ea pode iniciar o servidor de desenvolvimento do Gatsby, que fornece uma visualiza\u00e7\u00e3o ao vivo do seu site enquanto voc\u00ea desenvolve. Execute o seguinte comando para iniciar o servidor:<\/p>\n Se tudo estiver configurado corretamente, voc\u00ea ver\u00e1 uma mensagem informando que o servidor est\u00e1 rodando no endere\u00e7o Depois de desenvolver seu site, voc\u00ea pode criar uma vers\u00e3o otimizada para produ\u00e7\u00e3o usando o seguinte comando:<\/p>\n Isso gerar\u00e1 uma vers\u00e3o est\u00e1tica do seu site no diret\u00f3rio Se voc\u00ea deseja servir seu projeto Gatsby em produ\u00e7\u00e3o usando Nginx, configure o Nginx para servir os arquivos est\u00e1ticos gerados na etapa anterior. Primeiro, instale o Nginx se ainda n\u00e3o estiver instalado:<\/p>\n Em seguida, edite o arquivo de configura\u00e7\u00e3o do Nginx para seu site:<\/p>\n Adicione a seguinte configura\u00e7\u00e3o:<\/p>\n Salve o arquivo, ative o site e reinicie o Nginx:<\/p>\n Para proteger seu site Gatsby com SSL, voc\u00ea pode usar o Let’s Encrypt para obter um certificado gratuito. Primeiro, instale o Certbot e o plugin Nginx:<\/p>\n Em seguida, execute o Certbot para obter e instalar o certificado SSL para o seu dom\u00ednio:<\/p>\n Siga as instru\u00e7\u00f5es na tela para concluir a configura\u00e7\u00e3o do SSL. O Certbot tamb\u00e9m configurar\u00e1 automaticamente a renova\u00e7\u00e3o do certificado.<\/p>\n Se precisar de um servidor VPS<\/a> confi\u00e1vel para hospedar seu projeto Gatsby.js com seguran\u00e7a e desempenho, veja as op\u00e7\u00f5es dispon\u00edveis aqui.<\/p>\n Windows VPS Deutschland<\/a><\/p>\n Windows VPS Espa\u00f1a<\/a><\/p>\n Windows VPS Nederland<\/a><\/p>\n Windows VPS Italia<\/a><\/p>\n Windows VPS Portugal<\/a><\/p>\n VPS Windows Italia<\/a><\/p>\n Windows VPS<\/a><\/p>\n Windows VPS<\/a><\/p>\n Windows VPS Sverige<\/a><\/p>\n Windows VPS Norge<\/a><\/p>\n Windows VPS<\/a><\/p>\n Windows VPS T\u00fcrkiye<\/a><\/p>\nRequisitos<\/h2>\n
\n
Passo 1: Atualizar o Sistema<\/h2>\n
sudo apt update && sudo apt upgrade -y<\/code><\/pre>\nPasso 2: Instalar o Node.js e NPM<\/h2>\n
curl -fsSL https:\/\/deb.nodesource.com\/setup_16.x | sudo -E bash -\r\nsudo apt install nodejs -y<\/code><\/pre>\nnode -v\r\nnpm -v<\/code><\/pre>\nPasso 3: Instalar o Gatsby CLI<\/h2>\n
sudo npm install -g gatsby-cli<\/code><\/pre>\ngatsby --version<\/code><\/pre>\nPasso 4: Criar um Novo Projeto Gatsby<\/h2>\n
gatsby new meu-site-gatsby<\/code><\/pre>\nmeu-site-gatsby<\/code>. Depois que o processo de instala\u00e7\u00e3o for conclu\u00eddo, navegue at\u00e9 o diret\u00f3rio do projeto:<\/p>\ncd meu-site-gatsby<\/code><\/pre>\nPasso 5: Executar o Servidor de Desenvolvimento<\/h2>\n
gatsby develop<\/code><\/pre>\nhttp:\/\/localhost:8000<\/code>. Voc\u00ea pode acessar o servidor local em um navegador usando o IP p\u00fablico do servidor e a porta 8000, como http:\/\/seu-servidor-ip:8000<\/code>.<\/p>\nPasso 6: Construir o Projeto para Produ\u00e7\u00e3o<\/h2>\n
gatsby build<\/code><\/pre>\npublic<\/code>, que pode ser implantada em qualquer servidor web.<\/p>\nPasso 7: Servir o Projeto Gatsby com Nginx (Opcional)<\/h2>\n
sudo apt install nginx -y<\/code><\/pre>\nsudo nano \/etc\/nginx\/sites-available\/meu-site-gatsby<\/code><\/pre>\nserver {\r\n listen 80;\r\n server_name seu-dominio.com;\r\n\r\n root \/caminho\/para\/seu\/projeto\/meu-site-gatsby\/public;\r\n index index.html;\r\n\r\n location \/ {\r\n try_files $uri $uri\/ =404;\r\n }\r\n}<\/code><\/pre>\nsudo ln -s \/etc\/nginx\/sites-available\/meu-site-gatsby \/etc\/nginx\/sites-enabled\/\r\nsudo nginx -t\r\nsudo systemctl restart nginx<\/code><\/pre>\nPasso 8: Configurar SSL Gratuito com Let’s Encrypt (Opcional)<\/h2>\n
sudo apt install certbot python3-certbot-nginx -y<\/code><\/pre>\nsudo certbot --nginx -d seu-dominio.com<\/code><\/pre>\nServidor VPS<\/h2>\n