Tech • AI • Robotics • Game
The Easiest Way to Build & Host a GPT-6 Astra Website (Full Tutorial)
5/10TL;DR
A complete fitness and wellness website was built and deployed in a single workflow using GPT-6 Astra, a React, Vite, TypeScript stack, and hosting.com shared hosting, with most of the work driven by five prompts.
KEY POINTS
Five-prompt build process
The project centered on a fictional brand, Elevate Studio, and aimed to show that a polished business site can be created without a traditional developer workflow. The site included a full-screen hero, services, about section, testimonials, gallery, contact form, footer, and SEO metadata. The claim was that the core site structure could be generated through five prompts, followed by one production build and one upload.
Tech stack and design setup
The site was scaffolded as a React, Vite, and TypeScript project with Tailwind CSS. Early instructions defined the visual identity, including a cream, warm charcoal, and gold palette, smooth-scroll navigation, and a hero message reading “Transform your body, transform your life.” The base path was set for deployment to a standard shared-hosting environment.
Content added in stages
The page expanded section by section rather than being generated all at once. A services area introduced personal training, nutrition coaching, and recovery and wellness, each with short descriptions and “learn more” links. An about section used a two-column layout to pair brand storytelling with an image area, keeping the design language consistent as the page grew.
Social proof and visual balance
Testimonials and a six-image gallery were added to strengthen credibility and reduce the amount of uninterrupted text. The testimonials highlighted client quotes, names, and results, while the gallery initially used placeholders to confirm layout, spacing, and proportions before final images were introduced. This staged approach prioritized structure before visual polish.
Contact form and SEO basics
The contact section included fields for full name, email, phone number, and message, along with a styled submit button. The form handled field state in React but did not connect to a back-end service, meaning submissions were not processed. The project also updated index.html with a page title, meta description, Open Graph tags, and a placeholder canonical URL to support search and social sharing.
Responsive design and image replacement
Placeholder blocks were later replaced with Unsplash image URLs for the hero, about section, and gallery. The site was then refined for smaller screens, with checks at 375 pixels wide. Key responsive changes included a hamburger menu, stacked service cards and about content, and a gallery reduced to two columns on mobile.
Shared hosting chosen for static deployment
The deployment target was hosting.com’s Shared Hosting Pro plan, described as sufficient for a compiled static front end. The plan’s listed features included NVMe SSD storage, unmetered bandwidth, free SSL certificates, and an account management panel. Because the finished project was a static build, no complex server-side runtime was needed.
Production build and upload
The development project was compiled with npm run build, producing a dist folder containing the production-ready files. That output included a compiled index.html, minified JavaScript and CSS bundles, and the assets needed for the live version, while excluding source files, TypeScript, and node_modules. An .htaccess file was also added to support SPA routing.
Live deployment details
Deployment consisted of uploading the contents of the dist folder into public_html via the hosting control panel’s file transfer tools. A key requirement was that index.html sit directly at the root of public_html, rather than nesting the dist folder itself. Final checks focused on page rendering, smooth-scroll navigation, mobile layout, and visual consistency between the development preview and the live domain.
CONCLUSION
The workflow shows how a modern static business website can move from a blank prompt to a live domain with relatively little manual setup. Its practical limit is that front-end structure and deployment are simplified, but features such as real form handling still require additional back-end work.
Ask a question