Installing the HubSpot CMS CLI
Today I installed the HubSpot CMS CLI successfully! Here are the steps I took:
- I started with the documentation here.
- Installed the dependencies: Node.js and ran the command
npm install @hubspot/cli.
- Created a working directory: ran the commands
mkdir local-cms-dev.
This created my folder called "local-cms-dev". Then I navigated to this folder usingcd local-cms-dev.
- Ran the
init
flow. The command on the docs is stated ashs init
but this actually threw an error for me. Error:command not found: hs
. - So I searched the error on Jira (internal) and found that the command should be
npx hs init
instead. Tried that and it worked! - Obtained my personal CMS access key and pasted it into the terminal. Created my account, called "Piccadilly". Named after my cat of course.
- Success!
The config file "/Users/rramchandra/local-cms-dev/hubspot.config.yml" was created using your personal access key for account Piccadilly.
- Fetched a folder from my Design manager. Folder name: "basic". Ran the command
npx hs fetch basic
. That worked:Completed fetch of folder "basic" to "/Users/rramchandra/local-cms-dev" from the Design Manager.
- So now the "basic" folder is in my local folder
"local-cms-dev".
Opening the file"cli.html"
, I added a new HubL rich text area. I just wanted to make a simple change locally, upload it to the design manager, and see the change there too. - Once I saved the changes, I ran the command
npx hs upload basic basic
to upload the file to the Design Manager.Uploaded file "/Users/rramchandra/local-cms-dev/basic/cli.html" to "basic/cli.html" [SUCCESS] Uploading files to "basic" in the Design Manager is complete. - To test the
watch
command:
Response:npx hs watch basic basic.
Watcher is ready and watching /Users/rramchandra/local-cms-dev/basic
.Any changes detected will be automatically uploaded and overwrite the current version in the developer file system.
-
I added a third rich text module into my file, saved it, and immediately saw:
Uploaded file /Users/rramchandra/local-cms-dev/basic/cli.html to basic/cli.html
in the terminal.
It took some trial and error on the command line to get this right but it was pretty thrilling to see the changes reflecting in the Design Manager. Overall the process was straightforward enough for a CLI beginner user like me to follow.
I think it could be clarified on the docs, though, that you'd run a command with the npx
prefix if you install it locally. I also expected the changes to appear in theDesign Manager right away, but it needed a refresh.