A Beginner’s Guide to HubSpot CMS - Make a Website for Your Business With No Code: Save Time & Create a Free Website or Blog Using the HubSpot CMS Website Builder

A BEGINNER’S  
GUIDE TO  
HUBSPOT CMS
 
 
  
 
 
by: Jake Lett
FIRST EDITION

TABLE OF CONTENTS
© 2022 Bootstrap Creative
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and Bootstrap Creative was aware of a
trademark claim, the designations appear as requested by the owner of the trademark. All other product
names and services identified throughout this book are used in editorial fashion only and for the benefit of
such companies with no intention of infringement of the trademark. No such use, or the use of any trade
name, is intended to convey endorsement or other affiliation with this book. HubSpot® CMS Hub™.
Cover photo by Thomas Renaud on Unsplash
Written by: Jacob D. Lett  
Bootstrap Creative 
Metro Detroit, Michigan USA 48038 
bootstrapcreative.com 
Table of Contents 2
..........................................................................................................
Introduction 3
..................................................................................................................
How is HubSpot CMS Different From WordPress? 4
...........................................................
The Building Blocks 10
.....................................................................................................
Frequently Asked Questions 20
........................................................................................
Are You A Web Developer? 22
........................................................................................
About the Author 25
........................................................................................................

INTRODUCTION
Learning new software like HubSpot CMS can often feel overwhelming. I
wrote this guide to help you quickly understand the basics and provide tips
and resources to point you in the right direction for further information.
After working solely with WordPress, I got a job that used a myriad of CMS (content
management systems) platforms, one of them being HubSpot. Since I was in the marketing
department, I learned how marketers used HubSpot to build email campaigns, landing
pages, and event micro-sites. The power was in the speed and ease of use, and there wasn’t
time to work with IT or an outside developer to build something custom.
Being new to HubSpot development, it was hard to understand how to build themes and
templates. However, I noticed marketers found the templates I created very intuitive and
rarely asked for help. Compared to building web pages in WordPress, I often had questions
on how to use plugins or turn off unneeded functionality.
“I believe HubSpot® CMS Hub™ is a great platform for most businesses to build a
website or blog. It simplifies the complex and is intuitive to use for non-technical users.”  
- Jake Lett
Jake Lett 
jacoblett@bootstrapcreative.com

HOW IS HUBSPOT CMS DIFFERENT FROM
WORDPRESS?
One of the most critical decisions for a business is where to host its website, and a CMS or
content management system is a crucial component. Some companies with an internal IT
team prefer to self-host their CMS because they require higher-level security or business
integrations. However, a growing trend is towards using a SaaS (software as a service) CMS
because you can leverage a shared hosting platform with hosting benefits like security, a
content delivery network for images, fast servers, customer support, etc.
WordPress has long been the CMS leader for business websites, but now there are more
options to consider, like Wix, Webflow, Squarespace, Spotify, Bigcommerce, and the HubSpot
CMS. This article will introduce you to the HubSpot CMS, and its features compare to
WordPress.
What is HubSpot CMS Hub?
HubSpot is primarily a free CRM customer relationship management software to help
companies manage their customers throughout their customer journey. CRM is the bedrock
of the core of the business. As time passed, HubSpot added additional Hubs that could stand
alone as separate products but can be bolted on for added functionality. This gives a
company one relationship, one CRM, and a centralized hub for marketing, sales, operations,
and customer service.
The CMS Hub is one of the newest hubs and provides businesses an opportunity to build
their website, landing pages, and blogs using their page-building platform. One of the great
features is using your CRM data to personalize website content using smart content logic on
your websites.
HubSpot CMS vs. WordPress Feature Comparison and Review
For this review, I am going to look at some of the main features when considering a CMS for
your business. Each component is given a grade of 1 through 5. 5 being the best and 1 being
the worst score possible. I provide a comparison table with a total score at the end of this
section.
What makes me credible to write this review? I have used WordPress for more than ten years
for my sites and as a developer. I have also used HubSpot CMS for about seven years and

