> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getbuilo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# GetBuilo Website Builder: Launch Your First Business Site

> Build and publish a professional business website with GetBuilo—AI content generation, section editing, custom domain setup, and going live.

Your website is the first thing potential customers, investors, and partners see when they look you up. GetBuilo's Website Builder generates a complete, professional site from your brand and business data—then puts you in full control to customize every word and section before you go live. This tutorial walks you through the entire process, from generating your first draft to publishing on a custom domain.

<Steps>
  <Step title="Complete Brand Creation First">
    The Website Builder draws directly from your brand identity to set colors, typography, tone of voice, and naming across every section. Before you open the builder, make sure you've completed the **Brand Builder** module in your project. You should have a confirmed brand name, a primary color palette, and a saved brand voice description.

    If you haven't done this yet, navigate to **Brand Builder** in your project sidebar, click **Generate Brand Identity**, and follow the prompts to lock in your brand assets. Once your brand is saved, come back to this tutorial and continue.

    <Note>
      If you update your brand identity after building your website, use the **Sync Brand** button in the Website Builder to apply the latest colors, fonts, and tone to all sections at once.
    </Note>
  </Step>

  <Step title="Open the Website Builder from Your Project">
    From your project dashboard, click **Website Builder** in the left navigation panel. GetBuilo will automatically generate your full website on first open, pulling in your business description, brand identity, customer personas, and pricing data. The builder opens in a split view: the live preview on the right and the section editor on the left.

    You'll see the following sections pre-generated:

    * **Hero** — your headline, subheadline, and primary CTA
    * **Features** — your product or service's key benefits
    * **Pricing** — your pricing tiers with descriptions
    * **About** — your story and the problem you're solving
    * **Contact / CTA** — a final call to action and contact method

    Take a full read-through of the preview before making any edits. The AI typically nails the structure and overall tone on the first pass. Your job is to refine the details, not rewrite from scratch.
  </Step>

  <Step title="Review the Hero Section — Edit Headline and Subheadline">
    Click the **Hero** section in the left panel to open its editor. The hero is the most important section on your site—it's the first thing visitors read, and it determines whether they stay or leave.

    Your headline should answer one question immediately: *What does this do for me?* Focus on the outcome, not the feature. Compare these two examples:

    * ❌ "AI-Powered Invoice Management Software"
    * ✅ "Get Paid Faster—Invoicing That Works While You Sleep"

    Your subheadline should add one layer of specificity to support the headline. It can name the target customer, clarify the mechanism, or reinforce the key benefit with a concrete detail.

    Edit both fields directly in the panel. Click **Preview** to see how the updated copy looks in context. When you're satisfied, click **Save Section**.
  </Step>

  <Step title="Review the Features Section — Add, Remove, and Reorder">
    Click the **Features** section. GetBuilo generates feature cards based on your business description and Business Model Canvas. Review each card for accuracy—check the title, the description, and the icon assignment.

    To manage your features:

    * **Add a feature:** Click **+ Add Feature**, enter a title and description, and choose an icon from the library.
    * **Remove a feature:** Click the trash icon on any card you don't need.
    * **Reorder features:** Drag cards up or down in the panel to change their display order.

    Lead with your strongest differentiator. Put the feature that most directly addresses your customer's primary pain point first. Aim for three to six features total—more than that dilutes the message and overwhelms visitors.

    Click **Save Section** when done.
  </Step>

  <Step title="Review the Pricing Section — Verify Your Pricing">
    Click the **Pricing** section. This section pulls directly from the pricing data you saved in the **Pricing Recommendations** module. Verify that the tier names, prices, billing cadences, and feature lists are all accurate.

    Make any corrections in the inline editor. If you need to restructure your pricing entirely, go back to **Pricing Recommendations**, update your model, save it, and use the **Sync Pricing** button in the website builder to refresh this section automatically.

    Pay attention to the CTA button text on each pricing card—it should match the action you want visitors to take at that tier. "Start Free Trial," "Get Started," and "Contact Sales" each imply a different level of commitment, so choose accordingly.

    Click **Save Section**.
  </Step>

  <Step title="Review the About Section — Personalize Your Story">
    Click the **About** section. The AI will have written a placeholder story based on your idea description, but this section needs your personal voice more than any other. Visitors read the About section when they're deciding whether to trust you—generic corporate copy won't close that gap.

    Replace the AI-generated text with a brief, honest account of:

    * **The problem you personally encountered** that led you to build this
    * **Why you're the right person** to solve it (experience, expertise, or lived experience)
    * **What you believe** about how this problem should be solved

    Keep it to two or three short paragraphs. Authenticity beats polish here. If you have a photo or logo to add, use the **Media** panel to upload it.

    Click **Save Section**.
  </Step>

  <Step title="Add a Contact / CTA Section">
    Click the **Contact / CTA** section. This is your closing argument—the last thing visitors see before they decide whether to act. Make sure the CTA is specific, low-friction, and directly tied to the next step you want them to take.

    Strong closing CTAs include:

    * "Start your free 14-day trial—no credit card required."
    * "Book a 20-minute demo and see it live."
    * "Join 500 founders already using GetBuilo."

    In the contact settings, add at least one contact method—an email address, a Calendly link, or a simple contact form. Visitors who aren't ready to convert immediately should still have a clear way to reach you. Toggle the **Contact Form** on or off depending on whether you want to collect inbound inquiries directly through the site.

    Click **Save Section**.
  </Step>

  <Step title="Configure SEO Settings">
    Click the **SEO** tab in the website builder's top navigation. Fill in the following fields:

    * **Meta Title:** Your primary keyword phrase plus your brand name. Keep it under 60 characters. Example: *"Freelance Invoice Software – Builo Finance"*
    * **Meta Description:** A 150–160 character summary of what your site offers. This text appears in Google search results, so make it compelling and accurate.
    * **OG Image:** Upload a 1200×630 pixel image that represents your brand. This image appears when someone shares your URL on social media. A clean branded image with your logo and tagline works well.

    Good SEO setup takes five minutes and makes a measurable difference in how easily people find your site. Don't skip this step.

    Click **Save SEO Settings**.
  </Step>

  <Step title="Preview on Mobile and Desktop">
    Click the **Preview** button in the top-right corner of the builder. Use the device toggle to switch between desktop and mobile views. Check each section on both views for the following:

    * **Text doesn't overflow or get clipped** on small screens
    * **Images and media scale correctly** without distorting
    * **CTA buttons are large enough** to tap comfortably on mobile
    * **Navigation links work** and scroll to the correct sections
    * **Pricing cards stack cleanly** on narrow viewports

    If anything looks off, return to the relevant section editor and adjust. Most layout issues can be fixed with small copy edits—shorter headlines, for example, often solve mobile overflow problems without needing to change the design.
  </Step>

  <Step title="Connect Your Custom Domain">
    Navigate to **Settings → Domain** in your project. Enter the custom domain you own (e.g., `www.yourbusiness.com`) and click **Add Domain**. GetBuilo will display the DNS records you need to configure with your domain registrar.

    You'll need to add the following records in your registrar's DNS settings (GoDaddy, Namecheap, Cloudflare, Google Domains, etc.):

    | Record Type  | Host / Name | Value                |
    | ------------ | ----------- | -------------------- |
    | **A Record** | `@`         | `76.76.21.21`        |
    | **CNAME**    | `www`       | `cname.getbuilo.app` |

    Log in to your domain registrar and navigate to the DNS management section. Add both records exactly as shown. Delete any conflicting A records that were previously pointing to a different IP address before adding the new one.

    <Warning>
      DNS propagation can take **up to 48 hours** after you update your records, though it often completes within 1–4 hours. During this window, some visitors may see the old destination for your domain or a "site not found" error. This is normal and resolves on its own—do not delete and re-add your DNS records, as that resets the propagation timer.
    </Warning>

    <Tip>
      While you wait for DNS to propagate, your site is fully live and accessible at your free **`yourprojectname.getbuilo.app`** subdomain. Share this link with early users, post it on social media, and start collecting feedback immediately—you don't need to wait for your custom domain to go live before getting real visitors.
    </Tip>
  </Step>

  <Step title="Verify DNS Records">
    After adding your DNS records, return to **Settings → Domain** in GetBuilo. Click **Verify DNS**. The system will check whether your records have propagated correctly. You'll see one of three statuses:

    * ✅ **Verified** — your domain is connected and GetBuilo is provisioning your SSL certificate automatically.
    * ⏳ **Pending** — your records are set correctly but haven't fully propagated yet. Check back in a few hours.
    * ❌ **Error** — there's a misconfiguration. Click **View Details** to see which specific record is incorrect and re-check your registrar settings.

    GetBuilo provisions a free SSL certificate (HTTPS) automatically once your domain is verified. You don't need to configure anything else for a secure connection.
  </Step>

  <Step title="Click Publish">
    Once your content is final and your domain is either verified or pending, click **Publish** in the top-right corner of the Website Builder. GetBuilo will deploy your site instantly to both your free subdomain and your custom domain (as soon as DNS is verified).

    After publishing, open your live URL in an incognito browser window and do a final walkthrough:

    * Read every section as a first-time visitor would
    * Click every link and CTA button
    * Submit the contact form if you have one and confirm you receive the notification
    * Check load speed—your site should appear within 2 seconds on a standard connection

    Your business website is now live. Share it confidently.
  </Step>
</Steps>

## After You Publish

Going live is the beginning, not the end. Here's what to do immediately after publishing your site:

<CardGroup cols={2}>
  <Card title="Run Your First Campaign" icon="bullhorn" href="/tutorials/first-marketing-campaign">
    Drive traffic to your new site with a targeted first campaign.
  </Card>

  <Card title="Get Your First Customers" icon="users" href="/tutorials/customer-acquisition-plan">
    Build a plan to convert site visitors into paying customers.
  </Card>

  <Card title="SEO & Analytics Setup" icon="chart-line" href="/founder-journey/launch-checklist">
    Connect Google Analytics and Search Console to track your traffic.
  </Card>

  <Card title="Update Your Website" icon="pencil" href="/founder-journey/website-builder">
    Learn how to edit, republish, and iterate on your live site.
  </Card>
</CardGroup>
