Installing the HubSpot CMS CLI

Today I installed the HubSpot CMS CLI successfully! Here are the steps I took:

  1. I started with the documentation here.
  2. Installed the dependencies: Node.js and ran the command npm install @hubspot/cli.
  3. 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 using cd local-cms-dev
  4. Ran the init flow. The command on the docs is stated as hs init but this actually threw an error for me. Error: command not found: hs.
  5. So I searched the error on Jira (internal) and found that the command should be npx hs init instead. Tried that and it worked!
  6. Obtained my personal CMS access key and pasted it into the terminal. Created my account, called "Piccadilly". Named after my cat of course.
  7. Success! The config file "/Users/rramchandra/local-cms-dev/hubspot.config.yml" was created using your personal access key for account Piccadilly.
  8. 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.
  9. 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.
  10. 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.
  11. To test the watch command: npx hs watch basic basic. Response: 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. 
  12. 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. 

 

Leave a Comment