How to Host AI-Prompt Generated Websites on Shared Hosting

How to Host AI-Prompt Generated Websites Hero Image

You just asked ChatGPT or Claude to build you a website. It gave you pages of code like HTML, CSS, maybe some JavaScript. The website looks perfect when you test it on your computer. But now what? How do you get this code online so the world can actually see it?

This guide walks you through exactly that. You don’t need to be a developer or understand how code works. You just need to follow these steps to upload your AI-generated website to your InMotion Hosting Shared Hosting account.

What You’ll Need Before Starting

Before we begin, make sure you have these four things ready:

Your website code from AI. This is the HTML, CSS, and JavaScript files that ChatGPT, Claude, or another AI tool created for you. You should have these saved somewhere on your computer—maybe in a folder on your desktop or in your Downloads folder.

An InMotion Hosting account. You need an active shared hosting plan. This is different from VPS or dedicated hosting—shared hosting is the most affordable option and perfect for websites built with AI prompts. If you don’t have hosting yet, you can sign up for a shared hosting plan that fits your needs.

Your hosting login information. You received this in your welcome email when you signed up, but you can also find it in AMP. You’ll need your cPanel username and password. If you can’t find this email, don’t worry—you can reset your password through the InMotion Hosting customer portal.

A way to access the internet. You’ll need a web browser (like Chrome, Firefox, or Safari) and an internet connection. That’s it.

One more thing: this guide assumes your AI tool gave you actual code files, not a link to a website builder platform. If your AI tool created a site on its own platform (like Wix or Squarespace), those work differently and you can’t export the code. Make sure you have actual HTML files that you can open and see code inside.

Understanding What AI Generated for You

Before uploading anything, let’s look at what you actually have. AI tools generate different types of files depending on what you asked for.

  • HTML files are the structure of your website. These files end in .html and contain the actual content—your text, headings, and links. The most important one is usually called index.html. This is your homepage, the first page people see when they visit your website.
  • CSS files make your website look good. These files end in .css and contain styling information—colors, fonts, spacing, and layout. Without CSS, your website would be plain black text on a white background.
  • JavaScript files make your website interactive. These files end in .js and handle things like dropdown menus, image sliders, contact forms, and buttons that do something when you click them.
  • Image files are pictures on your website. These might be .jpg, .png, or .gif files. AI tools don’t usually create these, but if you added images to your prompts or provided image links, you might have them.

Look at the folder on your computer where you saved everything from AI. You should see at least one file called index.html. If you have multiple HTML files, that’s fine—each one is a different page on your website. You might also see folders named things like “css,” “images,” or “js” that contain supporting files.

Here’s what matters: you need to upload ALL of these files to your hosting account in the exact same folder structure. If your CSS file is in a folder called “styles” on your computer, it needs to be in a folder called “styles” on your hosting account too. Otherwise, your website won’t look right.

Getting Your Code from AI Tools

If you haven’t already saved your code, here’s how to get it from popular AI tools.

Getting Code from ChatGPT

When ChatGPT writes code for you, it appears in a gray box with a “Copy code” button in the corner. Click that button to copy everything. Then:

  1. Open a text editor on your computer. On Windows, use Notepad. On Mac, use TextEdit.
  2. Paste the code by pressing Ctrl+V (Windows) or Command+V (Mac).
  3. Save the file with the correct extension. For HTML files, name it index.html. For CSS files, use a name like styles.css.

Important: When saving files in Notepad or TextEdit, make sure to save as “All Files” or “Plain Text” format, not as a rich text document. The file needs to be just plain code with no formatting.

If ChatGPT gave you multiple code blocks (one for HTML, one for CSS, one for JavaScript), save each one as a separate file with the appropriate extension.

Getting Code from Claude

Claude works similarly to ChatGPT. When it generates code, you’ll see it in a formatted code block. Look for the copy button (usually in the top-right corner of the code block) and click it.

Follow the same saving process as ChatGPT—paste into a text editor and save with the correct file extension.

Organizing Your Files

Once you have all your files saved, create a folder on your computer to keep everything organized. Name it something like “MyWebsite” or “AIWebsite.” Put all your HTML, CSS, JavaScript, and image files in this folder.

