HubSpot CMS quickstart guide

Last updated:

 HubSpot CMS is a powerful, flexible platform for creating HubSpot websites, including website pages, blogs, and lightweight apps. It features built-in security and reliability features, along with a globally distributed Content Delivery Network (CDN) that ensures fast page load times.

With HubSpot CMS, you can use your preferred tools, technologies, and workflows, such as GitHub, while developing websites. Content creators can then create pages and publish content using drag and drop editors. And because HubSpot CMS is integrated with the CRM, you can create dynamic website experiences for your visitors based on the data you already have.

Below, walk through the quickstart guide to get started quickly on HubSpot CMS.

Before you begin

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

  • Create a free CMS Developer 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 10 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 theme and its associated files will be placed.

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

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 theme

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

4. Upload your theme to HubSpot

Run hs upload my-website-theme my-website-theme to upload your new theme 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 "my-website-theme" if it's not already selected, then 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 theme'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.

What's next?

We encourage you to continue to explore and experiment with the boilerplate theme and the page-building experience. The sandbox account you created is yours to play around in and experiment with.

You can checkout HubSpot's Inspire gallery to see websites, landing pages, and web apps built on HubSpot.

You might also want to check out the following documentation:

Join the HubSpot CMS developer community

Learning is easier when you can learn from those who came before you.

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 Developer Slack to collaborate with 9,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.


Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.