Most Vercel tutorials assume that your project is already stored in a Git repository.
That is usually the right workflow for applications you plan to maintain. But sometimes you only have a static HTML page generated by ChatGPT, Claude, or Gemini and need a public URL without setting up a complete repository.
This guide covers both situations:
- Deploying a project from GitHub
- Publishing an AI-generated static page with HTML Deployer
What Vercel Does
Vercel is a cloud platform for building and deploying web projects.
It can connect directly to a Git repository, build the project, and create a public deployment URL. When you push new changes to a connected branch, Vercel can create another deployment automatically.
Vercel also detects the configuration of many common frameworks, although you can customize settings such as:
- Root directory
- Build command
- Output directory
- Environment variables
- Framework preset
For personal projects and experiments, the free Hobby plan is usually the starting point. Check the current usage limits before relying on it for a production project.
Method 1: Deploy a Website from GitHub
This workflow is best for projects that need version control, regular updates, collaboration, or automated deployments.
Before You Start
You will need:
- A GitHub account
- A Vercel account
- A GitHub repository containing your project
- A valid entry file or build configuration
For a basic static website, your repository might look like this:
my-website/
├── index.html
├── styles.css
├── script.js
└── images/
Make sure the website works locally before deploying it.
Step 1: Create a Vercel Account
Open Vercel and create an account.
You can sign up with GitHub, which also makes it easier to connect your repositories during the deployment process.
Complete any email or account verification requested during registration.
Step 2: Connect GitHub
From the Vercel dashboard, create a new project and select GitHub as the Git provider.
Vercel will ask for permission to access your repositories. You can grant access to all repositories or limit access to specific ones.
After authorization, return to the project import screen.
Step 3: Import Your Repository
Find the repository you want to deploy and select Import.
Vercel will analyze the repository and attempt to detect the framework and build configuration automatically.
For a simple static HTML project, you may not need to change anything.
For a framework-based project, review the detected settings before continuing.
Step 4: Review the Project Settings
Before deploying, check the following fields:
Project name
This is used to identify the project in your Vercel dashboard and may also affect the default deployment URL.
Framework preset
Vercel detects many frameworks automatically. Confirm that the detected framework matches your project.
Root directory
Change this when the website is stored inside a subfolder rather than at the repository root.
For example:
repository/
├── documentation/
└── website/
├── index.html
└── styles.css
In this case, the root directory may need to be set to website.
Build command and output directory
Framework-based projects usually require a build command and an output directory.
For example:
Build command: npm run build
Output directory: dist
The exact values depend on the framework and project configuration.
Environment variables
Add environment variables when the project depends on API keys, service URLs, or other configuration values that should not be stored directly in the repository.
Do not commit private credentials to GitHub.
Step 5: Deploy the Project
Once the configuration looks correct, select Deploy.
Vercel will install the required dependencies, run the build process, and create a deployment.
After the deployment finishes, you will receive a public URL that can be opened in the browser.
Step 6: Publish Future Updates
Once the repository is connected, you do not need to import it again.
Update the project locally, commit the changes, and push them to GitHub:
git add .
git commit -m "Update landing page"
git push
Vercel will detect the new commit and create another deployment.
You can review previous deployments, compare changes, manage project settings, and connect a custom domain from the project dashboard.
Method 2: Deploy AI-Generated HTML
Sometimes a Git-based workflow is more than you need.
For example, you might have asked ChatGPT, Claude, or Gemini to generate:
- A landing page
- A portfolio
- A product prototype
- An event page
- A campaign page
- A small static website
You could copy the code into files, create a repository, push it to GitHub, and then import it into Vercel.
However, for a single static page, I wanted a shorter workflow.
I built a Chrome extension called HTML Deployer for this specific use case. It detects HTML generated inside supported AI chats, provides a responsive preview, and publishes the page to a configured hosting target.
It is not intended to replace Git for maintained applications. It is mainly useful when you need to turn a static AI-generated page into a shareable URL quickly.
Configure Vercel in HTML Deployer
The Vercel connection only needs to be configured once:
- Open HTML Deployer settings
- Add Vercel as a publishing target
- Enter the required Vercel configuration
- Save the target
- Confirm that the connection is working
The exact credentials required depend on the deployment configuration used by the extension.
Publish the HTML Page
After the Vercel target is ready:
- Generate a complete HTML page in ChatGPT, Claude, or Gemini
- Select the Deploy button beside the HTML code
- Preview the result on desktop, tablet, and mobile
- Fix any visible layout or content problems
- Select Vercel as the publishing target
- Choose Deploy to Host
- Open the generated URL and test the live page
Previewing the page before deployment is important. AI-generated HTML can look correct at one screen size while still containing broken mobile layouts, missing images, invalid links, or scripts that do not work as expected.
Which Workflow Should You Use?
| Situation | Recommended workflow |
|---|---|
| A maintained web application | GitHub and Vercel |
| A team project | GitHub and Vercel |
| A project with frequent updates | GitHub and Vercel |
| A framework such as Next.js or React | GitHub and Vercel |
| A single AI-generated HTML page | HTML Deployer or manual static deployment |
| A quick prototype or campaign page | HTML Deployer |
| A project requiring version history | GitHub and Vercel |
The GitHub workflow takes slightly longer to set up, but it provides proper version control and a better foundation for ongoing development.
The extension workflow removes several setup steps, but it is better suited to small static pages.
Checks to Make Before Publishing
Regardless of the deployment method, review the website after it goes live.
Check:
- Desktop and mobile layouts
- Navigation links
- Images and external assets
- Forms
- JavaScript interactions
- Page title and metadata
- HTTPS
- Environment variables
- Custom domain configuration
- Browser console errors
A successful deployment only means the files were published. It does not guarantee that every part of the website works correctly.
Final Thoughts
Vercel provides a straightforward deployment workflow when your project is stored in GitHub:
- Connect the repository
- Review the build configuration
- Deploy the project
- Push future updates through Git
For a small static page generated by an AI tool, a lighter publishing workflow may be more convenient.
The right option depends on what happens after the first deployment. Use GitHub when the project will continue to grow. Use a direct static publishing workflow when you mainly need to preview and share a finished HTML page.
How do you usually deploy static pages generated with AI?
Top comments (0)