How To Build a Business Website With HubSpot

HubSpot is one of the most popular and versatile software programs available to businesses looking to build their own websites. Its content management system (CMS) — CMS Hub — can help you develop an engaging digital presence that’ll attract and retain your customers’ attention.

Getting started can prove challenging, though. This guide will teach you how to build a website on HubSpot website in five simple steps

But before you get started, you’ll need a HubSpot account. You can get started with a HubSpot free trial.


Before You Begin

Before you start building your business website, you’ll need to purchase a domain name. For more information on how to connect your website domain, check out our Domain Name Generator to learn how you can sign up and get your chosen domain name.

It’s important to note that because HubSpot’s CMS Hub is a content management system and not a website builder, it can sometimes seem a bit confusing for beginners. While website builders like GoDaddy prioritize simplicity and ease of use, a CMS will typically require a little more time to master. 

HubSpot also offers a wide range of products beyond its CMS Hub, which can sometimes lead to confusion when getting started. 

The Truic Flame Logo

For more information on HubSpot, be sure to read these helpful articles:

Step 1: Setting Up Your Account

In this section, we’ll walk you through the steps of creating a HubSpot account. For the purposes of this guide, we’ll use the 14-day, free trial. That means we won’t need a credit card to sign up! If you’re interested in purchasing a CMS Hub plan from HubSpot, click here.

To create your HubSpot account:

  1. Head over to HubSpot to go to the company’s homepage.

    How to make a Hubspot website.

  2. Next, click on the “Start free or get a demo” button in the upper-right corner. Once you reach the next page, scroll down until you see the “CMS Hub” section and click on the “Start 14-day free trial” button.

    How to make a Hubspot website.

  3. Enter your first and last name plus your email address, and then click on the “Next” button.

    How to make a Hubspot website.

  4. You’ll then need to click on the orange button to go to your email inbox and verify your email address. If you don’t see an email from HubSpot, try looking for it in your spam folder or requesting a new email verification message.

    How to make a Hubspot website.

  5. Once you verify your email address, create a password as instructed. Make sure it’s at least eight characters long, uses uppercase and lowercase letters, and includes a symbol, number, or whitespace character, and then click on the “Next” button.

    How to make a Hubspot website.

  6. Next, enter your company name and a domain name, such as “www.company.com.” After you enter these details, click on the “Next” button.

    How to make a Hubspot website.

  7. You’ll then need to verify you’re not a robot. Check the box and proceed to the next page.

    How to make a Hubspot website.

  8. The last part of the account set-up process involves providing some details about your business. List the number of people who work for your company, the industry you work in, your position, and your experience with customer relationship management (CRM) software. For the purposes of this guide, we’ll select “I have never used a CRM before.” Now, click on the “Finish sign up” button and you’re all set!

    How to make a Hubspot website.

Once you finish creating your HubSpot account, continue on to Step 2 where you’ll begin to tailor your website’s style and structure according to your branding.

Step 2: Building Your Website’s Style and Structure

After you create your HubSpot account, you’ll arrive at the main dashboard. This is where you’ll build and manage your website as well as monitor its analytics.

The site-building process should take less than an hour, and we will walk you through the entire process. If you ever need help, simply click on the purple “Chat” or “Help” buttons in the lower-right corner of the screen.

To begin building your site:

  1. Click on the “Start building” button under the heading, “Take ownership of your website.”  

    How to make a Hubspot website.

  2. You’ll then reach the task menu. Now, click on the “Select style” button.

    How to make a Hubspot website.

  3. On the left side of the next page, you’ll see a variety of color schemes from which you may choose as well as the option to customize your own color scheme if you scroll below HubSpot’s suggestions. Select the style that best represents your company’s brand. 
  4. Scroll below the preview of your new website on the right side of this page to change its colors and fonts. Once you’re happy with your design, click on the “Next” button.

    How to make a Hubspot website.

  5. After you select your color scheme, you’ll proceed to a page that asks you to drag and drop an image of your logo to upload it to your website. Do that, and then click on the “Finish” button. (If you don’t have a logo yet, check out our Free Logo Generator tool to create one!)

    How to make a Hubspot website.

  6. With the style of your website set, it’s now time to start building your site’s overall structure. From the task menu, click on the “Build site” button.

    How to make a Hubspot website.

  7. The first thing you’ll need to do is decide which pages you want to include on your website from the options provided. Don’t worry, though; you can always go back and add more pages later. Once you make your selections, click on the “Next” button.  

    How to make a Hubspot website.

  8. Next, select your company’s industry from the options in the drop-down menu and choose a layout for your site’s homepage. When you’re finished, click on the “Next” button.

    How to make a Hubspot website.

  9. You’ll now get to choose the design for your website’s header and footer. Review the options provided, decide which placement you like best, and then click on the “Next” button.

    How to make a Hubspot website.

  10. You will do the same thing for your footer. Once you’re happy with both your header and footer, click on the “Finish” button. You’re now done creating the style and the foundational structure for your website’s content!

    How to make a Hubspot website.