have seen significant improvements to the platform. My opinion is skewed towards the
benefits of using a CMS for a business vs. a personal blog.
Page Builder Experience
By default, WordPress recently added blocks which makes adding content a lot easier but it
isn’t an actual page-building experience similar to what you might find in WebFlow or
SquareSpace. You have to install third-party plugins like Beaver Builder, Elementor, Divi
page builder, or SiteOrigin builder.
HubSpot has a page builder built into its CMS. So you benefit from solid documentation,
customer service, and product feature updates coming from the same place.
Content Translation
WordPress has plugins you can use for translation, but from my experience are visually
clunky and look like afterthoughts, and are not seamless with the CMS. HubSpot CMS has
localized translation built into the product, which makes it extremely easy to use.
Ease of Use
Imagine asking a room of people to design their ideal car. You would get a wide variety of
designs, some being cars and other trucks. This inconsistency would make making piles of
similar vehicles very difficult and time-consuming.
This visual sorting example is one of the critical components of website usability.
Consistency. The repeated patterns make it easier to use because you can assume one
behavior will be the same in a different application section. In HubSpot CMS, this is the case
because it is designed and developed by one company master at website design and
usability.
Since WordPress requires plugins designed and developed by different people with different
skill sets, you will have different usability patterns for various plugins. This can cause
confusion for content editors and makes things feel clunky.
Security & Speed
If you use WordPress, you can decide if you want to self-host it or use a hosted option.
Security and speed will be comparable to HubSpot CMS if you use a hosted option. Self-

hosted WordPress has an edge in security if you have a very skilled server admin. Since you
have control of the server, you can set up things exactly as you need them and block
countries and IP addresses you do not want access to.
Control of the Web Server
WordPress wins this category because you can self-host on your server, which will give you
total control. HubSpot CMS requires a CNAME DNS record in your name to point traffic to
their servers. Also, HubSpot CMS uses HubL language, which is limited in functionality
compared to the open-source PHP WordPress uses.
SEO
WordPress has a lot of SEO plugins you can add to help with search engine optimization.
HubSpot CMS has an advantage here because it is built-in. Also, they provide SEO
recommendations and a tool to monitor the results of a popular SEO technique called pillar
and hub content model.
Customer Support
If you use a WordPress-hosted solution like Kinsta or WPEngine, you will benefit from
customer support. Still, you may run into roadblocks if you ask for support with a plugin
compatibility issue. Since many functionalities found in standard plugins are built into the
HubSpot CMS, customer support knows how to help you with everyday issues.
Extensions & Plugins
WordPress will probably always win this category because it is open-source software and has
long and established community-building plugins. You can build pretty much any website
with WordPress.
HubSpot CMS has a lot of great native app integrations. Also, if your extension is javascript
based, you can create a lot of the functionality you need using a custom module. A custom
module is a component you can add to a page that has data fields, HTML, CSS, and
javascript. If you have ever used Advanced Custom Fields in WordPress, it is similar to this
but more portable.
Ecommerce Support

WordPress has a popular plugin for eCommerce called Woocommerce. There are also a lot of
services like Shopify and Bigcommerce that are exclusively for eCommerce. So if you are
looking to be primarily an eCommerce site, I would use one of those solutions.
You could use HubSpot CMS for eCommerce, but it would require more work to stitch
together your need like payments, sales reporting, product feed creation, email automation,
shipping, etc.
Forms & Marketing Automation
HubSpot has a feature-packed marketing automation tool. If you plan on having email
workflows and lead generation, HubSpot is a great option.
WordPress has plugins, but they are not seamless, and the form builders are hard to use.
Files & media management
HubSpot CMS file manager makes hosting images, videos, PDFs, and documents accessible.
Some WordPress hosts limit the file types and sizes you can host.
One feature I like with HubSpot CMS is the ability to upload and replace a file and
automatically redirect all links to the new file.
Data migrations
Moving sites and data to HubSpot is pretty straightforward, and if you have a large area,
they also offer a site migration service. Moving sites out of HubSpot CMS to WordPress can
be done, but it is a pain and more of a manual process.
Also, since WordPress is so prevalent, most hosts and developers know how to work with
these files and site migrations.
Theme Development
If you are used to building WordPress themes, moving to HubSpot CMS will feel very
contrived. Developers have way more control of their development workflow and
management because WordPress uses PHP and doesn’t care too much what you add to it as
long as you have the core functions in place.
HubSpot CMS, however, requires developers to follow their rules and often runs into
limitations. The limitations I have faced have been rare, and I remind myself my frustrations

