The RIGHT Way to Deploy A Claude AI Website + FREE Database (Nobody Explains This)

Creating a Website with Claude AI 00:00

"You can create some amazing looking websites with Claude AI."

• Claude AI can generate visually impressive websites with just a simple prompt, and the presenter has successfully created hundreds of such sites.

• The challenge arises after generating the website; the user is often left wondering how to deploy it on a live domain and manage associated features like a business email.

Launching Your AI Website on a Live Domain 00:27

"In this video, I'm going to show you how to take an AI website by Claude AI and launch it on a real live domain."

• The tutorial demonstrates the process of taking a website created by Claude AI and making it accessible on a live domain.

• A significant advantage of this method is that any updates made to the AI website will reflect instantly on the live site without manual intervention, eliminating the need to handle files or use terminal commands.

Incorporating a Free Database 00:48

"After we set up your AI websites, I'll then walk you through how to incorporate a free database onto your AI websites."

• The video also covers how to add a free database to the AI websites, which allows for the storage of user data such as emails, phone numbers, and other customer information.

• Having a database is essential for many modern websites, enhancing their functionality and interactivity.

Initial Setup: Downloading Essential Applications 01:12

"In order to make this work, you must download the Claude application on their website."

• The first step involves navigating to Claude's website and downloading the appropriate application for Windows.

• Additionally, it is important to install Node.js and Git to enable local project deployment and facilitate JavaScript execution on a local device.

Installing Node.js and Git 01:32

"Node.js allows you to run JavaScript through a browser so you can see what you're working with."

• Node.js is crucial for displaying JavaScript projects on a local device, and users are guided through a quick installation process.

• Git is also installed to enable local project management without relying solely on a web browser, allowing developers to work offline.

Setting Up the Project with Claude AI 03:46

"I want to create a modern real estate website using Next.js."

• Users are instructed to create a prompt that asks Claude to generate code for a specific project, in this case, a real estate website using Next.js, which is a preferred framework for clean code.

• The tutorial walks through the creation of a project folder to store the necessary files related to the website project.

Previewing and Developing the Website 05:36

"Now we can view the website as a localhost."

• After setting up the project, users can preview the website locally to ensure everything is functioning correctly.

• The tutorial explains how to run the development server and view changes in real-time, enhancing the development experience.

Pushing the Project to GitHub 06:32

"Next, I'm asking Claude, I want to initiate a Git repository for this project."

• The tutorial demonstrates how to initiate a Git repository for the project using Claude and prepare the files for upload to GitHub.

• It emphasizes the importance of creating a GitHub account and repository in order to store and manage the codebase efficiently online.

Configuring and Pushing to GitHub 07:43

"Make sure this is the same email address that you use with GitHub."

• Start by configuring the repository with your name and the email associated with your GitHub account.

• After filling in the details, proceed by clicking on "next" to move forward with pushing the project to GitHub.

• Copy the provided command for pushing the existing repository from the command line, paste it into Claude, and run the prompt.

• Ensure you allow necessary permissions and log into GitHub, confirming that authentication has succeeded.

• Once your project is synced with GitHub, verify that the files are present in your repository by navigating to it.

Deploying on Hostinger 09:04

"Hostinger has a Node.js app installer that allows your AI website to reflect on a live domain."

• After preparing your website, go to Hostinger, which is recommended for its Node.js app installer, allowing you to easily deploy your AI website.

• You can find a link in the video description to start the deployment process on Hostinger.

• Choose the most economical hosting plan; selecting the business plan qualifies you for a free domain and a money-back guarantee.

• Enter the coupon code "Daryl10" for an additional discount on your web hosting package.

• Register your account by filling in your details, including billing information, and submit your payment.

Syncing with GitHub and Deploying the Website 10:45

"You'll select connect with GitHub to automatically sync up with your repository."

• Upon successful payment, you can specify a name for your new AI website and select a free domain.

• Choose to deploy your Node.js web app by connecting it with GitHub, ensuring you are logged into your account.

• Hostinger will sync with your GitHub repositories, allowing you to select the correct project for deployment.

• Confirm the framework, which is preset to Next.js, and click on deploy. This process could take a few minutes.

Adding Additional Features to Your AI Website 11:58

"You can enable a CDN to deliver your AI website faster to users across the network."

