Deploying a website usually starts with one question:
Where is the code stored?
If your project is already on GitHub, connecting the repository to Netlify gives you version control and automatic deployments.
If you only have a static HTML page generated by ChatGPT, Claude, or Gemini, creating a repository may add more steps than the project needs.
This guide covers both workflows:
- Deploying a project from GitHub
- Publishing AI-generated HTML with HTML Deployer
What Is Netlify?
Netlify is a cloud platform for building, deploying, and managing web projects.
It can connect to a Git repository, run the required build command, publish the output, and create a public URL.
When new changes are pushed to the connected branch, Netlify can automatically rebuild and redeploy the website.
Netlify also provides features such as:
- Continuous deployment
- Deploy Previews
- Custom domains and HTTPS
- Serverless Functions
- Form handling
- Environment variables
- Global content delivery
Netlify offers Free, Personal, Pro, and Enterprise plans.
The Free plan is generally suitable for learning, personal websites, prototypes, and small experiments.
Pricing and usage limits may change, so review the current plan details before using Netlify for a production project.
Method 1: Deploy a Website from GitHub
This workflow is suitable for projects that need regular updates, version history, collaboration, or automated deployments.
Before You Start
You will need:
- A GitHub account
- A Netlify account
- A GitHub repository containing your project
- A working build configuration when required
A basic static website might have this structure:
my-website/
├── index.html
├── styles.css
├── script.js
└── images/
Make sure the website works locally before deploying it.
Step 1: Sign In to Netlify
Create a Netlify account or sign in to an existing account.
You can use GitHub as your login method, but signing in with GitHub does not automatically give Netlify access to every repository.
Repository permissions are configured separately during the project import process.
Step 2: Import Your Project
After signing in, open Sites from the Netlify dashboard.
Select Import from Git to connect an existing repository.
This tells Netlify that your project source is stored on a Git provider rather than being uploaded manually.
Step 3: Start the Deployment Setup
Select Deploy project to begin configuring the new site.
Netlify will guide you through the connection process and ask which Git provider contains your project.
Step 4: Authorize GitHub Access
Choose GitHub and complete the authorization process.
Netlify needs permission to view the repositories you want to deploy and to retrieve new changes when you update the project later.
Step 5: Install the Netlify App
GitHub will ask you to install the Netlify app.
You can give Netlify access to:
- All repositories
- Only selected repositories
For most projects, selecting only the repositories you plan to deploy gives you more control over account access.
Once the app is installed, return to Netlify.
Step 6: Select Your Repository
Netlify will now display the GitHub repositories it can access.
Choose the repository containing your website.
If the repository does not appear, check the Netlify app settings on GitHub and confirm that access has been granted.
Step 7: Configure and Deploy the Project
Before publishing, review the deployment settings.
Depending on the project, you may need to configure:
- The branch Netlify should deploy
- The build command
- The publish directory
A basic HTML, CSS, and JavaScript project may not require a build command. Framework-based projects usually need both a build command and a publish directory.
When the settings are ready, select Deploy, followed by your project name.
Netlify will begin processing the repository and publish the website when the deployment is complete.
After the site is live, you can open the generated URL from the dashboard. You can also manage the domain, deployment settings, and future updates from the same project page.
Once the repository is connected, pushing new changes to GitHub can trigger another deployment automatically.
Method 2: Deploy AI-Generated HTML
A Git-based workflow is useful for maintained projects, but it may be unnecessary for a single static page.
For example, you may have generated one of the following with ChatGPT, Claude, or Gemini:
- A landing page
- A portfolio
- A campaign page
- A product prototype
- A client preview
- A small event website
The manual workflow would normally involve:
- Copying the generated HTML
- Creating local files
- Previewing the page
- Creating a GitHub repository
- Uploading the files
- Importing the repository into Netlify
- Waiting for the deployment
For a small static page, a more direct workflow may be enough.
I built HTML Deployer for this use case.
HTML Deployer is a Chrome extension that detects HTML generated inside ChatGPT, Claude, and Gemini.
It lets you preview the page on desktop, tablet, and mobile before publishing it to a configured hosting target such as Netlify.
It is not intended to replace Git for larger applications.
It is mainly useful when the HTML already exists and you need to preview and share it quickly.
Configure Netlify in HTML Deployer
Before the first deployment:
- Install HTML Deployer from the Chrome Web Store
- Open the extension settings
- Add Netlify as a publishing target
- Enter the required Netlify configuration
- Save the target
- Confirm that the connection is working
You only need to complete this setup once unless your Netlify credentials or configuration change.
Publish the HTML Page
After configuring Netlify:
- Generate a complete HTML page with ChatGPT, Claude, or Gemini
- Click the Deploy button beside the HTML code
- Preview the page on desktop, tablet, and mobile
- Check the content, links, images, and layout
- Select Netlify as the deployment target
- Click Deploy to Host
- Open the generated URL and test the live website
The preview step is important because AI-generated HTML can look correct on a desktop screen while still containing:
- Broken mobile layouts
- Missing images
- Invalid links
- Overflowing sections
- Forms that do not submit
- Scripts that fail after deployment
Publishing successfully does not guarantee that every part of the page works correctly.
Which Workflow Should You Use?
| Situation | Recommended workflow |
|---|---|
| A maintained application | GitHub and Netlify |
| A project with regular updates | GitHub and Netlify |
| A team project | GitHub and Netlify |
| A framework-based application | GitHub and Netlify |
| A single AI-generated HTML page | Direct publishing workflow |
| A temporary client preview | Direct publishing workflow |
| A landing page experiment | Direct publishing workflow |
| A project requiring version history | GitHub and Netlify |
The GitHub workflow requires more initial setup, but it provides a better foundation for ongoing development.
The direct publishing workflow removes several setup steps, but it is better suited to small static pages.
Common Deployment Problems
Page Not Found After Deployment
Confirm that the published folder contains an index.html file at its root.
Incorrect structure:
publish/
└── website/
└── index.html
Correct structure:
publish/
└── index.html
Styles or Images Are Missing
Check whether asset paths use the correct relative URLs.
<link rel="stylesheet" href="./styles.css">
<img src="./images/product.png" alt="Product preview">
Paths that point to files on your local computer will not work after deployment.
The Build Fails
Review the deployment log and check:
- The build command
- The Node.js version
- Missing dependencies
- Environment variables
- The selected base directory
- The selected publish directory
The Website Works Locally but Not on Netlify
Open the browser console and check for:
- Failed network requests
- JavaScript errors
- Blocked resources
- Incorrect file paths
- Missing environment variables
Checks to Make After Publishing
Review the live website on more than one screen size.
Check:
- Navigation links
- Mobile layout
- Images and fonts
- Forms
- Buttons
- JavaScript interactions
- Page title and description
- HTTPS
- Custom domain settings
- Browser console errors
For AI-generated pages, also inspect the HTML for placeholder content, unsupported scripts, and external resources that may stop working later.
Final Thoughts
Netlify provides several ways to publish a web project, but the right method depends on where your code is stored and how the project will be maintained.
Use GitHub with Netlify when you need:
- Version control
- Automatic deployments
- Team collaboration
- Regular updates
- A structured development workflow
Use a direct static publishing workflow when you have:
- A finished HTML page
- A temporary prototype
- A landing page experiment
- A client preview
- A small project that does not need a repository yet
The important part is not choosing the shortest workflow.
It is choosing a workflow that still makes sense after the first deployment.
How do you usually publish static pages generated with AI?
Top comments (0)