are less critical than the frustrations of the end-user. Themes are products for a marketer to
use to build pages, and they don’t care how they are constructed as long as they do what
they need them to do.
I create and sell HubSpot themes in their marketplace and the majority of customers do not
ask me support questions on how to build and use the CMS. This speaks volumes about how
they have perfected the experience for their customers.
HubSpot CMS Pros and Cons
HubSpot CMS Pros
1. Simplifies hosting and maintaining a website (SSL, CDN, security, user permissions,
backups, redirects, translations, split testing, analytics, image assets, CRM) – less
reliance on a developer and IT
2. Scales for large global teams creating hundreds of marketing assets like landing pages,
emails, CTA’s, etc.
3. One login – convenience for marketing and sales to be on the same page
4. Site analytics and reporting tied to your CRM helps your marketing and sales team
know what’s working.
5. Theme development is a lot easier because you don’t have to worry about installing
WordPress and managing the settings
6. The ability of a marketing or sales department to work autonomously from their IT
department
HubSpot CMS Cons
1. Less control. You can’t adjust the server settings or write custom server-side code
2. Site and content migrations outside of HubSpot or to a different HubSpot account are
difficult or not possible
3. Ecommerce support is lacking…. which might be a pro because it keeps the CMS simple.
If you are doing B2B eCommerce I would suggest using Bigcommerce
4. Theme development has a learning curve. It does take some time and understanding to
start using the HubSpot CMS development workflow

HubSpot CMS Decision Tree Checklist
• Is your site primarily public-facing content, and does nothing need to be private or
require high levels of secure access?
• Do you have a global team of marketing and sales?
• Do you need to translate content?
• Do you need the ability to create hundreds of landing pages and email campaigns?
• Do you have a developer to maintain your WordPress site hosting and security
regularly?
• Would you like to split-test web pages to optimize lead generation?
• Do you see the benefit of having one login for your marketing and sales efforts?
• Would you like to use personalized pages with CRM data to increase conversions?
• Do you see the value of having access to a support team to ask questions when things
are not working?
• The WordPress editing experience is clunky and confusing using third-party page
builder plugins?
If you answer yes to many of the questions above, I would consider HubSpot CMS.

THE BUILDING BLOCKS
In this chapter I will define the main building blocks of the CMS. These are the
different elements you will use while creating your website.
Page Templates vs. HubSpot Themes
Page templates contain the basic HTML code structure and modules to create a webpage.
You can create a single page template but what if you want to have multiple templates share
styles and elements like a header and footer?
A theme is a collection of related page templates, global content like a header and footer, and
a shared set of style settings. This will make sure a page you create today will be stylistically
consistent with a page you create a month from now.
This relationship is like a child’s birthday party theme. The invitations, decorations, and
posters reuse similar graphics, colors, and text across various applications.
One unique characters of a theme is that it contains editable theme settings. If you make a
change to one of these settings, on publish they will apply to all pages created with that
template.
Example of Editing Theme Styles

The Different Page Content Types
HubSpot CMS has several page content types which include: website pages, landing pages,
blog posts, and system pages. From a code standpoint, they are the same. They have the 3
main elements of a webpage: A page title, a URL, featured image, and page body content. But
HubSpot separates these page content types for better reporting and analytics. Next, I will go
into more detail about each page type.
Website Pages
These pages make up the core of your website and are often linked together with a global
navigation menu in the header and footer of the page.
Below are some main characteristics:
• Often is more informational.
• Provides full site navigation to link pages together
• Rarely hidden from search engines
• Common use cases: home page, about page, product page, and contact us page.
• Common names: webpage, site page, or page
Landing Pages
A landing page is more focused on a specific conversion goal and is often linked to from paid
advertising and email campaigns. Most likely you will have a minimal header and footer
navigation because you want the visitor to perform an action like filling out a form on the
page. The main visual difference is a landing page will look like a dead-end, and a website
page will look like a destination with other places to navigate to.
An important thing to know is by default, HubSpot does not include landing pages in your
XML sitemap for search engine crawling.
Below are some main characteristics:
• Has a clear call to action like filling out a form
• Since conversion is the main goal of the page, it often has a minimal header and footer to
prevent the reader from exiting the page
• Hidden from search engines unless linked to from your main website

