Publishing Your AI-Generated Website

You've built a functional website with AI, but it's not quite ready for the world. Real-world websites need branding, integrated services, and a public home. By the end of this lesson you'll be able to apply branding, integrate external services, and publish your AI-generated website to GitHub Pages.

Core idea

After generating the initial structure of your website, the next steps involve refining its appearance and functionality. This includes applying your brandbook (a guide that defines your company's visual identity, like colors, fonts, and logos) to ensure consistency. You'll also integrate external services to add dynamic features, such as a form for collecting user information or an image generator. Finally, to make your website accessible to anyone, you'll publish it online using a service like GitHub Pages. This process transforms a basic AI-generated page into a polished, interactive, and publicly available asset.

Walkthrough

Let's refine your AI-generated landing page by applying a brandbook, integrating a form, and publishing it.

Task: Apply brandbook styles

First, you'll update your index.html file to reflect your brand's visual identity.

1. Open your landing/index.html file.
2. Instruct Claude Code to apply brandbook styles.

3. Review the updated index.html in your browser. Check if the colors, fonts, and header are applied correctly.

Task: Integrate a contact form

Next, you'll add a functional contact form using Formspree, a service that handles form submissions without needing a backend server.

1. Go to Formspree.io and create a new form. Copy the unique form endpoint URL provided by Formspree (it will look something like https://formspree.io/f/yourformid).
2. Instruct Claude Code to add the form.

3. Test the form. Open index.html in your browser, fill out the form, and submit it. Verify that the submission appears in your Formspree dashboard.

Task: Publish to GitHub Pages

Finally, you'll publish your refined website to GitHub Pages, making it live on the internet.

1. Commit and push your changes to GitHub.

2. Enable GitHub Pages for your repository.
   • Go to your repository on GitHub.
   • Click on "Settings" > "Pages".
   • Under "Build and deployment", select "Deploy from a branch".
   • Choose your main branch (e.g., main) and the /root folder, then click "Save".
   • GitHub Pages will now build and deploy your site. This may take a few minutes.
3. Access your live website. Once deployed, GitHub will provide a URL (e.g., https://your-username.github.io/your-repository-name/). Open this URL in your browser to see your live, AI-generated website.

Common mistakes

• Forgetting to commit and push: If you don't commit and push your changes to GitHub, GitHub Pages won't have the latest version of your website to deploy. Always ensure your local changes are synced with your remote repository.
• Incorrect GitHub Pages settings: Make sure you select the correct branch (usually main or master) and the correct folder (often /root or /docs) in your GitHub Pages settings. An incorrect selection will prevent your site from deploying or display the wrong content.
• Ignoring Formspree setup: Simply adding the form HTML isn't enough; you must create an account and a form on Formspree to get a functional endpoint. Without it, your form submissions won't go anywhere.

Key takeaways

• Brandbooks provide guidelines for visual consistency, which you can instruct AI to follow.
• External services like Formspree can add complex functionality (like form submissions) to your AI-generated site without writing backend code.
• GitHub Pages offers a free and easy way to publish static websites directly from your GitHub repository.
• The process of refining and publishing involves iterative steps: styling, integrating features, and deploying.
• Always commit and push your changes to GitHub before expecting them to appear on your live site.