Publish a Website with Password Protection

What This Tutorial Covers

In short, an AI assistant builds a small website into a folder. You publish the site and put it behind a password. If you need to know who visited, you change to email-verified access (a sign-in with a code sent by email). Then you look at the sign-in records. The most important rule is to set up protection before the confidential version goes online.

The steps are:

• Ask an AI assistant to build the site into a folder
• Check the folder locally
• Choose a shared password or email-verified access
• Publish a placeholder, protect it, then upload the real site
• Test the gate as a visitor, including direct file URLs
• See who opened the site
• Update the site without losing the protection

The example is a small San Francisco weather dashboard, but the same steps work for a client preview, a pitch page or an internal report.

1. Ask an AI Assistant to Build the Site

Start with a clear prompt that describes the goal, the data and the output format. For example, use this prompt in Claude, ChatGPT or Codex:

Create a website called "San Francisco Weather" with a dashboard for
today and the next 7 days: UV level, air quality, feels-like
temperature and plain-language recommendations. Optimize it for
phones. Put all data in data/today.json and load it with JavaScript,
so earlier days can be kept as data/<date>.json. Output one folder
with index.html at the top. Do not put passwords, API keys or other
secrets in the code.

Two parts of that prompt are important for protection later.

First, the data is in a separate file. You can then update the numbers and not change the layout. You can also make sure that the data file is protected.

Second, the code contains no secrets. Every visitor who gets past the gate can see everything in the HTML or JavaScript. If the site needs an API key, the request must go through a server or a host function, not the browser.

Do not ask the assistant to add a password prompt in JavaScript. A script-based gate runs only after the browser downloads the page and its files, so it hides nothing. Password Protect a Static Website Safely explains why.

2. Check the Folder Locally

Open a terminal in the folder. Run this command:

python3 -m http.server 8000

Then open http://localhost:8000. Make sure that the dashboard loads its data. Also make sure that the layout works at phone width and that every link works. Remove drafts, .env files and all other files that you do not want to publish.

3. Choose How Visitors Get In

Access	What the visitor does	What you learn	Where to set it up
Public	Opens the link	Page views, if you add analytics	Any host
Shared password	Types one password	Nothing about who entered it	Netlify on Pro and Enterprise plans, or Vercel as a paid add-on on Pro and included on Enterprise
Email plus one-time code	Enters an allowed email address and a code sent to it	Which address signed in, and when	Cloudflare Pages with Cloudflare Access
Vercel account	Logs in with Vercel	Which Vercel accounts you granted access	Vercel Authentication, on all plans

A shared password is the quickest choice for a private preview where identity does not matter. Email codes need more setup. But you can see who visited, and you can remove one person while the others keep their access.

4. Publish a Placeholder, Protect It, Then Upload the Real Site

Drag-and-drop uploads go live at a public address as soon as they finish. If you upload the confidential version first and add the password later, the site is open for some time. Anyone who loaded it during that time can still have a copy.

So publish a harmless placeholder (a temporary page) first. A one-line index.html that says “Coming soon” is enough. Then protect the project. Deploy the real folder only after that.

Option A: Netlify with a shared password

1. Sign in to Netlify and open Netlify Drop. Drag in a folder that contains only the placeholder index.html.
2. In the new project, go to Project configuration > General > Visitor access.
3. On current Pro plans, open Project visibility. Select Edit visibility. Choose Password, and enter a long passphrase. On Enterprise and older plans, the section is Password Protection > Configure Password Protection.
4. Protect production and previews, not only previews.
5. Open the Deploys page. Drag the real folder to the dropzone at the bottom (Netlify deploy docs).

Password protection is not available on Netlify’s credit-based Free and Personal plans. How to Password Protect a Netlify Site has more detail.

Option B: Cloudflare Pages with email codes

This option replaces the shared password with a sign-in for each person. The visitor enters an email address that you allowed and receives a one-time code.

