Skip to main content
Last modified: August 22, 2025
The HubSpot CMS Boilerplate serves as a starting point for getting a website up and running on the HubSpot CMS, while illustrating some HubSpot CMS best practices. The boilerplate is built and actively maintained by HubSpot, but is also an open-source GitHub project where all are welcome to suggest changes and fork for their own use. View a live demo of the boilerplate.
If you’re new to the HubSpot CMS, check out the quickstart guide to get started.

​
Get started

You can get started with the CMS boilerplate either via the HubSpot CLI or the design manager. To get started locally developing a theme using the CLI:
  • Using the terminal, clone the HubSpot CMS boilerplate GitHub repository to your local environment.
  • Navigate into the downloaded theme directory.
  • Run hs upload . . to upload the project to the root of the developer file system in your design manager.
To get started with the CMS boilerplate using the design manager:
  • In your HubSpot account, navigate to Content > Design Manager.
  • In the left sidebar of the design manager, click File, then select New theme.
Screenshot of the design manager option for creating a new theme
  • In the dialog box:
    • Click the Theme Starting Point dropdown menu, then select Boilerplate.
    Screenshot of the boilerplate theme select option in the design manager
    • Assign a label to your theme.
    • Under File location, click Change to set a specific location for your theme if desired.
    • Click Create.
The theme will be created as a folder in the design manager, named using the label you assigned during creation. You can then begin to make updates to the theme’s assets (such as templates and modules) and create pages using the theme.

​
Structure

The boilerplate uses relative path references for all of the assets, which makes it both adaptable and portable across HubSpot accounts.
Folder Structure of the HubSpot CMS Boilerplate
The HubSpot CMS Boilerplate’s underlying template structure revolves around a common base layout, located in the templates > layouts folder, that is then {% extends %} tag and referencing the {% block body %} block for its main content. A sample of how the extend tag and blocks are being used can be seen in any of the html files inside of the templates directory. Learn more about blocks and extends. This is a common method of developing on CMS systems where you have a base (sometimes called a main/parent) template that contains all the main common structural pieces of content on your site. These are often items that are inside of the <head> element on your site such as common meta properties (ex: Title and Meta Description), Favicon links, CSS links, and third-party scripts 
<!doctype html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>
 <head>
   <meta charset="utf-8">
   <title>{{ page_meta.html_title }}</title>
   {% if site_settings.favicon_src %}<link rel="shortcut icon" href="https://developers.hubspot.com/docs{{ site_settings.favicon_src }}" />{% endif %}
   <meta name="description" content="{{ page_meta.meta_description }}">
   {{ require_css(get_asset_url("../../css/layout.css")) }}
   {{ require_css(get_asset_url("../../css/main.css")) }}
   {{ require_css("https://fonts.googleapis.com/css?family=Merriweather:400,700|Lato:400,700&display=swap") }}
   {{ require_js(get_asset_url("../../js/main.js")) }}
   {{ standard_header_includes }}
 </head>
 <body>
   <div class="body-wrapper {{ builtin_body_classes }}">
     {% block header %}
       {% global_partial path="../partials/header.html" %}
     {% endblock header %}

     {% block body %}
       <!-- Nothing to see here -->
     {% endblock body %}

     {% global_partial path="../partials/footer.html" %}
   </div>
   {{ standard_footer_includes }}
 </body>
</html>
Inside of this base layout, there are also calls to the global header and footer partials. This allows you to keep the code for these partials in their own separate files for modularity and, because they are global partials, can then be easily edited using our Global Content Editor by content creators. For more depth into the assets included in the boilerplate check out the boilerplate’s wiki on GitHub.

​
jQuery

The HubSpot Theme boilerplate doesn’t require jQuery in order to function. For older HubSpot accounts jQuery is loaded by default. Newer HubSpot accounts have jQuery disabled by default. Historically HubSpot scripts required jQuery to function properly, so the domain-wide setting was there to help ensure compatibility. HubSpot scripts no longer use jQuery. Because JQuery is not required, and there are better ways for developers to include libraries that also work with source control. It is advised to disable the jQuery settings for new websites. Be aware if disabling jQuery on a domain that has an existing website - any landing pages or existing web pages you may have could break if they depend on jQuery. To use jQuery on your new website, it’s recommended that you use the latest version of jQuery. There are two easy ways to do that:
  • Upload the latest version of jQuery to your developer file system and use require_js to load it where and when you need it.
  • Use a CDN you trust, and use require_js to load jQuery where and when you need it.