If your code refers to files in specific folders (like “css/styles.css“), create those folders inside your main website folder and put the files in the right places. This organization is important because your website won’t work if files are in the wrong locations.

Method 1: Uploading with cPanel File Manager

The cPanel File Manager is the easiest way to upload your website files. It works directly in your web browser—no software to download, no complicated setup. This is the best method if you have just a few files or if this is your first time uploading a website.

Accessing cPanel File Manager

First, you need to log in to cPanel. Open your web browser and go to your InMotion Hosting customer portal. You can usually access this at inmotionhosting.com and clicking the login button.

After logging in to the customer portal, look for the “cPanel” button or link. This is usually in your account dashboard. Click it, and you’ll be taken to cPanel—a control panel with lots of icons for managing your website.

Screenshot of AMP Tools for a Shared Hosting plan
Screenshot of AMP Tools for a Shared Hosting plan

In cPanel, scroll down until you find the “Files” section. You’ll see an icon that says “File Manager.” Click on it, and a new tab will open with the File Manager interface.

Screenshot of cPanel Tools for Files
Screenshot of cPanel Tools for Files, including File Manager

Navigating to the Right Folder

When File Manager opens, you’ll see a list of folders on the left side and files on the right side. This looks similar to Windows File Explorer or Mac Finder, just in your web browser.

Look for a folder called public_html. This is important—this is where your website files need to go. Everything you put in this folder becomes visible on the internet when people visit your domain name.

Click on the public_html folder to open it. You might see some files already in here, like a default index.html file or some folders. That’s normal. If there’s an existing index.html file, you can delete it (we’ll upload your new one). But be careful not to delete any folders unless you’re sure you don’t need them.

Uploading Your Files

Now you’re ready to upload. Look at the top of the File Manager screen—you’ll see a toolbar with several buttons. Find the button that says “Upload.” Click it.

A new page opens with a large upload area. You have two options here:

  • Option 1: Drag and Drop. Open the folder on your computer where you saved your website files. Select all of them (click one file, then press Ctrl+A on Windows or Command+A on Mac to select everything). Drag them from your folder and drop them into the upload area in your browser.
  • Option 2: Select Files. Click the “Select File” button in the upload area. A file browser window opens. Navigate to your website folder, select your files, and click “Open.”

Either way, you’ll see a progress bar as your files upload. This might take a few seconds or a few minutes, depending on how many files you have and your internet speed.

When the upload finishes, you’ll see a list of successfully uploaded files. At the bottom of the screen, click the link that says “Go Back” or use your browser’s back button to return to File Manager.

Checking Your Upload

Back in File Manager, you should now see all your files listed in the public_html folder. Check that everything is there:

  • Your index.html file should be in the main public_html folder
  • Any CSS files should be in the right location (either in public_html directly or in a css folder if your code expects that)
  • Same for JavaScript files and images—they need to be exactly where your HTML code expects to find them

Visiting Your Website

You’re done! Open a new browser tab and type your domain name into the address bar (like yourwebsite.com). Press Enter. You should see your AI-generated website.

If you see a blank page, an error message, or a page that looks broken, don’t panic. Scroll down to the troubleshooting section at the end of this guide.

Method 2: Uploading with SFTP (FileZilla)

SFTP stands for “Secure File Transfer Protocol.” It’s a way to transfer files between your computer and your hosting account that’s faster and more reliable than the File Manager, especially if you have lots of files or need to upload the same website multiple times (like when making updates).

To use SFTP, you need a program called an FTP client. The most popular free option is FileZilla. This method requires a bit more setup than File Manager, but once it’s set up, it’s actually faster and easier for ongoing website management.

Downloading and Installing FileZilla

First, you need to download FileZilla. Go to filezilla-project.org in your web browser. Make sure you download from the official website—don’t use other download sites that might include unwanted software.

On the FileZilla website, click the “Download FileZilla Client” button. Make sure you’re downloading the Client, not the Server—those are different products.

Choose the version for your operating system (Windows or Mac). The free version is a suitable choice for uploading files to your server. The download will start automatically.