1. In the Cloudflare dashboard, open Workers & Pages > Create application > Get started > Drag and drop your files. Name the project. Upload the placeholder folder. Then select Deploy site and Save and Deploy (Direct Upload docs).
2. In the project, go to Settings > General. Select Enable access policy. This setting alone protects only preview deployments.
3. Extend the Access application to the production *.pages.dev address. Follow Cloudflare’s known issues for Pages. One of the steps is to remove the wildcard from the subdomain field.
4. Add the login method: Zero Trust > Integrations > Identity providers > Add new identity provider > One-time PIN.
5. Edit the Access policy, so that it allows only the people that you choose. Use Emails for named addresses, or Emails ending in for a whole company domain (Access policies).
6. In the Pages project, select Create a new deployment and upload the real folder.

Each code expires 10 minutes after the visitor requests it. Cloudflare sends codes only to addresses that your policy allows. A custom domain needs its own Access application, and the domain must be active in your Cloudflare account (self-hosted application docs). How to Password Protect a Cloudflare Pages Site shows every screen.

Option C: Vercel

If you already deployed the site as a framework project on Vercel:

1. Open the project. Then open Settings > Deployment Protection.
2. Turn on Password Protection and enter a password. If every visitor has a Vercel account, you can turn on Vercel Authentication instead.
3. Select All Deployments as the scope. Standard Protection leaves your production domains public.
4. Select Save. The protection covers existing and future deployments.

For the bypass options and team defaults, see How to Password Protect a Vercel Site.

5. Test the Gate as a Visitor

Test in a private window, because your own browser can already be signed in:

1. Open the site address. Make sure that the password prompt or the email sign-in appears before anything else.
2. Enter a wrong password, or an email address that is not on the list. Make sure that you see no content. With Cloudflare Access, a blocked address receives no code.
3. Enter the correct password, or enter the email code.
4. Request a file directly, for example /data/today.json. When you are signed out, the file must also ask for the password. If the JSON loads without the password, the gate covers only the page, not the data.
5. Repeat these tests for every address of the site: the host’s default domain, your custom domain and any preview URL.
6. Try it on a phone.

Send a shared password through a different channel than the link, for example a messaging app or a call.

6. See Who Opened the Site

What you can see depends on the access method.

• A shared password tells you nothing about who entered it. If you need names, change to email codes.
• With Cloudflare Access, every sign-in appears in the Access authentication logs of the Zero Trust dashboard (Access log docs). Each entry shows the email of the user, the time, the IP address, the country and whether Access allowed the sign-in.
• With Vercel Authentication, visitors without access can request it with their Vercel account. You approve or decline each request under Deployment Protection.

For traffic data for each page on Cloudflare Pages, open Metrics in the project. Under Web Analytics, select Enable (Web Analytics setup). It counts visits and pages, not named people.

Tell visitors what you record and why. In many places, sign-in logs are personal data. Keep them only as long as you need them.

7. Update the Site Without Losing the Protection

Protection is a project setting, so new deploys inherit it:

• On Netlify, drag the updated folder to the Deploys page of the same project.
• On Cloudflare Pages, select Create a new deployment in the same project. The Access policy stays in place.
• On Vercel, push or deploy as usual. Password Protection and Vercel Authentication apply to existing and future deployments.

For the weather dashboard, tell the assistant to copy yesterday’s data/today.json to data/<date>.json. It must do this before it writes the new numbers, so that earlier days stay available. After each update, repeat the direct-file test from step 5.

Be careful when you turn protection off. Vercel’s documentation states that if you disable Password Protection or Vercel Authentication, all existing deployments become unprotected at once.

Recommended Access Modes

• Use public access when the site is ready for anyone.
• Use a shared password when you need a quick private preview and do not need to know who visited.
• Use email plus a one-time code when the identity of visitors is important. Examples are client reviews, stakeholder previews and controlled document sharing.

An AI assistant can build the site in minutes, but the gate belongs to the host, not to the generated code. Publish a placeholder, and then protect the project. Upload the real files. Before you share the link, test every address and data file from a private window.

A docs portal with Ask AI
and support tickets

Connect a repository, or describe your product to start. Each docs site has search, Ask AI, an API console, an MCP server and support tickets.

• Publishes from GitHub on every push
• Works with Mintlify repositories
• API console from your OpenAPI file
• MCP server and llms.txt for AI agents
• Ask AI and support tickets
• Analytics for people and AI agents

Start Free→ Questions? Ask AI in our docs

No card required.