How to Build a HubSpot Website in 6 Steps (+ Design Examples)

The HubSpot website builder allows you to create a website that integrates easily with its industry-leading tools for marketing, sales, and customer support. Learning how to build a HubSpot website is easy: create an account, choose a template, edit your website’s pages, and customize the theme for your brand. Lastly, connect your domain and publish your site. Follow the steps below and get examples to inspire your design.

Learn how to build a HubSpot website by following the step-by-step instructions below:

1. Create a HubSpot Account (It’s Free)

Head to HubSpot to create a free account, or sign in to an already existing account. (Source: HubSpot)

To follow along with the steps for how to build a website with HubSpot, first create a free account. Go to HubSpot.com and locate the orange button to create an account—it should be at the top right corner of your screen. Click on it, and then click on “Get started free.”

Select your business’ industry by searching for it on the list.

---

Select your role in your company.

---

Fill out your company’s name.

---

Select how many people work for your company.

---

Finally, input your company website’s URL.

---

Complete the process by activating your account via the link sent to your email.

---

Once you’ve filled in your basic contact information, you’ll be directed to a simple onboarding. First, search for your business’ industry on their list. Then, answer a question about what you do in your company. Finally, provide information about your company, like its name, size, and website URL.

The request to input your website URL is a little strange—since you’re using HubSpot to create a website, presumably, you don’t have one yet. But don’t worry, as HubSpot doesn’t check the validity of your URL as part of the account setup.

Type in a generic placeholder domain URL (e.g., “www.mybusinessname.com”), or if you purchased a domain name to use with HubSpot or already have one, simply type that in here. Then, finish creating your account with HubSpot by creating a password and choosing where you want your data to be hosted (U.S. or EU).

Next, depending on your familiarity with HubSpot and other website builders, you can choose whether or not to get a quick demo around the platform. There are also step-by-step guides as you start using the HubSpot web content management system (CMS), so it’s not a big deal if you skip the demo. Plus, there are checklists to tick off to make sure you’ve done everything right.

Head to the HubSpot CMS hub to create your website.

After you’ve created your account, you’ll see your HubSpot overview. There you’ll find a helpful task list titled “Do these things to get started” to guide you through different aspects of building a website on HubSpot.

To get started, click on the “More” tab at the very right of the menu and then on “CMS Hub Free” to enter the User Guide. This will guide you through the website creation process step-by-step.

2. Choose & Install a Theme

Browse through the free HubSpot themes.

The next step to building a website on HubSpot is selecting a theme. Themes are premade website templates that make site-building faster. Instead of building everything from scratch, you can choose a theme that appeals to you and then update the images, content, and settings for fonts and colors to customize it for your brand.

On the User Guide, click on “Browse themes,” or click the Marketplace icon at the top right of your screen, and then on “Asset Marketplace.” You can browse through around a hundred free themes, purchase a theme, or create your own. Going the do-it-yourself route isn’t recommended for beginners, but if you want a custom theme for your website, hire a designer through Fiverr instead for as little as $50.

Choose whether to start building your website or edit your settings.

Once you find the theme you like, click it to install it. Installation takes a few seconds, and when it’s complete, a pop-up will appear, asking you to choose between building your site or editing your theme’s settings (e.g., colors and fonts). To continue following the steps below for how to build a HubSpot website, click on “start building my site.”

3. Edit Your Site’s Pages, Settings & Structure

Add a page and choose a page template.

As part of your theme, you’ll be able to choose from various templates, or page layouts, as you build different pages of your website. In the example above, we created a homepage and chose the corresponding homepage theme. To add a new page to your website, on the “Create a Page” pop-up and input a page name. Then, choose a page template, click “Create Page,” and proceed to the editing interface.

Use the drag-and-drop functionality to edit your page.

To add more sections to a page, within the editing interface, click on the blue “+” sign-in between sections on a page and then on “Layouts” to add a section. Drag the section (called modules) from the left side menu to where you want it on your page. To delete a section (or module), hover over it and click on the trash icon in the upper right corner.

To edit the content in each module, simply click on the module in question and type. On the left side menu, you can edit the module more extensively (e.g., by changing spacing, padding, etc.).

Update Page & SEO Settings

Access your page’s settings on the “Settings” tab

Once you’re done editing a page’s content, access its settings by clicking on the “Settings” tab at the top of the screen. Here, you can edit elements that affect your site’s search engine optimization (SEO), including the page title, language, slug, meta description, and featured image. You can even embed code at the page level in the Advanced options.

Next, click on the “Optimize” tab beside “Settings,” where you’ll see a checklist of anything you still need to optimize the page. HubSpot makes SEO tasks easy with built-in guidance and tools. To give your page the best chance of ranking on Google, try to get a green check beside every item before hitting the orange “Publish” button at the top right corner.