FileZilla Client Select Your Edition

Once downloaded, open the installer:

  • On Windows: Double-click the .exe file and follow the installation wizard. Click “Next” through the screens and accept the license agreement.
  • On Mac: Open the .dmg file and drag FileZilla to your Applications folder.

When installation finishes, open FileZilla. You’ll see a window divided into several sections—this looks more complicated than it is, and we’ll explain each part.

Getting Your SFTP Connection Details

Before you can connect FileZilla to your hosting account, you need some information. Log in to your InMotion Hosting cPanel (like we did in Method 1).

In cPanel, find the “Files” section and look for “FTP Accounts” (not File Manager this time). Click it.

Screenshot of cPanel Tools for Files
Screenshot of cPanel Tools for Files, including FTP Accounts

You’ll see a list of FTP accounts. If you just signed up, you might only see one account. Look for these pieces of information:

  • Server/Host: This is usually your domain name or something like ftp.yourdomain.com. You might also see an IP address—that works too.
  • Username: This is your FTP username. It might be the same as your cPanel username, or it might be something different.
  • Port: For SFTP, the port number is always 2222 for Shared Hosting plans. Remember this—it’s important.
  • Password: You should have received this in your welcome email. If you don’t remember it, you can change it from this FTP Accounts page. Click “Change Password” next to your account and create a new one. Write it down somewhere safe.

Connecting FileZilla to Your Hosting Account

Now let’s connect FileZilla to your hosting account. In FileZilla, look at the very top of the screen. You’ll see a toolbar with buttons including one that says “Open the Site Manager.” Click it.

A new window opens. In the bottom-left corner, click the button that says “New Site.” A new entry appears in the list on the left. You can name it whatever you want—something like “My Website” or “InMotion Hosting” works fine.

Now, on the right side of the window, fill in these fields:

  • Protocol: Click the dropdown menu and select “SFTP – SSH File Transfer Protocol.” This is important: don’t choose regular FTP. SFTP is more secure.
  • Host: Enter your server address (your domain or the address from cPanel).
  • Port: Enter 2222 (this is the standard SFTP port for Shared Hosting).
  • Logon Type: Select “Normal” from the dropdown.
  • User: Enter your FTP username from cPanel.
  • Password: Enter your FTP password.

When everything is filled in, click the “Connect” button at the bottom.

The first time you connect, FileZilla might show you a message about an “unknown host key.” This is normal and just a security check. Click “OK” or “Always trust this host” to continue.

Understanding the FileZilla Interface

Once connected, FileZilla’s window is divided into four main sections:

  • Top Left (Local Site): This shows folders and files on your computer. This is like opening Windows File Explorer or Mac Finder.
  • Top Right (Remote Site): This shows folders and files on your hosting account. This is the same as what you saw in cPanel File Manager.
  • Bottom Left (Local Files): A detailed list of files in whatever folder you’ve selected in the top-left section.
  • Bottom Right (Remote Files): A detailed list of files in whatever folder you’ve selected in the top-right section.

At the very bottom, you’ll see a “Transfer Queue” section. This shows files as they’re uploading or downloading.

Uploading Files with FileZilla

On the left side of FileZilla (your computer), navigate to the folder where you saved your website files. Click through folders just like you would in File Explorer or Finder until you see your website files listed in the bottom-left section.

On the right side of FileZilla (your hosting account), navigate to the public_html folder. You’ll see it in the top-right folder section. Double-click it to open it.

Now for the easy part: uploading is just drag and drop. In the bottom-left section (files on your computer), select all your website files. You can select multiple files by holding Ctrl (Windows) or Command (Mac) and clicking each file, or select all of them at once with Ctrl+A or Command+A.

Drag the selected files from the bottom-left section to the bottom-right section (your hosting account). Drop them there.

FileZilla starts uploading immediately. You’ll see files appear in the Transfer Queue at the bottom of the screen with progress bars. When a file finishes uploading, it disappears from the queue and appears in the bottom-right section with your other remote files.

Wait for everything to finish uploading. Depending on how many files you have and your internet speed, this could take anywhere from a few seconds to several minutes.

Verifying Your Upload

