Talk with an Advisor
Talk with an Advisor

8 min read

How to Build a HubSpot Website [Complete, Step by Step Guide for Beginners]

How to Build a HubSpot Website [Complete, Step by Step Guide for Beginners]

How to Build a Website in HubSpot From Start to Finish

Looking to set up a HubSpot website? This blog post provides a comprehensive guide on how to get started, from signing up and setting up basic settings to creating your pages and going live with your website. Now, let's dive into the details and get your website up and running smoothly.

Table of contents

Sign up to HubSpot

  1. Sign up to HubSpot: https://www.hubspot.com/products/get-started
  2. Click Get started free (you can upgrade to a higher tier later if needed)
    HubSpot - Get started free
  3. Fill out form
  4. Verify your account

Set up the basic HubSpot settings

Preferences

We highly recommend you set this up to ensure the security of your HubSpot account.

  1. Navigate to Settings ⚙️ > Preferences > Security
  2. Next, navigate to Security and set up Two-factor authentication  - we recommend using a 2FA mobile app like Google Authenticator or Authy
  3. HubSpot will provide you with a QR code that you’ll need to scan on your 2FA mobile app
  4. Open your authenticator app on your mobile device. Click the “+” icon and scan the code to add add HubSpot as a new account

Account Defaults

General

  1. Navigate to Settings ⚙️ > Account Setup > Account Defaults > General
    Enter  your Account Name, Time zone, Fiscal (Financial) Year, and your Company Information (Company name, domain, Address/location)
    HubSpot Account Defaults Settings

Security

  1. Navigate to the Security tab
  2. Tick Require Two-Factor Authentication (2FA)
    Require Two-Factor Authentication (2FA)

Branding

  1. Navigate to the Branding tab > My Branding Kit
  2. Add your Logo and Favicon
    Remember to put in your logo name, alt text, logo URL, and favicon name after uploading your files.
    Add your Logo and Favicon

    Here’s an example:
    HubSpot Logo and Favicon
    HubSpot Favicon Settings
  3. Set your Brand colours
    Brand colours HubSpot

    Here’s an example:
    HubSpot Brand colours


Need help building a HubSpot website? XEN Create can help.

We build functional, beautiful and business goals-focussed websites using CLEAN theme. If you want to learn more, visit our HubSpot Web Design page.

Learn more about our HubSpot Website service


 

