Quickstart guide to developing on the HubSpot CMS (2024)

HubSpot's 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.

When developing on the 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 the CMS is integrated with the CRM, you can create dynamic website experiences for your visitors based on the data you already have.

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

• Create a free Developer Sandbox Accountand keep it open in a browser window as you go through this guide.
• InstallNode.js, which enables HubSpot's local development tools. Versions 10 or higher are supported.

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, runnpm install -g @hubspot/clito install the HubSpot CLI, which introduces anhscommand that allows you to easily interact with your HubSpot account.

Runhs initto 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 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 thePersonal Access Key pagein 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 simpleinitflow, you'll see a success message confirming that a configuration file,hubspot.config.yml, has been created in your current directory.

Runhs upload my-website-theme my-website-themeto upload your new theme to amy-website-themefolder in your HubSpot account.

To experience how content creators will use your templates and modules, create a website page using the theme you just uploaded.

• In your HubSpot account, navigate toMarketing > Content > Website pages
• In the upper right, click Create, then select Website page.
• In the dialog box, enter aname for your page, then clickCreate page.
• On the next page, select the my-website-theme theme if it's not already selected. Then, hover over theHomepage template and clickSelect template.
• You'll then be brought to the website page editor where you can explore all of the options that content creators will have when working with the template. Learn more about using the editor to build and customize pages on HubSpot's Knowledge Base.
• Click the Settings tab in the editor, then select General. Enter a Page title, then set a Content slug to finalize the page's URL. Then, close out the dialog box by clickingXor pressing the Escape key.
• In the upper right, clickPublish to take your page live.

Runhs watch my-website-theme my-website-theme. Whilewatchis running, every time you save a file, it’ll be automatically uploaded. Open your theme's/css/components/_footer.cssfile in your editor, make a change (such as updating the.footer__copyrightselector to havecolor: 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.

You're encouraged 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:

• CMS developer tutorials
• HubSpot CMS overview

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

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

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

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