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.
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.
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.
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.
hs init to connect the tools to your HubSpot account. This command will walk you through the following steps:
- First, you’ll enter a name for the account. 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.
- You’ll need a personal CMS access key to enable authenticated access to your account via the local development tools. In the first step, 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.
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.
hs create website-theme my-website-theme to
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.
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.
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.
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/_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.
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.
Ask questions, learn from fellow developers, and submit ideas in the CMS developer forums.