XEN Digital Marketing and HubSpot Blog

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

Written by Roselen Fernandez | 13 January 2023 7:32:55 AM

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)
  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)

Security

  1. Navigate to the Security tab
  2. Tick 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.


    Here’s an example:

  3. Set your Brand colours


    Here’s an example:


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.

 

Download a theme from HubSpot Asset Marketplace

  1. Navigate to Asset Marketplace by clicking the Marketplace icon   on the upper right-hand of HubSpot
  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
  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)

 

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
  3. Right-click on the theme folder and create a child theme from it
  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
  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
    • This is where you can find them in the CLEAN theme folder

      They usually have the word ‘global’ in their name:

  4. Right-click on the global module and clone it 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
  2. Edit theme settings
  3. Navigate to Global Settings > Primary Colors and enter your primary colours based on the brand guide doc

    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)
  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:

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.

    (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
  3. Then click SEO & Crawlers > Override default settings
  4. Add this code to the Robots.txt field:
    User-agent: *
    Disallow: /
  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:
  6. Add this code to the Robots.txt field:
    User-agent: *
    Disallow: /

Start building pages

  1. Navigate to Marketing > Website > Website Pages
  2. On the upper-right corner, click Website page under the Create button
  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)
  5. Check if you’re using the correct theme (ie the theme you’ve just set up)
  6. If you’re seeing a different theme, click the dropdown and click Change theme
  7. Find the child theme that you’ve just set up and set it as 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
  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:
      • 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)
      • 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

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
  • Content slug - this is the URL after the homepage/domain URL
  • 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…
  • Enable featured image - this is the image that will be automatically pulled in on social posts
  • Publish your first page

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

    • 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
  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
  2. Select your brand domain from the dropdown
  3. Enter your subdomain, eg  www
  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
  5. Click next until you get to the hosting set up
  6. Update your DNS records by following the instructions provided by 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
    • 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
  4. Update page
  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:



    It should look like this after editing:
  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.
View full post