After uploading completes, look at the bottom-right section (remote files). You should see all your website files listed there, including your index.html file.

The great thing about FileZilla is that you can see immediately if something went wrong. If a file failed to upload, it will show in red in the Transfer Queue. You can right-click failed files and select “Add to Queue” to try uploading them again.

Testing Your Website

Open a web browser and type your domain name into the address bar. Press Enter. Your website should appear. If it doesn’t, jump to the troubleshooting section below.

Disconnecting from FileZilla

When you’re done uploading, you can disconnect from your hosting account. In FileZilla, click the “Disconnect” button in the toolbar at the top of the screen (it looks like an X or a stop sign).

The good news: FileZilla saves your connection details. Next time you need to upload files, just open FileZilla, click “Open Site Manager,” select your saved site, and click “Connect.” You don’t have to enter all that information again.

Making Your Website Look Right

Sometimes you upload everything correctly, but your website doesn’t look the way it should. The content is there, but the colors, fonts, and layout are all wrong. This usually means your HTML file can’t find your CSS file.

Here’s why this happens: AI tools sometimes generate code with incorrect file paths. For example, your HTML might say the CSS file is at /css/styles.css, but you uploaded styles.css directly to the public_html folder with no css folder at all.

Checking File Paths

Open your index.html file in a text editor (Notepad on Windows, TextEdit on Mac). Near the top of the file, look for a line that mentions your CSS file. It will look something like this:

<link rel="stylesheet" href="styles.css">

Or it might reference a sub-folder like this:

<link rel="stylesheet" href="css/styles.css">

The part inside the quotes (styles.css or css/styles.css) is the file path. This tells the browser where to find your CSS file.

Now, think about where you actually uploaded your CSS file. Did you put it directly in the public_html folder? Or did you create a css folder and put it in there?

The file path in your HTML needs to match the actual location of your CSS file. If the path says css/styles.css but your CSS file is directly in public_html, you have two options:

  • Option 1: Move your CSS file into a css folder. Using FileZilla or cPanel File Manager, create a new folder called css inside public_html, then move your CSS file into it.
  • Option 2: Edit the HTML file to match where your CSS file actually is. Change css/styles.css to just styles.css in your HTML code, then re-upload the HTML file.

Either option works—just make sure your code matches your file locations.

Common Problems and Solutions

Here are the most common issues people run into when uploading AI-generated websites, along with how to fix them.

Problem: “Index of /” Page Appears

When you visit your domain, you see a page that says “Index of /” at the top with a list of files and folders below it. This means your hosting account is working, but it can’t find your homepage.

Solution: Your main HTML file must be named index.html (with a lowercase ‘i’ and lowercase ‘html’). It must also be directly in the public_html folder, not in a subfolder. If your file is named something else (like home.html or Index.html), rename it to index.html. If it’s in a subfolder, move it to the main public_html folder.

Problem: Blank Page or Error Message

You visit your website and see nothing—just a white page. Or you see an error message like “404 Not Found” or “500 Internal Server Error.”

Solution: First, wait 5-10 minutes and try again. Sometimes it takes a few minutes for newly uploaded files to become available. If the problem continues, check these things:

  • Make sure your index.html file is in the public_html folder
  • Open your index.html file in a text editor and look at the very first line. It should say <!DOCTYPE html>. If there’s any text or code before that line, delete it
  • Check that your HTML file actually has content inside it (not just blank)

Problem: Website Works But Looks Broken

Your website appears, but the colors, fonts, and layout are all wrong. Text might be too big, too small, or in the wrong place.

Solution: This is a CSS file path problem. Read the “Making Your Website Look Right” section above and make sure your HTML file is pointing to the correct location of your CSS file. Also, make sure you actually uploaded your CSS file—check File Manager or FileZilla to confirm it’s there.

Problem: Images Don’t Show Up

Your website appears and looks right, but where images should be, you see broken image icons or empty spaces.

Solution: Check three things:

  1. Did you actually upload your image files? Look in File Manager or FileZilla to confirm.
  2. Are your images in the right folder? If your HTML code says images are in an images folder, make sure you created that folder and put your images in it.
  3. Open your HTML file and look at the image tags. They look like <img src="...">. The part in quotes needs to match the actual filename and location of your image file exactly—including uppercase/lowercase letters and the file extension (.jpg, .png, etc.).