• Common use cases: registration for a webinar, downloading an ebook, or describing a
product or service
• Common names: squeeze page, landing page, standalone page, or conversion page
Blog Listing Page
There are two main templates needed to create a blog on HubSpot. A listing template and a
post template. The listing template is used for your blog homepage and any archive pages
used for author posts, tag posts, and search results. An important feature of a blog is the
creation of a RSS feed that stands for “Really Simple Syndication”. This RSS feed can be used
by external websites to display recent posts from your blog. So other use cases for a blog
other than news articles might be events, portfolio projects, case studies, etc.
Blog Posts
Blog posts are the singular views of a blog posts. The editing experience is similar to website
and landing pages except it does not support the page builder sections and modules.
However, a coded posts template can include fixed modules you can use to customize the
content and layout of the page.
System Pages
These are like the back office and operation side of your website. These pages include server
error pages, password prompt page, subscription page, subscriptions update page, and
search results page. These templates are included in most marketplace and default themes
and shouldn’t require any editing because they pull in the default theme styles and logos.

However, if you would like to further customize these you would need a developer to edit
the code.
Modules and Theme Fields
A module is a component that can be reused across your entire website. These components
contain data input fields and code to display this information. If you are familiar with the
WordPress plugin ACF (Advanced Custom Fields), you will find it similar to modules. Some
of the default modules include: rich text, simple menu, video, logo, divider, button, Call-to-
Action, Image, Image Gallery, etc.
Tutorial on how to create and edit HubSpot modules: https://bootstrapcreative.com/how-
to-create-and-edit-hubspot-cms-modules/
The Page Builder - Sections, Rows, Columns, and Styles
When you are creating pages you will see a screen like the image below. You can edit the
content in two main areas: in the left side bar contents tab (A) or in the page preview area to
the right. When moving your mouse over the content you will see editing options appear.
Below is a summary of the page builder elements.
A. Left sidebar content editor: Add Tab - shows all of the modules available to add to your
page layout. These can be dragged and dropped into sections; Contents Tab - outline

view of the modules on your page; Theme Tab - link to open the theme editor panel to
adjust global styling options for all pages using your theme templates;
B. Section settings panel: When you hover your mouse over a section an actions panel will
appear giving you the option to edit styles, clone, or delete the section.
C. Column settings panel: When you hover your mouse over a column an actions panel
will appear giving you the option to edit styles, clone, or delete the column.
D. Add section button: When you hover your mouse towards the top or bottom of a section
you will see a teal circle with a plus icon appear. This button is letting you know you can
add a new section. Once you click the button a right side panel appears giving you the
option of adding a reusable section or a layout grid.
E. Row: Rows can only be used inside of a column and are most commonly used when
stacking things vertically inside of a column.

