O Gatsby.js é um framework baseado em React que utiliza o Node.js para criar sites estáticos rápidos e eficientes. Ele é ideal para criar blogs, portfólios, e-commerce e outros sites que priorizam o desempenho. Neste tutorial, vamos guiá-lo no processo de instalação do Gatsby.js no Ubuntu 22.04.
Requisitos
- Servidor rodando Ubuntu 22.04
- Acesso root ou um usuário com privilégios sudo
- Node.js instalado
Passo 1: Atualizar o Sistema
Como em qualquer instalação, é uma boa prática garantir que todos os pacotes do sistema estejam atualizados. Execute os seguintes comandos para atualizar o sistema:
sudo apt update && sudo apt upgrade -yPasso 2: Instalar o Node.js e NPM
O Gatsby.js depende do Node.js e do NPM (Node Package Manager). Primeiro, adicione o repositório oficial do Node.js e instale a versão mais recente do Node.js:
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt install nodejs -yVerifique se o Node.js e o NPM foram instalados corretamente:
node -v
npm -vPasso 3: Instalar o Gatsby CLI
O Gatsby CLI é uma ferramenta de linha de comando que facilita a criação e o gerenciamento de projetos Gatsby. Para instalá-lo globalmente no seu sistema, execute o seguinte comando:
sudo npm install -g gatsby-cliDepois que a instalação for concluída, você pode verificar se o Gatsby CLI foi instalado corretamente com o seguinte comando:
gatsby --versionPasso 4: Criar um Novo Projeto Gatsby
Agora que o Gatsby CLI está instalado, você pode criar um novo projeto Gatsby. Navegue até o diretório onde deseja criar seu projeto e execute o seguinte comando:
gatsby new meu-site-gatsbyIsso criará uma nova estrutura de projeto no diretório meu-site-gatsby. Depois que o processo de instalação for concluído, navegue até o diretório do projeto:
cd meu-site-gatsbyPasso 5: Executar o Servidor de Desenvolvimento
Agora você pode iniciar o servidor de desenvolvimento do Gatsby, que fornece uma visualização ao vivo do seu site enquanto você desenvolve. Execute o seguinte comando para iniciar o servidor:
gatsby developSe tudo estiver configurado corretamente, você verá uma mensagem informando que o servidor está rodando no endereço http://localhost:8000. Você pode acessar o servidor local em um navegador usando o IP público do servidor e a porta 8000, como http://seu-servidor-ip:8000.
Passo 6: Construir o Projeto para Produção
Depois de desenvolver seu site, você pode criar uma versão otimizada para produção usando o seguinte comando:
gatsby buildIsso gerará uma versão estática do seu site no diretório public, que pode ser implantada em qualquer servidor web.
Passo 7: Servir o Projeto Gatsby com Nginx (Opcional)
Se você deseja servir seu projeto Gatsby em produção usando Nginx, configure o Nginx para servir os arquivos estáticos gerados na etapa anterior. Primeiro, instale o Nginx se ainda não estiver instalado:
sudo apt install nginx -yEm seguida, edite o arquivo de configuração do Nginx para seu site:
sudo nano /etc/nginx/sites-available/meu-site-gatsbyAdicione a seguinte configuração:
server {
listen 80;
server_name seu-dominio.com;
root /caminho/para/seu/projeto/meu-site-gatsby/public;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}Salve o arquivo, ative o site e reinicie o Nginx:
sudo ln -s /etc/nginx/sites-available/meu-site-gatsby /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginxPasso 8: Configurar SSL Gratuito com Let’s Encrypt (Opcional)
Para proteger seu site Gatsby com SSL, você pode usar o Let’s Encrypt para obter um certificado gratuito. Primeiro, instale o Certbot e o plugin Nginx:
sudo apt install certbot python3-certbot-nginx -yEm seguida, execute o Certbot para obter e instalar o certificado SSL para o seu domínio:
sudo certbot --nginx -d seu-dominio.comSiga as instruções na tela para concluir a configuração do SSL. O Certbot também configurará automaticamente a renovação do certificado.
Servidor VPS
Se precisar de um servidor VPS confiável para hospedar seu projeto Gatsby.js com segurança e desempenho, veja as opções disponíveis aqui.