Problem: Can’t Connect with FileZilla

FileZilla gives you an error message when you try to connect, or it just sits there saying “Connecting…” forever.

Solution: Check these settings:

  • Make sure you selected “SFTP – SSH File Transfer Protocol” as the protocol
  • Make sure the port is set to 2222 for SFTP, or try port 21 for FTP
  • Double-check your username and password (try logging into cPanel with them first to make sure they work)
  • If you’re on a work or school network, their firewall might block SFTP connections. Try from home or on a different internet connection
  • Contact InMotion Hosting support if the problem continues—they can check if SFTP is enabled on your account

Problem: File Manager Won’t Upload Files

You try to upload files in cPanel File Manager, but nothing happens, or you get an error message.

Solution: Check these things:

  • Make sure your files aren’t too large. File Manager has upload size limits (usually 20-50 MB per file). If your files are bigger than that, use FileZilla instead
  • Make sure you’re in the public_html folder when uploading
  • Try a different web browser—some work better with File Manager than others
  • Clear your browser cache and try again

Updating Your Website Later

After your website is live, you’ll probably want to make changes at some point. Maybe you want to update some text, change an image, or add a new page.

Here’s the good news: you don’t have to re-upload everything. Just upload the files you changed.

Using File Manager for Updates

If you’re using cPanel File Manager, just follow the same upload process from earlier, but only upload the specific files you changed. File Manager automatically replaces old files with new ones if they have the same name.

For example, if you updated your homepage, just upload the new index.html file. You don’t need to upload your CSS files, JavaScript files, or images again unless you changed those too.

Using FileZilla for Updates

FileZilla makes updates even easier. Just connect to your hosting account like before, navigate to the right folder, and drag your changed files from your computer to your hosting account. FileZilla will ask if you want to overwrite the existing files—click “Yes.”

Testing Changes

After uploading updated files, visit your website in a web browser. You might need to refresh the page (press F5 or click the refresh button) to see changes. If you still see the old version, try pressing Ctrl+F5 (Windows) or Command+Shift+R (Mac) to force a complete refresh that clears your browser’s cache.

What to Do If You Need Help

If you followed all these steps and your website still isn’t working right, don’t worry. InMotion Hosting has support available to help you.

Before contacting support, gather this information:

  • Your domain name
  • A description of the problem (what you see versus what you expect to see)
  • Which method you used to upload files (File Manager or FileZilla)
  • Any error messages you received

You can contact InMotion Hosting support through:

  • Live chat in your customer portal
  • Support ticket system in your customer portal
  • Phone support

Tell them you’re trying to upload a website and describe the problem. They can look at your account, see what files you uploaded, and help identify the issue.

Moving Forward

You now know how to take code from an AI tool and turn it into a real, live website that anyone can visit. This is a skill that opens up a lot of possibilities.

Remember, your first upload might not be perfect, and that’s okay. Even professional web developers run into these same issues. The important thing is that you understand the basic process:

  1. Get your code from AI and save it as proper files
  2. Upload those files to the public_html folder on your hosting account
  3. Visit your domain to see your website live
  4. Troubleshoot any issues that come up

The more you do this, the easier it gets. Pretty soon, you’ll be updating your website without even thinking about it.

And here’s something to keep in mind: AI tools keep getting better. As you learn more about how websites work—just from uploading them and fixing problems—you’ll be able to give better prompts to AI tools and get better results. You’re building skills that will serve you well as these technologies continue to improve.

Your AI-generated website is now live on the internet. Take a moment to appreciate that—you took an idea, used AI to turn it into code, and made it accessible to the entire world. That’s pretty impressive, whether this is your first website or your fiftieth.

Share this Article
Carrie Smaha
Carrie Smaha Senior Manager Marketing Operations

Carrie enjoys working on demand generation and product marketing projects that tap into multi-touch campaign design, technical SEO, content marketing, software design, and business operations.

More Articles by Carrie

Leave a Reply