Diagram showing how things can be nested. Rows can only be inside of columns. You can remember
this relationship by remembering SCM-RCM. Sections and rows are horizontal and columns and
modules are vertical.
Global Content
Normally when you create a page or blog post you are creating a singular piece of content
that is tied to a unique URL (like https://yourwebsite.com/yourpage). In contrast, global
content is saved in your account data storage and is available to all pages referencing it in
your account and any edits made to the content will automatically apply to those pages.
Some common use cases for this are headers, footers, sidebars, testimonials, and location
maps.
Navigation Menus
Creating navigation menus is just like creating an outline for a term paper. Links and groups
of links can be nested and have the following options:
• Item without link - Choose this option if you want a heading above a group or your page
isn’t published yet.
• Page link with URL parameter - Choose this option if you are linking to a dynamic page
that has a query parameter. This might be used to link to a blog tag archive page or a page
listing content from a HubDB.
• URL link - Choose this option if you need to link to an external site.

• Open link in new tab - Check this option if you want your link to open in a new tab. It is
best to rarely if never use this because it breaks the browser back button. But sometimes
you might prefer using this for PDF files or external sites or applications.
Below is a screenshot showing you how to find the navigation builder. Go to account settings
(gear) > in left scroll to navigation > click the “Create Menu” button

Forms
HubSpot has a drag & drop form builder which makes it easy to create a form. You can
choose different display options for your forms like embed, popup, and overly to grab
attention of website visitors to generate leads.

File Manager
Go to Marketing > Files & Templates > Files to find your File Manager. Similar to the Media
Manager in WordPress, the HubSpot file manager is the place to add images and documents
that can be linked to from your website pages or email campaigns. A nice feature of the file
manager is that it can automatically resizes images for you when they are added to a page.
Below are three unique settings you can control.
• Replace - Let's say you have a PDF of pricing linked to from multiple pages on your site.
You increased your pricing and need to update the file and links. Instead of having to
update the links on each individual page, you can use the replace button to upload a new
file even if it has a different file name. Once you save it, it will update all of the pages for
you.
• Clone & Edit - If you don’t have Adobe Photoshop or a designer to help you crop an image,
you can use the clone and edit feature to crop images for social media, or make small edits
to an image.
• File usage - This tab is helpful in finding all of the pages that use and reference your file.
This can come in handy when trying to rebrand a product or service and need to find all
pages with old branding.

Domains & Redirects
Go to Settings > Website > Domains & URLs. Here you can add domains, url redirects, set
language settings, etc.
One important thing to keep in mind is landing pages are not added to your sitemap.xml
used for Google search indexing. If you want to encourage a landing page to be indexed, be
sure to come to this area and add it to the sitemap manually, or link to it from social media or
a primary website page.

FREQUENTLY ASKED QUESTIONS
How is HubSpot CMS different than WordPress?
HubSpot CMS is part of a larger SaaS product HubSpot is primarily a CRM. The CMS is a lot
more expensive, but the value it provides a business is increased because company data is
unified and shared across business departments.
Is HubSpot the same as WordPress?
No, it’s different. If I had to generalize, WordPress is website software, and HubSpot is
business software. HubSpot has a collection of Hubs you can use to manage your business
processes.
Is HubSpot a good CMS?
I like how easy it is to build pages and content with HubSpot. The development experience
has improved by introducing themes and a CLI. But the fact that many sales and marketers
use the platform speaks to its ease of use.
What are landing pages used for, and why are they important?
Landing pages are most commonly used to generate leads through form submissions. The
landing page may offer an ebook, webinar, white paper, or another digital download in
exchange for the visitor's email address. The company can then follow up with related
information or direct outreach to see if they can help them further. Landing pages are
important because they are direct and encourage a call to action.
HubSpot landing page vs. website page? What's the difference?
They are both pages, but a landing page focuses more on a specific conversion goal. The
main visual difference is that a landing page will look like a dead-end, and a website page
will look like a destination with other places to navigate. You can learn more about the
differences in this article.
What are some HubSpot landing page best practices?
The #1 rule of a landing page is to have one goal that can be measured. This could be a
webinar registration, a form submission, or a click to another page. Most landing pages make

an offer; the visitor can either take the offer or leave. So you want to make your offer as clear
as possible. landing page best practices from HubSpot.
Where can I find some HubSpot landing page examples for design inspiration?
Are you starting a project to redesign your website? Need some creative inspiration of what
can be done in a landing page design? Here is a collection HubSpot landing page examples.
Do you have a question about HubSpot CMS?
Email me jacoblett@bootstrapcreative.com

ARE YOU A WEB DEVELOPER?
I started my career as a graphic designer and moved into WordPress web
development. About seven years ago, I was introduced to HubSpot
development and found it confusing initially, but I have grown to like it. It is
different, but I am sure you will also like it if you try it. Below are some key
things to know if you are new to HubSpot CMS development.
HubL
Are you familiar with Handlebars, Mustache, or Shopify liquid templating languages? If so,
HubL is very similar and is based on Jinjava, a templating engine based on Jinja. HubL uses
a fair amount of markup that is unique to HubSpot and does not support all features of Jinja.
This article will take you through the basics of HubL's features and syntax.
{% %} - statement delimiters
{{ }} - expression delimiters
{# #} - comment delimiters
CLI (local development) & Design Manager
HubSpot has a feature-rich code editor in the browser called the Design Manager. You can
also work locally and watch or manually upload files to your account. I find a few actions
easier to use in the browser because it provides visual feedback on errors.
Below are the things I typically do in the browser first before editing them via the CLI:
• Create custom modules fields and basic functionality
• Creating child themes
• Creating navigation menus
• Experimenting with global theme styles
HubSpot Theme Boilerplate

HubSpot has a theme starter boilerplate that provides a minimal start for your projects.
HubSpot does not natively support SCSS or pre-processors, so if you want to do that, you
would need to compile it before uploading the account.
Default Themes - Growth Theme
In addition to the boilerplate, HubSpot also has a few default themes. These are good to learn
from or use as a starting point for custom themes. The Growth theme is the default HubSpot
theme, and the one I would assume has the most cycles of improvement. So this might also
make an excellent boilerplate to use, but it would require more work up-front to remove the
pieces you don’t need. I reference all of the default themes and their modules to re-factor and
learn from their code.
I created a page that compares all of the default themes and their modules https://
bootstrapcreative.com/resources/hubspot-theme-chooser/
Developer Info
When logged into HubSpot and you visit one of your pages, you will see a Sprocket icon in
the top right of the screen. When you click that, you will see various options, but “Developer
Info” presents the JSON data object for the page. This can come in handy when referencing
data using HubL.
The JSON Viewer chrome extension helps reading the data in your browser.

Copy Sections
Creating sections can sometimes be difficult using the CLI. You can also create sections in the
page editor and then copy the necessary code to paste into your templates. All you need to
do is add developerMode=true to your url and then hover over your section with your
mouse. The actions panel will now include the option to copy the code.
I created a tutorial on how to this.
Troubleshooting Data Objects With |pprint & |tojson
When working with objects with multiple key value pairs it is hard to know how to reference
the data you need. The two HubL filters you can use are |pprint and |tojson. This will write
the data contained so you know what the key name is. For long outputs of code I sometimes
put it into a textarea element so it is easy to copy and paste, like <textarea>{{ myObject|
tojson }}</textarea>.
Do you have a question about  
HubSpot CMS Development?
Email me jacoblett@bootstrapcreative.com

ABOUT THE AUTHOR
 
Hello.
From a very early age, I often wondered how things worked. Or what the
original idea or motivation was behind a business or product innovation. At
restaurants, I would always first read the “history” section on the back of
menus. This curiosity has driven me throughout my career, starting as a print
design-focused graphic designer.
I then became interested in web development and began designing and building websites. I
quickly learned business owners and marketers don’t want a website but instead want
outcomes like more traffic, leads, and sales. A website is just a means to an end goal. So today
I strive to help businesses design, build, and optimize their websites to get results.
I started out building WordPress sites as a freelancer and saw how powerful a content
management system can be for a non-technical user. Then about 7 years ago, I worked at a
company that used HubSpot. At first, it was very confusing because it was a whole new
workflow and a new coding language HubL.
But over time, I saw HubSpot CMS continually being improved and how marketers loved
using it. I was able to build templates that were smart and could adapt to the needs and
challenges of a marketing team without having to leverage third-party plugins or custom
PHP scripts.
Who I Help
• Marketers and Business Owners who use HubSpot for their website, blog, or landing
pages. I create HubSpot themes to help them save time and money. I also offer advice and
guidance on how to plan and execute a website redesign.

• Graphic designers who want to learn HTML/CSS basics and HubSpot CMS so they can
create websites without hiring a developer.
Thank you for reading,
Jacob Lett 
I Help Marketers and Designers Create Their Websites Without Having to Wait for IT. I Do This by
Equipping Them with HubSpot Website Templates, Training, and Encouragement. 
Bootstrap Creative 
Metro Detroit, Michigan 
https://bootstrapcreative.com/contact
• Connect with me on LinkedIn
• Subscribe to YouTube Channel
• Subscribe to my blog - choose a free guide
Checkout My Free HubSpot Themes & Modules
Browse FREE HubSpot CMS Themes & Modules
https://bootstrapcreative.com/product-tag/free/

###
To learn more about HubSpot CMS visit bootstrapcreative.com
Find an error? Want to help me make this book better?  
Email me at jacoblett@bootstrapcreative.com

A Beginner’s Guide to HubSpot CMS - Make a Website for Your Business With No Code: Save Time & Create a Free Website or Blog Using the HubSpot CMS Website Builder

Related slideshows

More Related Content

A Beginner’s Guide to HubSpot CMS - Make a Website for Your Business With No Code: Save Time & Create a Free Website or Blog Using the HubSpot CMS Website Builder