Connect directly with our accredited consultant to get clear answers on your HubSpot underutilized features, integrations, reporting and automation.
HubSpot Consulting Needs
Custom Automation Plan 
HubSpot CLI (Command Line Interface) is an important tool for developers working with HubSpot.
It enables local development, content management, and theme customization while providing a straightforward way to preview changes before deploying them to a live environment.
This guide will walk you through how to preview from HubSpot CLI, including installation, setup, and running preview commands.
Before you start, ensure you have the following:
The first step is to install the HubSpot CLI using NPM. If you haven’t installed it yet, run the following command:
npm install -g @hubspot/cli
This command installs the HubSpot CLI globally, making it accessible from any directory in your system.
To verify the installation, run:
hs --version
If installed correctly, the terminal will return the installed version of the HubSpot CLI.
After installing the CLI, you need to authenticate it with your HubSpot account.
Run the following command to connect your CLI to HubSpot:
hs auth
This will open a browser window prompting you to log in to your HubSpot account.
Once authenticated, the CLI will be linked to your HubSpot environment.
To confirm that your authentication is successful, use:
hs accounts list
This command will display all connected HubSpot accounts.
To develop and preview themes, you need to set up a local development environment by creating a new HubSpot CMS project or using an existing one.
To create a new project, use:
hs create website-theme my-custom-theme
Then, navigate into the theme folder:
cd my-custom-theme
For existing themes, navigate to the respective theme directory where your HubSpot files are stored.
If you haven’t already, connect your local project to your HubSpot account:
hs init
This command will ask for your HubSpot account, select the correct account, and complete the setup.
You can also manually add your HubSpot portal ID to hubspot.config.yml file within your project directory.
Example hubspot.config.yml file:
accounts:
default:
portalId: YOUR_PORTAL_ID
authType: personalaccesskey
personalAccessKey: YOUR_ACCESS_KEY
Once your project is connected, you need to upload your files to HubSpot Design Manager for previewing changes.
Use the following command to upload your files:
hs upload src my-hubspot-folder
Here:
src:
The local directory containing your HubSpot files.
my-hubspot-folder:
The destination folder in your HubSpot CMS file manager.
Using the hs watch Command
To live preview your changes, use the watch command:
hs watch src my-hubspot-folder
This command does the following:
If you only need to preview a specific file, use:
hs upload src/templates/home.html my-hubspot-folder/templates/home.html
After uploading, you can preview the file within your HubSpot CMS under Design Tools.
Once your files are uploaded, you can directly open them in your browser using:
hs open @hubspot/template-path
Replace @hubspot/template-path with the actual path of your file in HubSpot CMS.
For example:
hs open @hubspot/my-hubspot-folder/templates/home.html
This command will open the preview link in your default web browser.
Before publishing, make sure everything works as expected:
If everything looks good, you can proceed to publish your changes using:
hs publish
If you encounter issues, here are some common solutions:
If hs commands are not recognized, ensure NPM is in your system PATH:
export PATH="$HOME/.npm-global/bin:$PATH"
If you face authentication errors, try re-authenticating:
hs auth revoke
hs auth
Ensure hs watch is running.
Try manually re-uploading files:
hs upload src my-hubspot-folder
Clear cache by opening Developer Console (Ctrl + Shift + R).
| Command | Description |
|---|---|
npm install -g @hubspot/cli |
Installs HubSpot CLI |
hs auth |
Authenticates with HubSpot |
hs create website-theme my-custom-theme |
Creates a new theme |
hs init |
Initializes HubSpot CLI in project |
hs upload src my-hubspot-folder |
Uploads files to HubSpot CMS |
hs watch src my-hubspot-folder |
Watches for changes and syncs updates |
hs open @hubspot/template-path |
Opens a file in browser preview |
hs publish |
Publishes changes to live site |
Using HubSpot CLI allows developers to preview and test their HubSpot CMS projects before deployment.
By following this guide, you can improvise your development process and ensure your themes and templates look perfect before going live.
How to use HubSpot CLI for usual work?
HubSpot CLI allows developers to manage HubSpot CMS projects by providing commands to authenticate, upload, preview, and publish changes.
Using commands like hs watch, hs upload, and hs open, you can develop local environment while syncing updates in real-time to HubSpot CMS.
How to create a theme in HubSpot by CLI Command?
To create a theme in HubSpot, use the command:
hs create website-theme my-custom-theme
This generates a new theme with default templates and modules, which you can customize and upload to HubSpot CMS.
How to Integrate HubSpot with Elementor Forms
How to Build a Header in HubSpot
How to Associate Campaign with Webinar in HubSpot
