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.
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.
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.
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.
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/cli to install the HubSpot CLI (Command Line Interface), 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 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.
- 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.
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.
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/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.
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.