Quick start guide to developing on the HubSpot CMS

Welcome to the HubSpot CMS, a hosted solution designed to scale with your business. It's a powerful, flexible platform for creating beautiful websites, blogs, landing pages, lightweight apps, and emails.

Fast, secure, reliable

HubSpot handles security, reliability, maintenance, and more so your team can focus on writing code and creating delightful user experiences. The HubSpot CMS' globally distributed Content Delivery Network (CDN) ensures lightning-fast page load times no matter where your visitors are.

Powerful for developers, flexible for marketers

Developers can build websites using their preferred tools, technologies, and workflows. Marketers can then create pages and publish content using our simple drag-and-drop experience. Using templates and modules as building blocks, developers can create flexible design systems for content creators to use.

CRM + CMS

Because the HubSpot CMS is integrated with our CRM, businesses can create personalized, disruptive website experiences for their visitors.

Get started for free by following the Quick Start guide below. It's intended for experienced developers, so if you're interested in starting with HubSpot's in-app Design Manager, please refer to this guide instead.

Before you begin

You'll need to do a few things before you start building on the HubSpot CMS:

  • Create a free CMS sandbox account and keep it open in a browser window as you go through this guide.
  • Install Node.js, which enables HubSpot's local development tools. Versions 8.9.1 or higher are supported.

1. Install the HubSpot CMS CLI

Once you're ready to begin, open a terminal window and create or navigate to the directory where you want your local HubSpot files to live. This working directory is where the project and its associated files will be placed as you follow this guide.

Next, run npm install -g @hubspot/cms-cli to install the cms-cli, which introduces an hs command that allows you to easily interact with your HubSpot account.

Install the HubSpot CMS CLI via Terminal

2. Configure the local development tools

Run hs init to connect the tools to your HubSpot account. This command will walk you through the following steps:

  1. First you’ll be guided to create a personal CMS access key to enable authenticated access to your account via the local development tools. You’ll be prompted to press "Enter" when you’re ready to open the Personal CMS Access Key page in your default browser. This page will allow you to view or generate your personal access key, if necessary. (Note: You’ll need to select at least the "Design Manager" permission in order to complete this tutorial.) Copy your access key and paste it in the terminal.
  2. Next, you’ll enter a name for the account. This name is only seen and used by you, For example, you might use "sandbox" if you're using a developer sandbox or "company.com" if you’re using a full customer account. This name will be used when running commands.

Once you've completed this simple init flow, you'll see a success message confirming that a configuration file, hubspot.config.yml, has been created in your current directory.

3. Create a project

Run hs create website-theme my-website-theme to create a my-website-theme directory populated with files from the CMS theme boilerplate.

Feel free to open this project in your editor to explore the templates, modules, and files used for building pages.

4. Upload your project to HubSpot

Run hs upload my-website-theme my-website-theme to upload your new project to a my-website-theme folder in your HubSpot account.

Once this task has completed, you can view these files in the Design Manager, an in-app code editor that can be found by navigating to Marketing > Files and Templates > Design Tools in the top navigation bar.

5. Create a website page

To experience how content creators will use your templates and modules, navigate to Marketing > Websites > Website pages in the top navigation bar. Select the "Create" dropdown in the upper right-hand corner and choose "Website page."

On the next page, select the "Homepage" template and provide a name for your page. This will create a new page using the template and will open the page in the content editor, where you can make any changes you'd like. On the Settings tab, set a URL for the page, add a page title, and select "Publish." Select your page's URL to view the live page.

6. Edit a CSS file

Run hs watch my-website-theme my-website-theme. While watch is running, every time you save a file, it’ll be automatically uploaded. Open your project's /css/components/_footer.css file in your editor, make a change (such as updating the .footer__copyright selector to have color: red;), and save your changes. Your terminal will show that the saved file has been uploaded.

Reload your published page to see the CSS change reflected on your website.

Congratulations! You've deployed your first project on the HubSpot CMS. Continue to explore and experiment with your boilerplate project and the page-building experience. To keep learning, check out our CMS developer tutorials and join our community of HubSpot CMS developers.

Join the HubSpot CMS developer community

HubSpot is driven by our Culture Code, embodied by the attributes in HEART: Humble, Empathetic, Adaptable, Remarkable, and Transparent. This culture extends to our ever-growing developer community, with thousands of brilliant and helpful developers around the world.

Developer Slack community

Join the CMS Developer Slack to collaborate with 4,000+ HubSpot CMS developers and members of the HubSpot product team.

Developer forums

Ask questions, learn from fellow developers, and submit ideas in the CMS developer forums.