• Once your site is live, you can enhance it with additional features such as SSL protection and a CDN.

• To implement CDN, access the settings on your dashboard and enable it for better performance.

• For business use, you can set up a free business email associated with your new domain.

• You can create your business email address by entering the desired name and password, allowing you to manage communications through your new domain.

Making Changes and Updating Your Live Website 12:59

"The beauty of this is that you can make as many changes as you want and then push those changes."

• Changes can be made easily in Claude; after modifying elements, you can now commit these changes to GitHub and push them to your live website.

• The system will only pull the updates from GitHub when you instruct it, ensuring you have control over what appears live.

• You can monitor the deployment process from Hostinger's dashboard, where it syncs updates to your live site.

Incorporating a Free Database 14:19

"A database lets you store customer information like emails or any data entered on your website."

• For those interested in adding a free database to their site, start by creating an account on Supabase, which allows you to store data securely.

• After signing up, create a new project on Supabase and configure it to begin storing data from user forms on your website.

• This setup will enable you to capture valuable customer information for marketing or communication purposes later on.

Creating a New Project in Supabase 15:51

"Now Supabase is building your database. This process might take a few minutes."

• To begin, click on "Create New Project" in Supabase. You may receive a prompt indicating that there could be costs associated with the service; click "I understand" to proceed.

• Supabase will then start the process of building your database, which may take several minutes.

Connecting Claude to Supabase 16:10

"Make sure you're using the Cloud desktop version."

• Head back to your Claude project and ensure you are on the Cloud desktop version.

• In the settings, navigate to the connectors section and click on "Add Connector." Search for Supabase in the connectors list, and click on the plus icon to add it.

• You will be redirected to the Supabase website where you must authorize API access, linking your Claude project to Supabase.

Configuring Tool Permissions 17:03

"Always allow is selected for the tool permissions."

• Under the connectors section, choose Supabase and ensure that "Always allow" is selected for both tool permissions and write/delete tools. This will prevent frequent permission prompts when using the application and save time on troubleshooting.

Running Commands and Integrating the Database 17:25

"We want to ask it to integrate a database onto this specific application."

• Enter the commands from Supabase in Claude, beginning with the command to install agents. This ensures correct integration with your project.

• Next, you will input specific prompts that will make your Next.js application dynamic by allowing it to adjust the database based on what you are building. Specify that authentication is not required for now, which allows any user to access the application.

Installing Libraries and Setting Environment Variables 19:11

"Make sure you add these variables to the ENV file."

• You will need to install libraries necessary for the application and specify environment variables for connecting to the database locally.

• These variables are crucial for ensuring that Hostinger can communicate properly with Claude, so be meticulous when entering these details.

Testing and Debugging the Integration 22:51

"If this did not work, you may need to debug it."

• After completing the setup process, test your integration by filling out a contact form on your live website. If the data submission does not work as expected, debugging may be necessary.

• Confirm that your lead data appears correctly in Supabase, indicating that the integration was successful. If issues arise, utilize the debugging methods to identify potential errors in your project structure.

Merging Changes to the Main Branch 23:31

"You can say, 'I want this to be merged directly to the main branch.'"

• When working with repositories, you have the option to merge changes directly to the main branch, ensuring that the updates integrate seamlessly rather than being assigned to a side repository.

• Executing this step allows for a more straightforward integration of updates into your AI's main functionality.

Checking Repository Status on GitHub 23:55

"You should see something that looks just like this."

• After making changes, it's essential to check the status of your repository on GitHub, specifically under the relevant section for your project.

• If the layout and information in the repository do not match the expected appearance, it indicates that something may have gone wrong during the merge or deployment process.

Handling Deployment Errors with Hostinger 24:21

"If you click on all deployments, it'll say failed."

• In the event of an error during deployment, the GitHub interface provides notifications about failed attempts, enabling users to investigate the issues.

• Detailed error messages can be accessed by clicking on the deployment history, and it’s critical to communicate these errors to Claude for troubleshooting while ensuring proper sync between your database and Claude.

Simplifying the Deployment Process 24:51

"We got to find an easier way to do this."

• The initial approach to deployment through the terminal might have been too complex, leading to a lack of clarity in visualizing the project progress.

• Collaborating with developers led to the development of more user-friendly methods, making the deployment process more accessible and intuitive for users.