When you finish structuring your website and choosing your style options, feel free to move on to the next step where we’ll begin to create pages and add other elements.

To learn more about what your website needs, refer to our How to Structure a Website and Best Website Fonts guides.

Step 3: Creating Pages and Adding Elements

In this step, you’ll learn the basics of how to create pages for your website with a simple drag-and-drop editor. You won’t actually create any pages for your site just yet so don’t worry if you’re not ready to get into specifics at this point!

To create a page and populate it with elements:

  1. Return to the task menu, select the “Build pages with the drag-and-drop editor” option, and then click on the “Start demo” button.

    How to make a Hubspot website.

  2. Once this pop-up window appears, click on the “Let’s go” button.

    How to make a Hubspot website.

  3. A mini tutorial will then appear on the left side of the screen that’ll walk you through the basics of using the CMS Hub’s drag-and-drop editor. Begin by clicking on the “Next” button.

    How to make a Hubspot website.

  4. The tutorial will guide you through the modules on the left side of the screen so you can build a web page. Click on the “Next” button again.

    How to make a Hubspot website.

  5. Under the “Common modules” section on the left, drag the highlighted “Image” button to the area of the main page that says, “Drop your image here.”

    How to make a Hubspot website.

  6. This’ll guide you to the next portion of the tutorial. In the next step, you’ll learn how to edit modules with the side panel.

    How to make a Hubspot website.

    Notice that if you hover over the image, you’ll have the option to replace it with another image.

    How to make a Hubspot website.

    Underneath the image, you’ll also have the option to change that image’s alt text.

    How to make a Hubspot website.

    Click on the “Next” button to move on to the following step.
  7. Now, you’re ready to learn how to replace images. Above the image on the left side of the screen, click on the “Replace” button.
    Note: If your image size is too large, mobile devices will find it difficult to load. For more information on how to create a mobile-friendly website, check out our How To Make a Website Mobile-Friendly article.

    How to make a Hubspot website.

    Next, you’ll choose the cutest puppy image to add to your example web page.  

    How to make a Hubspot website.

  8. Once you select an image, you’ll see a light blue text box appear at the top of the screen. Click on the “Add text” button in that box.

    How to make a Hubspot website.

    Under the “Common modules” tab, look for the highlighted “Rich Text” button. Just like you did with the “Image” button, you’ll need to drag the “Rich Text” button over to the main page and drop it in the area that says, “Drop a Rich Text module here.”

    How to make a Hubspot website.

    You’ll then need to highlight the existing headline, “Adorable puppy text,” in order to edit that text.

    How to make a Hubspot website.

    Once you highlight that existing headline, click on the “Next” button.

    How to make a Hubspot website.

  9. The tutorial will then guide you to the upper-right corner of the screen. Click on the “Text Color” icon just above the puppy image, as instructed.

    How to make a Hubspot website.

  10. Choose a color for your headline text by using the color picker tool.

    How to make a Hubspot website.

    That’s it! Click on the “Finish demo” button to move on to the next step.

    How to make a Hubspot website.

Now that you’ve learned the basics of creating pages and adding elements like images and text that align with your branding, you’ll be able to start building your website. In the next step, you’ll learn how to publish your content once it’s ready to go live on the internet.

Step 4: Publishing Your Website

Now that you’ve learned how to create your site’s style, structure, and pages, you’re ready to publish your website. In this step, we’ll walk you through the process of launching your website.

