AI Website Builder
How to Create, Customise & Deploy Your Website
Evans
Last Update 15 days ago
It is separate from the Basekit SiteBuilder and is accessed exclusively at hbuild.hostafrica.com
You can log in using your existing HostAfrica client area credentials; the same username and password you use on my.hostafrica.com/clientarea.php.
With this tool, you can describe your website in plain language and have the AI generate a fully responsive, professional website in minutes. No coding required!
Tip: The HostAfrica AI Builder (hbuild.hostafrica.com) and the main Client Area (my.hostafrica.com) share the same login credentials.If you have Two-Factor Authentication (2FA) enabled on your HostAfrica account, you will need your 2FA code to log in.
Go to https://hbuild.hostafrica.com/ in your browser.
Enter your HostAfrica email address and password.
These are the same credentials used for the main HostAfrica Client Area at my.hostafrica.com.
If you do not yet have a HostAfrica account, you can create one by visiting https://hostafrica.co.za and registering.
Once logged in, you will see a text input field prompting you to describe your website.
This is where you tell the AI what kind of website to build.
Example Prompt — Dog Lovers Website
Below is an example of a well-written prompt.
You can adapt it for your own business or idea:
The quality of your website depends heavily on how clearly you describe it. A well-crafted prompt helps the AI understand exactly what you need. Keep these tips in mind:
Mention what your website is for, who your audience is, and what you want visitors to do (e.g. "contact us", "browse our services", "book an appointment").
• List the pages you need:
Name each page explicitly — Home, About, Services, Gallery, Blog, Contact, etc.
• Describe your style preferences:
Mention colours, mood, or tone (e.g. "warm earthy tones", "modern and minimal", "bold and colourful").
• Include technical requirements:Words like "responsive", "SEO-optimised", "fast loading", "mobile-first", and "WCAG accessible" guide the AI toward best practices.
• Mention key features:
Examples include a contact form, image gallery, newsletter signup, social media links, smooth scrolling, or a search filter.
• Keep it under 490 characters for best results:A focused, concise prompt works better than a very long one. Cover the essentials clearly.
Prompt tip example: Instead of writing 'make me a website', try: 'Build a responsive website for a bakery in Cairo. Include Home with hero image, Menu page, About Us, and Contact form. Use warm browns and cream tones, mobile-first design, SEO meta tags, and social media icons.'Step 3 — Build Your Website
Once you have entered your prompt, click the Build It button and allow the AI a few minutes to generate your website. You will see a loading screen with the message "Generating your website — this process may take up to several minutes."
On the left, you will see a sidebar where you can continue making changes.
Note: Do not close or refresh the browser tab while your website is being generated. Wait
for the preview to fully load before making any edits.
Congratulations — your website has been built!
Take a moment to scroll through the live preview on the right to see the pages and sections the AI has created.
The right-hand panel is your Page Builder.
It has two main tabs:
1. Widgets Tab — Page StructureUnder the Widgets tab, you will see a Page Structure list showing all the sections of your website — for example: Hero Section, Features, Gallery, Testimonials, and Contact. Each section can be reordered by dragging, duplicated using the copy icon, or removed using the red delete icon.
Under the Styling tab, you can control the visual appearance of your entire website.
• Colors: Choose a colour palette from presets like "Warm Earth" or define your own custom colours.
• Fonts: Change the typography across the entire website.
• Spacing: Adjust the spacing and layout density globally.
You can make changes to your website at any time using the AI chat input at the bottom-left of the screen.
Simply type your edit request in plain language and the AI will apply the changes for you.
In the text box that says "Describe your edit wishes here and the AI will try to apply them", type your instruction and press the Send button.
Here are some examples of things you can ask the AI to do:
• Change website title to 'Pet Love Hub'
• Change the hero banner text to
'Welcome to Dog Lovers Hub: Your go-to resource for all things canine'• Change the background colour of the Features section to white
• Add a newsletter signup section below the gallery
• Change the contact email to info@mywebsite.com
Tip: Be clear and specific with your edit instructions. For example, instead of 'change the text', say 'change the hero headline to Welcome to My Bakery'. The more specific you are, the better the AI will understand you.
When you are happy with your website, click the purple Deploy button at the top-right of the screen.
Choosing Your Domain
You have two domain options:
A) Free Subdomain
Select 'Free Subdomain' to publish your site on a yoursite.hbuild.site address at no additional cost.
This is a great way to get started quickly.
Select 'Custom Domain' if you want your website to have a professional address like yourwebsite.co.za.
You can either search for a new domain or use one you already own.
1. Click Custom Domain, then click Search for a Domain.
2. Type your desired domain name (e.g. mynewwebsite.co.za) and click Search.
3. Available domains will appear in the search results.
Click on your preferred domain.
4. Select your registration period (e.g. 1 Year at KSh 1,100) and choose whether to include Domain Warranty & Privacy (recommended; protects your domain and IP).5. Click Select Domain to add it to your order.
Domain Warranty & Privacy: This add-on protects your domain from accidental loss and keeps your personal contact details private in the WHOIS registry.
It is recommended for all new domain registrations.
6. Click Custom Domain, then click I Have a Domain.
7. Enter your domain name in the field provided (e.g. yourwebsite.co.za).
Do not include 'www' or 'https://'.
8. Click Use My Domain.
The domain will be confirmed with the label 'Using this domain'.
DNS setup instructions will be provided.
On the right-hand side of the Configuration and Payment popup, choose your preferred billing cycle, for example:
• Monthly: Billed monthly (e.g. KSh 129/mo)
• Annual: Billed yearly at a discounted rate (e.g. KSh 1,290/yr — Save 17%)
10. Review your Order Summary to confirm the items and total amount.
11. Select your Payment Method (e.g. Mpesa).
12. Click Pay Now to proceed to the payment gateway.
13. Complete your payment.
Once payment is confirmed, the Deploy Now button will become active.
14. Click Deploy Now to publish your website.| Type | Name | Value | TTL |
| TXT | _hbuild | key=3884231a-3b85-5ab8-9af0-7e49ebd7ec31 (your key will differ) | 3600 |
| A | yourdomain.co.za | 169.255.58.11 | 3600 |
15. Log in to your domain registrar (e.g. GoDaddy, Namecheap, Google Domains).
16. Navigate to DNS Management, DNS Settings, or Zone File Settings, the exact name varies by provider.
17. Add a TXT Record with the name _hbuild and the value shown in your DNS Setup
18. Add an A Record pointing your domain name to the IP address 169.255.58.11.
19. Save your changes.
DNS propagation typically takes between 5 minutes and 60
minutes, but can take up to 48 hours in some cases.20. Return to the HostAfrica AI Builder and click Verify DNS Configuration to check that the records are correctly set up.
21. Once verified, click Deploy Now to publish your website live.
Note: DNS changes can take up to 48 hours to fully propagate worldwide, although most changes take effect within an hour.
If the verification fails initially, wait 15-30 minutes and try again.
Once your website has been deployed successfully, you will see a "Deployment Successful!" confirmation screen.
From here you can:
• Visit Website: Click this button to open your live website in a new browser tab.• Edit Website: Return to the builder at any time to make further changes.
• Verify DNS Configuration: Use this if you are connecting an external domain and want
to confirm your DNS records are correct.
• Payment Reference: Your payment reference number is displayed here for your records.
You will also receive an email confirmation with your details.
Your website is now live.
Remember that you can return to the builder at any time to update content, add pages, change styling, or make any other edits using the AI chat feature.
N/B
To start over with a completely new website, click the Restart button at the top of the builder screen.
Please note that this will permanently delete your entire current website and cannot be undone.
Use this option with caution.
| Action | How To |
| Change website title | Type 'change website title to [Your Title]' in the AI edit box |
| Add images | Type 'please provide images of [topic]' in the AI edit box |
| Change colours | Go to Styling > Colors and select a new palette or custom colours |
| Reorder sections | Go to Widgets tab and drag sections up or down |
| Delete a section | Go to Widgets tab and click the red delete icon next to the section |
| Restart from scratch | Click the Restart button at the top of the screen |
| Publish website | Click the purple Deploy button at the top-right |
| Add a domain | Click Deploy > Configuration and Payment > Custom Domain |
| Access builder login | Visit hbuild.hostafrica.com with your HostAfrica credentials |