Download a theme from HubSpot Asset Marketplace

  1. Navigate to Asset Marketplace by clicking the Marketplace icon   on the upper right-hand of HubSpot
    HubSpot Asset Marketplace
  2. Choose from the list of themes to use
    • HubSpot has a range of free and paid themes available on their Marketplace. If you're on the hunt for free website themes, we've got some suggestions

      Free themes

      • Growth
        • You don’t need to download this from Marketplace because this is the default theme that HubSpot provides
        • We recommend using this if you want a simple theme that requires less customisation
      • Spark
        • If you want a free theme but with more customisation options and more modules, we recommend Spark theme

      Paid themes

      We highly recommend using one of the CLEAN themes by Helpful Hero if you’re looking for a paid theme that's easy to use but offers a  wide range of styling options:

      • CLEAN Pro
        • Costs US $997 (as of writing) - a wide range of modules and highly customisable modules and settings
      • CLEAN Lite
        • Costs US $197 (as of writing) - the lite version of CLEAN pro is ideal for websites that don’t require a lot of modules

       

  3. Once you’ve chosen a theme, install it
    Spark Theme
  4. Set it as your active theme but don’t edit the theme settings yet (ie don’t choose the second option, we'll do this later)
    Spark theme in HubSpot

 

Set up a child theme

  1. Navigate to Marketing > Design Tools
  2. On the left sidebar, find the name of the theme you downloaded under the marketplace folder
    Marketplace folder in Design Tool
  3. Right-click on the theme folder and create a child theme from it
    HubSpot create a child theme
  4. Enter the name and create the child theme


Set up a Global module (optional)

If you plan on building multiple websites on the same HubSpot portal, we recommend you do the following steps. This means you can have different global modules (header, footer) for each of your websites. Otherwise, you can skip this part.

  1. Navigate to Marketing > Design Tools
    Design Tools HubSpot
  2. On the left sidebar, find the name of the theme you downloaded under the marketplace folder
  3. Find the global modules from the folder - the location of global modules can vary on each theme but they’re usually under the modules folder
    • This is where you can find them in the Spark theme folder
      Spark theme folder global module
    • This is where you can find them in the CLEAN theme folder
      Global modules CLEAN theme folder
      They usually have the word ‘global’ in their name:
      Global modules CLEAN theme folder
      Global modules CLEAN theme folder
  4. Right-click on the global module and clone it to child theme
    clone modules to child theme
    Do this for all the global modules in that folder

Document your brand’s style guide

Prepare a doc summarising your brand’s style guide, if you don’t have one yet. This will make it easier for you to set up the theme styles later.

  1. Download or make a copy of this brand guide doc template (link)
  2. Fill out as much information as you can but don’t worry if you’re unsure of the items in the doc
    • at a minimum, you should know the font family and colour you would like to use on your website

Set up the theme settings

  1. Navigate to Marketplace Downloads by clicking the Marketplace icon   on the upper right-hand of HubSpot
    Marketplace Downloads
  2. Edit theme settings
    Edit theme settings HubSpot
  3. Navigate to Global SettingsPrimary Colors and enter your primary colours based on the brand guide doc
    Primary Colors
    You’ll see a preview on the right of how these colours will look on a page
  4. Next, enter your secondary colours (based on the brand guide doc)
    secondary colors HubSpot theme
  5. Next, update the rest of the options on theme settings by opening each of these items and editing the styling based on your brand guide doc:
    HubSpot Theme Settings

Note: the theme settings options will vary depending on the theme you installed. However, the overall goal is for you to update your theme settings so that these match your brand guide.

You can always go back to these settings if you want to change any styling later.

Upload Custom Fonts (Optional)

Inside the theme settings, if you select Font under Global Settings or edit your Typography settings, you’ll notice different font options. HubSpot offers system fonts and also allows you to select a Google font or upload your custom font.

  1. To add a custom font for your website, click “Upload a custom font.”
  2. A pop-up will appear on the right side of your screen for the next steps. Add your font name and upload your font files. 

Note: Make sure that your font files are in TTF, OTF, or WOFF format. (If needed, convert your fonts using tools like Cloudconvert).

3. Next edit your font, select your uploaded font’s style. You can choose options such as thin, light, medium, bold, etc

4. Once you click Done, your fonts are ready to use

5. You’ll notice that your custom font is now an available option in your theme settings.

 

Block your domain from Search Engines

Follow the steps below if you don’t want your website to be crawled/indexed by Search Engines yet. You will remove this later once your website is ready to go live.

You can skip this step if:

  1. you have live pages using this domain that you don’t want to be blocked from Search Engines;
  2. you’re working on a staging area of your website in HubSpot - staging pages are already blocked from Search Engines.

    This is where you can access the staging area in HubSpot’s Website tool but if you have a free HubSpot account or you don’t have a subscription to HubSpot CMS, you won’t see this option.
    HubSpot Content Staging
    (For simplicity, we won’t be using Content staging in this blog post.)

If you’re happy to block your whole domain from Search Engines, follow the process below.

  1. Navigate to Settings > Website > Pages
  2. Choose a domain from the dropdown if you have already connected a custom domain
    Website Pages Settings HubSpot
  3. Then click SEO & Crawlers > Override default settings
    HubSpot SEO & Crawlers
  4. Add this code to the Robots.txt field:
    User-agent: *
    Disallow: /
    HubSpot Robots.txt
  5. If you haven’t connected a custom domain yet, don’t worry,  you can do this later. We have a separate process for this in the latter part of this blog post.

    For now, just choose the default option:
    Domain default option
  6. Add this code to the Robots.txt field:
    User-agent: *
    Disallow: /

Robots.txt

Start building pages

  1. Navigate to Marketing > Website > Website Pages
  2. On the upper-right corner, click Website page under the Create button
    Create Website page HubSpot
  3. Choose a domain from the dropdown if you have already connected a custom domain
    • If you haven’t connected a custom domain yet, you can do this later
    • For now, just choose the domain provided by HubSpot which ends with hubspotpagebuilder.com
  4. Name your page (this is only visible internally so make it short but descriptive)
    Name your HubSpot page
  5. Check if you’re using the correct theme (ie the theme you’ve just set up)
    Check if you’re using the theme you’ve just set up
  6. If you’re seeing a different theme, click the dropdown and click Change theme
    Change theme HubSpot
  7. Find the child theme that you’ve just set up and set it as an active theme
     set an active theme
  8. Next, choose a template that would best suit the page you’re working on but don’t worry if there are sections or modules that you want to remove or add, you can still customise this further later
    Choose a Template HubSpot
  9. Start building your HubSpot page by using HubSpot’s drag-and-drop editor
    1. Using the HubSpot editor is pretty straightforward so we won’t go into detail on how to use it
    2. However, you can watch these videos from HubSpot academy to learn more:
    3. Below are some best practices you should follow

      Headings
      (Source: CSUN)
      • Use headings to provide structure to your page or post. eg follow this hierarchy:
        Use headings to provide structure to your page or post
      • Do not skip heading levels. Proper header levels ascend from H1-H6
      • In most cases, you don't need to use h1 anymore because websites usually set the title of the page or post as h1
      • Always provide a descriptive page title
      • Include Keywords

      Images and Files
      • Images’ file size should be no more than 300KB 
      • No spaces in the file name, should use a dash to separate words
      • Should be lowercase
      • Image name should be descriptive
      • Should be uploaded to a relevant folder (eg in the images folder under the assets folder)
        Upload images to folder
      • Images should have alt tags because Search Engines use them to figure out what the image is
        • Alt tags should include keyword/s or describe what the image is about
        • Alt tags shouldn't contain special characters unless necessary
          6.	Images should have alt tags because Search Engines use them to figure out what the image is

10. Once you’re done adding the content to your page, go to the Settings tab and set up:

  • Page title - title tags are important because they let readers know what information will be present when a user clicks on a page. It appears on Search Engines Search Results. Best practices:
    • Should be between 50-60 characters in length  (use up the maximum number of characters if possible)
    • Should include the main keyword/s
    • Use unique titles - don't use generic ones like  “Home” or “Profile"
    • Include target location if applicable
      Page Title Tag HubSpot
  • Content slug - this is the URL after the homepage/domain URL
    HubSpot Content slug
  • Meta description - this is the snippet of text that appears below the title tag in a search engine result. Best practices:
    • 155–160 characters
    • a summary of the page
    • include a relevant call to action, e.g.: Find out how we help…
      Meta Description Best Practices
  • Enable featured image - this is the image that will be automatically pulled in on social posts
    HubSpot page featured image
  • Publish your first page
    Publish page in HubSpot

Go live process

Brand domain

Once you have finished creating all your pages, the next step is to set up your custom domain.

Skip this process if your domain is already connected to HubSpot.

  1. Navigate to Settings ⚙️ > Website > Domains & URLs
  2. Add your brand domain under the Advanced options section
    Advanced options
    • According to HubSpot, a brand domain is the part of a domain between the subdomain and the top-level domain. So if my domain is www.xen.com.au, my brand domain is xen
      HubSpot brand domain
  3. Add brand domain

Connect a domain and set up DNS

Skip this process if your domain is already connected to HubSpot.

  1. Connect a domain
    Connect a domain in HubSpot
  2. Select your brand domain from the dropdown
    Select your brand domain HubSpot
  3. Enter your subdomain, eg  www
    subdomain HubSpot
  4. Update the top-level domain if needed, eg com.au
    Or you can leave it as is if you want to use com only
    HubSpot Top Level Domain
  5. Click next until you get to the hosting set up
  6. Update your DNS records by following the instructions provided by HubSpot.
    Update DNS Record HubSpot

    This step can be implemented by your IT team or you can contact your domain name provider if you’re not sure how to update your DNS records.
  7. Once you or your team are done updating the DNS records, click the Verify button
    Verify Domain HubSpot
    • Note: it could take up to 80 minutes for the DNS record to be updated so check back later if the domain’s status in HubSpot is still unverified
  8. Once your domain has been verified, proceed to the next steps below

Updating the domain on each page

  1. Edit one of the pages you created
  2. Navigate to Settings
  3. Scroll down to the Domain section and choose the domain you’ve just connected to HubSpot
    HubSpot Domain
  4. Update page
    Update page HubSpot
  5. Do this for all the pages you created
  6. Finally, unblock the website from Search Engines by navigating to Settings > Website > Pages > SEO & Crawlers and remove the forward slash (/) from the second line:

    Unblock website from Google in HubSpot CMS

    It should look like this after editing:
    Unblock website from Google in HubSpot CMS
  7. Your website is now live! 🎉

If you've made it this far, congratulations! Here's a dancing puppy for you:

 

 

 

Take the extra step - set up Google accounts

Set up these Google accounts if you haven't yet or don't have one yet. This is very important for tracking your website's analytics.

Google Tag Manager

Google Analytics

Google Search Console

 

Need help building a HubSpot website? XEN can help.

We build functional, beautiful and business goals-focussed websites using CLEAN theme. Book a discovery call today to discuss your needs or visit our HubSpot Web Design page.

Book a call to discuss your needs

Learn more about our HubSpot Website service

Episode 307: HubSpot Content Hub

Episode 307: HubSpot Content Hub

Welcome to HubShots Episode 307: HubSpot Content Hub (formerly CMS Hub) 🌱 Shot 1: Understanding Content Hub HubSpot Launches Content Hub HubSpot...

Read More
Episode 260: Simple Steps, HubSpot KB changes, HubSpot Email Health Reports, and HubSpot Rotate Owner Workflow Action tips

Episode 260: Simple Steps, HubSpot KB changes, HubSpot Email Health Reports, and HubSpot Rotate Owner Workflow Action tips

Welcome to HubShots Episode 260: Simple Steps, HubSpot KB changes, HubSpot Email Health Reports, and HubSpot Rotate Owner Workflow Action tips This...

Read More
Episode 256: HubSpot CMS Hub Starter - Everything You Need To Know

Episode 256: HubSpot CMS Hub Starter - Everything You Need To Know

Welcome to HubShots Episode 256: HubSpot CMS Hub Starter - Everything You Need To Know This edition we dive into:

Read More