To publish your website:

  1. Under the task menu, select “Publish and manage website pages” and click on the “Show me how” button.  

    How to make a Hubspot website.

  2. A mini tutorial will then appear on your screen like it did in the previous step. It‘ll guide you through the process of publishing your website. The highlighted area shows you a list of all your website’s pages and whether they’re published or drafts. Click on the “Next” button.  

    How to make a Hubspot website.

  3. On the left side of the screen, your website’s pages will appear sorted according to their status (i.e., published, in draft, scheduled to be published, or archived). Only pages listed under the “Published” section are currently visible on your website. Click on the “Next” button.

    How to make a Hubspot website.

  4. In the upper-right corner of the screen, the tutorial will guide you to the “Create” button. Use this button to begin adding pages to your website.

    How to make a Hubspot website.

    While we won’t create any pages right now, this pop-up window will appear when you click on the “Create” button. This window is where you’ll choose the site on which the new page you’re creating will appear. For now, click on the “Cancel” button and then on the “Next” button in the tutorial pop-up window.  

    How to make a Hubspot website.

  5. Once the tutorial returns you to your website’s page list, hover over the first draft page in the list and click on the “Edit” button that’ll then appear.

    How to make a Hubspot website.

     This will bring you to the web page we plan to publish.  

    How to make a Hubspot website.

    If you’d like to start editing your page now, just follow the guidelines from the previous step to make your changes. Otherwise, click on the “Finish demo” button and then on the “Publish” button.
  6. When this pop-up window appears on your screen, click on the “Publish page now” button. Don’t worry if you haven’t edited the page yet; we’ll show you how to unpublish it before we move on to creating a blog.

    How to make a Hubspot website.

    That’s it! You just published this web page. But before we move on, we’ll show you how to unpublish your page if you aren’t ready for it to go live yet.
  7. On the “Task finished!” pop-up window, click on the “X” in the upper-right corner.  

    How to make a Hubspot website.

    This will return you to the dashboard of the page you’re editing. Click on the “More” button in the upper-right corner to open a drop-down menu and select the “Unpublish” option.

    How to make a Hubspot website.

    This action will move your page back into the “Draft” section of your website’s page list.

    How to make a Hubspot website.

    Once you’re ready to move on, click on the HubSpot logo in the upper-left corner of the screen next to the “Contacts” tab.

    How to make a Hubspot website.

Now that you’ve completed the CMS Hub tutorial, you can go back and build your business website to suit your specific needs. Then, after you launch your site, you can proceed to the next step, where you’ll beef up your online content with a blog. 

Step 5: Creating a Blog

Now that you know how to create, edit, and publish pages on your website using HubSpot’s CMS Hub, you’re ready to start creating a blog for your site. A blog can help beef up your search engine optimization (SEO) efforts and drive engagement with your business’s target audience.

To create a blog:

  1. Return to the “Tasks” menu, and then click on the “Create blog” button under the “Create your blog” section.

    How to make a Hubspot website.

  2. Next, give your blog a name. We’ll stick with the cute puppies theme for the purposes of this guide and name our blog, “Adorable Puppies.”

    How to make a Hubspot website.

    Then, select your blog’s language. You can either search for the language you want to use in the search bar or scroll down until you find it.

    How to make a Hubspot website.

    You’ll then need to create a URL for your blog by entering a forward slash “/” and then the name of your blog in the field under the “Blog subdirectory” header.  

    How to make a Hubspot website.

    Next, you’ll need to write a meta description for your blog. This description will appear on search engines so keep it brief and engaging. Try not to write too much because it’s just meant to give users a general idea of what your blog is all about.

    How to make a Hubspot website.

  3. Click on the “Next” button to move on and choose a theme.

    How to make a Hubspot website.

  4. For the purposes of this guide, we’ll select the theme and template that match the overall website design we created earlier by clicking on the image on the screen. You can choose to use a different theme and template by searching for options via the search bar in the upper-right corner of the screen.

    How to make a Hubspot website.

  5. Once you select a theme for your blog, choose and highlight your preferred template from the available options. You can search for different templates via the search bar in the upper-right corner of the screen. 
  6. When you find the template you want to use, click on the “Create blog” button.

    How to make a Hubspot website.

    You’re now ready to begin building out your blogging platform and adding individual posts using HubSpot! 

Final Thoughts

Congratulations! You’ve learned how to build a website with the HubSpot CMS Hub! You can now create an engaging website to expand and grow your business. 

If you think you’d rather try a website builder instead of a CMS, check out our Best Website Builder guide for an overview of simple, effective website builders that can help your business meet its goals.

The Truic Flame Logo

Get Started With HubSpot

HubSpot has the tools you need to build your website and grow your brand. Begin building with a two week free trial by clicking the button below.

TRY HUBSPOT

Additional Resources