Add a Page to Your Navigational Menu

How to update your HubSpot website’s navigation menu

“Settings” is also where you can add your page to your site’s navigational menu. Just click on “Add page to a menu,” and name and create a new menu. Label your menu item, link it to a page, and—when you have more menu items—drag to order them.

Add More Pages

4. Customize Your Theme, Header & Footer

How to personalize your HubSpot CMS theme

To keep your theme on-brand, customize your HubSpot website design to reflect your brand’s colors and the fonts by editing the theme. To do so, enter your page editor (by clicking on any page), and then click on “Theme” at the left, then click on “Edit Theme Settings.” The settings you enter here control how your pages are displayed throughout your website.

Change the look of your HubSpot website design globally through theme settings.

For example, setting global colors instantly applies your choices to all of the headlines and text content, colored section backgrounds, and elements like buttons. However, you’ll also be able to further customize these options with other settings, such as choosing a font for headings and specifying the colors you want to be applied to your site’s navigational menus.

Customize Your Site’s Header

Editing the header of a HubSpot website

Part of how to build a HubSpot website includes setting up your site’s header, which is the section that appears at the top of every page of your site. From the page editor, click on the “Contents” tab on the left. Hit “Page Header” to open it in the global content editor.

In the global content editor, upload your logo, add your navigation menu, create a search bar, and add call-to-action buttons (e.g., an invitation to apply, shop, or subscribe to email updates). Remember to click to apply changes after every edit. Once you’ve customized your header, click on “Publish to X asset/s” at the top right corner.

Customize Your Footer

Edit the footer of your HubSpot website

Your website’s footer is the section at the bottom of every page of your HubSpot website. To customize it, click on the “Contents” tab on the menu to the left. Then, click on “Page Header” and open the global content editor. Edit each section by typing in your content, then clicking “Apply Changes.”

Some things often included in small business website footers are:

• A navigation menu to your site’s main pages
• Social media links
• Contact information
• Email subscription form
• Office hours and location
• Copyright information
• A link to the FAQs
• Links to common questions such as shipping and refund information

Once you’ve finished setting up your site’s footer, click on the orange “Publish” button at the top right. This is necessary to see the changes reflected on your HubSpot website.

5. Connect Your Domain

You can build a site for free on the HubSpot CMS and publish it without a custom domain on a HubSpot.com subdomain—but this isn’t recommended for businesses. It detracts from the credibility of your brand and isn’t great for search engine optimization (SEO), as HubSpot essentially benefits from any rankings your site receives instead of your own domain.

Custom domains can be purchased for as little as $10 to $12 per year with the best domain registrars, so there’s no reason to skip this step. If you don’t already have a domain, buy one to use with your HubSpot website.

To connect your domain, enter its name, specify where it will be used (e.g., web pages, blog, and landing pages), and the primary language of your website, and then click “Next.” Click “Next” again to verify, and then follow the instructions for locating and updating your DNS records with your chosen domain registrar.

HubSpot makes this easy with cut-and-paste data and detailed instructions. In addition, your chosen registrar likely has detailed instructions on updating these settings in your account. If you registered your domain through a provider like IONOS, you could even get help with this step from live customer support technicians 24/7.

If learning how to build a HubSpot website is your first foray into websites and domains, you can also get help with this. Hire an experienced web tech on Fiverr for as little as $5 to complete this or any other technical aspects of site building you don’t feel comfortable doing yourself.

6. Publish Your Website

Click on the “Publish” button at the top right to make your site live on the internet.

---

Click to confirm that you want to publish your HubSpot website.

---

The most exciting part of learning how to build a HubSpot website might be the simple click of a button that makes your website live on the internet. To publish your site, click on “Publish” in the top right corner, then click “Publish page now” in the pop-up to confirm your selection.

Upgrade Your Plan (Optional)

Because of the integrations (and the fact that you can connect a custom domain in the free plan), HubSpot is one of the best free website builders we’ve seen. However, free websites will have HubSpot branding, which may not be professional enough for business use. It detracts from your branding and your brand’s credibility.

To remove HubSpot branding, you’ll need to upgrade to at least the Starter plan. At $25 monthly, this is still affordable, even for small businesses, and has everything most small and mid-size businesses need to grow a strong online brand presence. Keep in mind that regardless of plan, landing pages will still show some HubSpot branding. You can get around this by using regular web pages as landing pages if it’s an issue.

Here are the small business-friendly paid plans offered by HubSpot (with the free plan to compare).

HubSpot Website Builder Pricing & Plan Features

*With annual billing; month-to-month contracts available for higher prices

In addition to providing enterprise-grade tools, features, and integrations, HubSpot website users enjoy some of the best website security and SEO features available. Learn more about what makes the HubSpot CMS so remarkable by reading about our list of the best website builders for SEO.

