Introdução ao desenvolvimento local
A CLI (Interface de Linha de Comando) conecta seu ambiente local ao HubSpot, o que significa que você terá cópias locais dos seus ativos web do HubSpot. Isso permite que você use o controle de versão, seu editor de texto favorito e várias tecnologias de desenvolvimento web ao desenvolver no HubSpot CMS.
Este guia é ideal para pessoas que já estão familiarizadas com o CMS, mas que querem aprender sobre como trabalhar com a CLI. Caso seja sua primeira vez trabalhando com desenvolvimento no HubSpot CMS Hub, consulte o guia de início rápido:
Neste tutorial, você aprenderá:
- Como instalar a CLI e conectá-la à sua conta da HubSpot.
- Como obter um módulo da sua conta da HubSpot.
- Como atualizar o módulo localmente e carregar suas alterações.
- Como usar o comando
watch
para continuar carregando as alterações salvas.
Para ver mais comandos e formatos de arquivo locais, consulte a Referência de ferramentas de desenvolvimento local.
Para desenvolver no HubSpot localmente, você precisará:
- Instalar o Node.js, um ambiente Javascript em tempo de execução que possibilita as ferramentas locais. A versão 16 ou superior do Node é suportada, mas recomendamos a versão de suporte a longo prazo (LTS).
- Execute npm install -g @hubspot/cli na sua linha de comando para instalar a CLI da HubSpot globalmente. Para instalar as ferramentas em seu diretório atual, execute npm install @hubspot/cli.
se preferir, você também pode usar o Yarn. Se você estiver usando o Yarn, os comandos serão executados com o prefixo yarn.
Recebeu um erro EACCES ao instalar?
Consulte NPM Como resolver erros de permissão EACCESS ao instalar pacotes globalmente.
Crie uma pasta para o trabalho que fará abaixo. Para este tutorial, nomeie a pasta como local-dev-tutorial
.
Você pode fazer isso localmente executando o mkdir local-dev-tutorial na linha de comando, o que criará o diretório. Depois, execute cd local-dev-tutorial para navegar até esse diretório.
Em seguida, execute hs init
para conectar o os instrumentos à sua conta da HubSpot. Este comando oferecerá orientação pelas etapas abaixo.
- Para conectar a CLI a uma conta da HubSpot, você precisará copiar a chave de acesso pessoal da conta. Se solicitado, pressione Enter para abrir hubspot.com na página da chave de acesso pessoal da conta. Se você tiver várias contas, será solicitado no navegador que selecione uma conta primeiro.
- Na página da chave de acesso pessoal, você pode gerar uma nova chave de acesso pessoal ou copiar o valor da chave existente, se já existir.
- Se estiver criando uma chave pela primeira vez, selecione a quais escopos a chave tem acesso. Você precisará selecionar pelo menos a permissão do Gerenciador de Design para interagir com as ferramentas de design da conta.
- Depois de selecionar as permissões da chave, clique em Gerar chave de acesso pessoal.
- Depois que uma chave for gerada, copie o valor clicando primeiro em Mostrar sob a chave e em Copiar.
- Cole a tecla na linha de comando e pressione Enter.
- Em seguida, insira um nome para a conta. Esse nome só será visto e usado por você ao executar comandos. Por exemplo, você pode usar "sandbox" se estiver usando um sandbox de desenvolvedor ou "company.com" se estiver usando uma conta de cliente completa. Esse nome não pode conter espaços.
- Pressione Enter.
Depois de concluir o fluxo init , você verá uma mensagem de sucesso confirmando que o arquivo de configuração, hubspot.config.yml foi criado no diretório atual.
O hubspot.config.yml será parecido com isso:
Nome | Description |
---|---|
defaultPortal
Opcional
| A conta com a qual se interage por padrão ao executar comandos da CLI. Para interagir com uma conta autenticada que não está definida como padrão, você pode adicionar um sinalizador |
name
Opcional
| Em |
portalId
Obrigatório
| O ID da conta. |
defaultMode
Opcional
| Ao carregar na conta, define o estado padrão no qual carregar o conteúdo. Pode ser |
authType
Obrigatório
| A forma de autenticação usada para autenticar a conta. |
sandboxAccountType
Opcional
| Se a conta for uma conta de sandbox, indica o ID da conta de produção principal. |
parentAccountId
Opcional
| parentAccountId |
O arquivo hubspot.config.yml
permite várias contas. Para autenticar mais contas, execute hs auth
e siga as instruções.
Para este tutorial, primeiro você criará um novo ativo no HubSpot para poder buscá-lo no seu ambiente local usando a CLI.
- Na sua conta da HubSpot, acesse Marketing > Arquivos e modelos > Ferramentas de design. O gerenciador de design será aberto e você poderá acessar os arquivos que deseja carregar usando a CLI. Esta árvore de arquivos e pastas também é conhecida como o sistema de arquivos do desenvolvedor.
- Na barra lateral esquerda do gerenciador de design, selecione a pasta @hubspot para visualizar os ativos padrão da HubSpot, como temas e módulos.
- Na barra lateral esquerda, role para baixo e clique com o botão direito no módulo icon e, em seguida, selecione Clonar módulo. O módulo será clonado na raiz do sistema de arquivos do desenvolvedor e a sua nova cópia do módulo será aberta à direita.
- Na parte superior da barra lateral esquerda, clique em Ações e selecione Copiar caminho. O caminho relativo para o módulo no sistema de arquivos do desenvolvedor será copiado e você o usará na próxima etapa para buscar o módulo localmente.
Com o módulo clonado, agora você usará o comando fetch para trazê-lo ao seu ambiente local.
No terminal, execute hs fetch '/icon copy.module'
.
fields.json
: contém o código para os vários campos do módulo. Nesse caso, isso inclui o campo de ícone, dois campos de opção de acessibilidade e um conjunto de campos de estilo. Você pode ver esses campos na barra lateral direita do editor de módulos no HubSpot.meta.json
: contém as informações básicas do módulo, como seu rótulo, ID e os tipos de modelos em que pode ser usado. Essas informações serão exibidas na barra lateral direita do editor do módulo.module.css
: contém o CSS do módulo, que você também pode ver no painel CSS do editor de módulos no HubSpot.module.html
: contém o HTML do módulo, que você também pode ver no painel HubL + HTML do editor de módulos no HubSpot.module.js
: contém o JavaScript do módulo, que você também pode ver no painel JS do editor de módulos no HubSpot.
meta.json
do módulo, carregará esse arquivo na sua conta e verá a alteração no HubSpot.Primeiro, faça uma alteração no módulo:
- No editor de código que preferir, abra o arquivo
meta.json
do módulo. - Atualize o campo
label
de"Icon"
para"CMS tutorial module"
. Salve o arquivo.
hs upload
, vamos detalhar o comando e os argumentos necessários. Esse comando requer dois argumentos: hs upload <src> <dest>
src
: o caminho relativo da pasta de origem que você está carregando do ambiente local.dest
: o caminho do diretório de destino no HubSpot, local em relação à raiz do sistema de arquivos do desenvolvedor. Você pode criar um novo diretório na conta especificando o nome do diretório, comohs upload <src> /new-directory
.- Com isso em mente, como você está carregando na raiz do sistema de arquivos do desenvolvedor, execute o seguinte comando:
- Depois que a CLI confirmar que o módulo foi carregado com sucesso, atualize o gerenciador de design para ver sua alteração no HubSpot. Agora você deve ver que o campo Rótulo mostra o novo valor.
Depois de usar o comando upload
para carregar de uma vez seus arquivos locais, agora você usará o comando watch
para carregar continuamente as alterações salvas. Esse comando usa os mesmos argumentos que o comando upload
, de modo que você pode especificar os mesmos <src>
e <dest>
acima.
- Executar
hs watch 'icon copy.module' 'icon copy.module'
Com o comando watch em execução, as alterações salvas serão carregadas automaticamente na conta da HubSpot. Como demonstração, faça a seguinte alteração local no módulo:
- No arquivo
meta.json
, atualize o campohost_template_types
para remover"BLOG_LISTING"
e"BLOG_POST"
de modo que o módulo fique disponível apenas para as páginas:"host_template_types"
:["PAGE"]
- Salve o arquivo. Isso fará com que a CLI carregue automaticamente o arquivo no HubSpot.
- Com o arquivo carregado, atualize o gerenciador de design no HubSpot para ver a alteração. A seção Tipos de modelos na barra lateral direita agora deve incluir apenas Página.
- Para encerrar o comando watch, pressione
Control + C
. É importante observar que você não poderá executar outros comandos na mesma janela de terminal em que o comando Watch está sendo executado. Para executar outros comandos durante a execução de um comando watch, você deve abrir outra janela de terminal.
Agora que você aprendeu a usar os comandos fetch
, upload
e watch
, confira o guia completo de referência de comandos da CLI para saber o que mais você pode fazer com a CLI.
Também é recomendado conferir os seguintes tutoriais:
Agradecemos pelos seus comentários. Eles são muito importantes para nós.