Como instalar o Gatsby no Ubuntu 20.04

Neste artigo, explicaremos como instalar o Gatsby no Ubuntu 20.04.

Gatsby é uma estrutura de código aberto baseada no React para a criação de sites e aplicativos. É ótimo se você está construindo um site de portfólio ou blog, ou uma loja de comércio eletrônico de alto tráfego ou a página inicial de uma empresa. Crie sites e aplicativos extremamente rápidos E aproveite o poder de mais de 2.000 plug-ins. Construa sites com os serviços que você deseja, como Shopify, Stripe e WordPress, de forma rápida e fácil com os mais de 2.000 plug-ins de Gatsby. Integre dados de qualquer lugar: APIs, bancos de dados, CMSs, arquivos estáticos - ou várias fontes ao mesmo tempo

Este artigo irá guiá-lo com o processo de instalação e implantação do site Gatsby inicial padrão.

Pré-requisitos

• Um servidor dedicado Ubuntu 20.04 instalado ou KVM VPS.
• Um usuário root ou usuário normal com privilégios de administrador sudo.

Instale Gatsby no Ubuntu 20.04

Etapa 1 - Mantenha o servidor atualizado

# apt update -y && apt upgrade -y

Etapa 2 - Instale o NodeJS e o NPM

Instale a versão estável mais recente do NodeJS.

# curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -

# apt-get install -y nodejs

Verifique se a instalação foi bem-sucedida.

# node -v && npm -v

Saída:

v15.9.0
7.5.4

Etapa 3 - Instale o gatsby-cli

O Gatsby CLI ( gatsby-cli ) é empacotado como um executável que pode ser usado globalmente. O Gatsby CLI está disponível via npm . Execute o seguinte comando para instalar o gatsby-cli :

# npm install -g gatsby-cli

Verifique a instalação:

# gatsby --version

Saída:

# Gatsby CLI version: 2.19.1

Etapa 4 - implantar novo site

Para gerar um novo site Gatsby, execute o seguinte comando:

# gatsby new

Saída:

create-gatsby version 0.5.1

Welcome to Gatsby!

This command will generate a new Gatsby site for you in /root with the setup you select. Let’s answer some
questions:

What would you like to call your site?
· My Gatsby Site

A CLI executará um shell interativo solicitando essas opções antes de criar um site Gatsby para você. Escolha e preencha de acordo com os requisitos do seu site. Ele criará um site Gatsby e um diretório em / root .

Veja todos os comandos em https://www.gatsbyjs.com/docs/gatsby-cli/

Criação de um site a partir de um iniciante

Para criar um site Gatsby denominado my-awesome-site usando o iniciador padrão, execute o seguinte comando:

# gatsby new my-awesome-site

O comando acima criará um diretório my-awesome-site em / root .

Veja a documentação inicial de Gatsby para mais detalhes.

Desenvolver

Depois de instalar um site Gatsby, vá para o diretório raiz do seu projeto e inicie o servidor de desenvolvimento usando o seguinte comando:

# cd my-awesome-site

# gatsby develop -H 0.0.0.0

Opções:

• -H, --host Define o host. O padrão é localhost
• -p, --port Define a porta. O padrão é env.PORT ou 8000
• -o, --open Abre o site em seu navegador (padrão) para você
• -S, --https Usar HTTPS

Agora você pode visualizar meu site incrível no navegador.

Local: http://localhost:8000/
On Your Network: http://192.168.0.102:8000/

Construir

Na raiz de um site Gatsby, compile seu aplicativo e deixe-o pronto para implantação:

# gatsby build

Opções

• --prefix-path Construir site com caminhos de link prefixados (definir pathPrefix em sua configuração)
• --no-uglify Construir site sem feios pacotes JS (para depuração)
• --profile Construir site com perfil de reação. Consulte Criação de Perfil de Desempenho do Site com React Profiler
• --open-tracing-config-file Arquivo de configuração do Tracer (compatível com OpenTracing). Veja o rastreamento de desempenho
• --graphql-tracing Trace (veja acima) todo resolvedor graphql pode ter implicações de desempenho.
• --no-color, --no-colors Desativa a saída do terminal colorido

É isso. A instalação foi concluída com sucesso.