Try HubSpot CMS Today

Next Steps: Add HubSpot Integrations

Now that you have learned how to make a website on HubSpot, add more functionalities by integrating some of the platform’s industry-leading tools for lead generation, nurturing, marketing, and customer care. HubSpot’s tools are robust, and since you can integrate them into your site easily, you can build a highly functional website, even on the free plan.

Add HubSpot integrations to your website, like a chat box with automated chat flow.

Adding integrations is easy. Just exit the website editor and scroll to the drop-downs at the very top of the page (e.g., “Conversations,” “Sales,” etc.). Select the apps you want to integrate to begin the onboarding process. Note that some apps may not be unavailable, depending on your plan.

One of the big advantages of using the HubSpot CMS to build your website is the easy integration with HubSpot’s other freemium apps. Learn more about this by reading our expert HubSpot CMS review.

HubSpot Website Design Examples + Tips

HubSpot makes it easy to build a professional-looking website so that you can establish and grow a strong brand presence online. The HubSpot website design examples below can offer you additional inspiration on how to get the most out of the platform while building your site.

Here are examples of great websites built with HubSpot, and what they do right:

Coca-Cola Northeast

Example of a HubSpot website with engaging images
(Source: Coca Cola Northeast)

When building a website on HubSpot, the images you use are as crucial as their written content. Coca-Cola Northeast’s pages are filled with high-quality, engaging images that show what they do and how they connect with the community. Coca-Cola also embeds an Instagram feed and social media widgets—furthering their message of being there for the community.

Nationwide’s Companion Pet Magazine

Example of a HubSpot web design showcasing blog content
(Source: companionpetmagazine.com)

Are you a publisher or a small business using SEO content marketing to bring traffic to your website? Incorporate your blog onto your homepage, just like Nationwide’s Pet Companion Magazine. Galleries with blog articles entice your readers to browse and consume more content, while also adding visual content to an otherwise ordinary page.

Cognism

Example of a HubSpot website built with animations and parallax scrolling
(Source: Cognism)

Cognism pairs graphics with various animations and parallax scrolling to add depth and visual interest to the website. HubSpot lets you add parallax scrolling to your site with any plan, even the free one, though you’ll have to code it into your website. For beginners wanting this type of custom, visual-interest element, the best way to go about it is to hire a developer on a platform like Fiverr.

Stellar

Example of a website built on HubSpot with a strong call to action (CTA) (Source: Stellar)

Good website design is about user experience, not just aesthetics. Make your site easy to navigate and put the most common actions at the beginning of the site visitor experience. Stellar does this by adding call-to-action (CTA) buttons in the hero image and a static “Quick Apply” button at the right side of the page. Something as simple as putting your CTA at the forefront of your website can increase your conversion rate significantly.

Interprefy

Example of a HubSpot website designed with a video chat bot (Source: Interprefy)

Though you can add a standard chatbot to your HubSpot website design, why not go a step further by adding a video chatbot? One of the best things about HubSpot is the wealth of integrations it offers, both native and third-party. In the example above, Interprefy uses the app VideoAsk to create video conversations; this makes chatting with a bot feel more personal and friendly.

Frequently Asked Questions (FAQs)

Is HubSpot a good website builder?

The HubSpot website builder (aka HubSpot CMS) is extremely powerful yet easy to use, and learning how to build a website in HubSpot takes only a few steps. It has a ton of website themes, integrations for nearly any type of functionality a website needs, and it’s one of the best website builders for SEO. See why else it made our list of the best website builders for small businesses.

Does HubSpot offer hosting?

HubSpot’s content management system (CMS) is an all-in-one website solution, so hosting is included. However, HubSpot doesn’t offer standalone web hosting. If you need a solution for website hosting services and don’t plan to use the HubSpot CMS, use Bluehost. Your hosting plan will come with a free domain, SSL, email accounts, and a no-code WordPress website builder for $2.95 a month for the first year.

Is HubSpot a CRM?

HubSpot has multiple tools for sales, marketing, and customer support. HubSpot CRM, or customer relationship management software, is a world-class, industry-leading platform for generating leads and managing customer relationships. Alternatively, the HubSpot CMS, or content management system, we reviewed above is a website builder and hosting solution.

Bottom Line

HubSpot’s website builder offers easy integration of the platform’s enterprise-grade solutions, but it’s still easy enough to use for complete beginners. It’s one of the best small business website builders overall. Its integrations with sales, marketing, and customer support tools make it an excellent option for sales and service-oriented businesses.

Visit HubSpot

You May Also Like…

• Create the perfect website for your brand by following our website basics checklist.
• If you’re not sure you should use HubSpot, choose another of our top picks for the best website builders for small businesses.
• See how much a small business website costs depending on whether you build it yourself or outsource.