Turn a Folder into a Website

Turn a Folder into a Website Without Rebuilding Everything

Client work often ends up as a pile of attachments: a proposal, a deck, a spreadsheet, a demo, some images and a page of notes. A cloud drive keeps them together. But the client still lands in a file manager and must guess where to start.

A folder website is a website made from a folder of files. It keeps the same files in one place behind one link. Its home page tells visitors what to open first. You do not need a framework, a build pipeline or a designer. You need a folder with an entry page (the page that opens first) and a host that serves it.

This guide explains:

• What a host needs from your folder
• How to give the folder a home page, by hand or with a README on GitHub Pages
• Three ways to publish it: Netlify Drop, Cloudflare Pages and GitHub Pages
• How to choose public, password or verified-email access
• How to update the site without changing the link

What Happens When You Turn a Folder into a Website

A static host is a service that sends your files to browsers as they are. Each file gets a URL that matches its path in the folder. For example, reports/q3-summary.pdf becomes https://your-site.example/reports/q3-summary.pdf. Subfolders stay subfolders, and a client can reach everything from one address.

The host needs one thing from you: a home page. Each host in this guide looks for index.html at the top of the folder. The host shows that page when someone opens the root URL. GitHub Pages also accepts index.md or README.md as the entry file (GitHub Pages docs).

Home page method	What the visitor sees	Best use
Simple index.html with a list of links	A short page that explains the folder and links to each file	Proposals, reports, research packets, image sets
Designed index.html	Your own landing page	Demos, microsites, interactive reports
README.md on GitHub Pages	Your README rendered as the home page	Documentation and Markdown notes

Do not expect the host to make a file listing for a folder that has no index page. If people must browse a folder, give that folder its own page. You can also link to the files directly from the home page.

When you add an index.html, keep the folder structure as it is. A page that loads assets/chart.webp breaks if the image moves to a different place. Upload the CSS, JavaScript, fonts and images with the paths that the page expects.

Cloudflare Pages has one special trap. If the project has no top-level 404.html, Pages treats the site as a single-page application (an app that uses one page for all paths). Pages then serves the home page for each path that does not match a file (Cloudflare serving rules). A broken link then shows the home page instead of an error. Add a simple 404.html to make mistakes visible.

Give the Folder a Home Page

A home page for a file bundle can be a dozen lines of HTML. Save this code as index.html at the top of the folder. Then change the links:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Northwind Q3 strategy</title>
</head>
<body>
  <h1>Northwind Q3 strategy</h1>
  <p>Updated 14 July 2026. Start with the summary, then the pricing options.</p>
  <ul>
    <li><a href="2026-q3-research-summary.pdf">Research summary (PDF)</a></li>
    <li><a href="pricing-options.html">Pricing options</a></li>
    <li><a href="demo/index.html">Interactive demo</a></li>
    <li><a href="source-files/northwind-model.xlsx">Financial model (Excel, downloads)</a></li>
  </ul>
</body>
</html>

Describe each link in the words of a visitor. A W3C guideline asks for link text that makes its purpose clear, even out of context. Descriptive file names help in the same way. 2026-q3-research-summary.pdf says more than final_v7_NEW.pdf.

If your notes are already in Markdown, GitHub Pages can do this work for you. It runs Jekyll with plugins that cannot be disabled. Three of these plugins are jekyll-readme-index, jekyll-optional-front-matter and jekyll-relative-links. They use your README.md as the home page when there is no other index. They turn plain Markdown files into pages. They also change links such as notes.md so that they go to the rendered pages.

How Your Files Behave in the Browser

Before you publish, find out how each type of file opens in a browser. A visitor must be able to read the important material without installing anything.

File type	What usually happens	How to prepare it
HTML	Renders as a page	Keep linked CSS, JavaScript, fonts and images in their expected paths
PDF	Opens in the browser’s built-in PDF viewer	Look at the page size, the links and the text clarity
Images	Display directly	Compress large images and use descriptive names
CSV	Downloads or shows as plain text	If people need to read the data, add an HTML table or a chart page
Markdown	Shows as plain text, unless the host converts it (GitHub Pages does)	Convert to HTML, or publish on GitHub Pages
Word, Excel, PowerPoint	Download	Add a PDF copy for reading. Keep the source file for editing

A PDF export is safer than an untested slide deck. If the client needs the editable source, keep it in the folder next to the PDF. Label the link as a download.

Prepare and Test the Folder Locally

1. Remove private and unneeded files. Examples are drafts, duplicate exports, .env files, API keys, private notes and unrelated internal folders. Each file in the folder can end up at a public URL.
2. Keep useful subfolders. Do not move all files into one directory.
3. Add the home page and a 404.html.
4. Preview the site locally. In the folder, run this command:

python3 -m http.server 8000

Then open http://localhost:8000 in a browser. Click every link. The Python server is for local testing only (Python docs). It also makes a file listing for each folder without index.html. Your host will not do this. Make sure that each page that you link to exists.

Publish the Folder: Three Ways

The three hosts below serve static files over HTTPS on a subdomain that they give you (netlify.app, pages.dev or github.io). With all three, you can connect your own domain later. Pick the one that matches how you want to update the site.

Netlify Drop: drag and drop

1. Sign in to Netlify. Then the new site stays in your account.
2. Open Netlify Drop. Drag the folder onto the page.
3. Netlify publishes the files and gives you a URL. When you are signed in, Netlify can also detect a framework project and run its build. A folder of finished files works as it is (Netlify deploy docs).
4. To update the site, drag the new version of the folder to the deploy dropzone. The dropzone is at the bottom of the Deploys page of the project. Developers can do the same from the terminal with netlify deploy --prod.

Cloudflare Pages: Direct Upload

1. In the Cloudflare dashboard, open Workers & Pages.
2. Select Create application > Get started > Drag and drop your files.
3. Enter a project name. Drag in the folder. Select Deploy site, then Save and Deploy.
4. To update the site, open the project. Select Create a new deployment.

The dashboard upload accepts up to 1,000 files of up to 25 MiB each. For bigger folders, use Wrangler. Wrangler accepts up to 20,000 files (Cloudflare Direct Upload docs):

npx wrangler pages deploy ./northwind-q3

Decide early. You cannot connect a Direct Upload project to a Git repository later. If you want Git later, you must create a new project.

GitHub Pages: from a repository

1. Create a repository. Push the folder to the root of the repository or to a docs folder.
2. In the repository, open Settings, then Pages in the “Code, planning, and automation” section of the sidebar.
3. Under Build and deployment, choose Deploy from a branch. Pick the branch and the folder (/ or /docs). Select Save (GitHub publishing source docs).
4. After each push, changes can take up to 10 minutes to appear.

GitHub Pages sites are public on the internet. On GitHub Free, the repository must be public too. This makes GitHub Pages a good fit for documentation and open material. It is a poor fit for client work that must stay private.

Choose Access Before You Share

Before you send the link, decide who can see the folder. It is easier to set access correctly before the first visitor than after.

Access	Visitor experience	How to set it up	Main concern
Public	Anyone with the URL can open it	Any host, by default	Do not put confidential work here
Shared password	Visitor types one password	Netlify password protection (Pro and Enterprise plans) or Vercel Password Protection (a paid add-on on Pro, included on Enterprise)	People forward passwords
Verified email	Visitor enters an email address and a one-time code	Cloudflare Access in front of a Cloudflare Pages project	More setup, and you manage a list of allowed addresses

With Cloudflare Access and the One-time PIN login method, a visitor enters an email address and receives a code that expires 10 minutes later. Cloudflare sends the code only if your Access policy allows the address (One-time PIN docs). You then see each sign-in in the Access authentication logs. The logs tell you which address opened the site. How to Password Protect a Cloudflare Pages Site shows the full setup. It includes the extra steps for the pages.dev address.

GitHub Pages has no password option. Private Pages sites exist only for organizations on GitHub Enterprise Cloud. The visitors of such a site need read access to the repository (GitHub visibility docs). This is awkward for clients.

An unlisted URL or a noindex tag is not access control. Google says that noindex only keeps a page out of its search results. Anyone with the URL can still open it. Preview deployments (test versions of the site) on Cloudflare Pages are also public by default. They carry an X-Robots-Tag: noindex header, but anyone with the URL can open them (preview deployment docs).

Send a shared password through a different channel from the link. Never put the password inside the URL. When the project ends or the client team changes, change the password or remove the access.

Update the Same Site and Keep One Link

When feedback arrives, update the same project. Do not create a new one. The URL stays the same, and the client keeps one bookmark.

A clean update has these steps:

1. Replace files with their revised versions. Keep the paths that the home page links to.
2. Delete obsolete copies. Do not leave final, final-2 and really-final side by side.
3. Deploy to the same project. On Netlify, drag the folder to the Deploys page. On Cloudflare Pages, select Create a new deployment. On GitHub, push a commit.
4. Open the live URL in a private window. Make sure that the changed pages and the key downloads work.
5. If something went wrong, roll back. On Netlify, open an earlier successful deploy. Select Publish deploy (Netlify docs). On Cloudflare Pages, open Deployments. Open the menu next to an earlier production deployment. Select Rollback to this deployment (Cloudflare rollback docs). On GitHub Pages, revert the commit.

To see if people use the site, add analytics. On Cloudflare Pages, open the project. Go to Metrics. Under Web Analytics, select Enable. Cloudflare adds the script on the next deployment. For a site on another host, add the Cloudflare Web Analytics snippet before the closing </body> tag (Web Analytics setup).

Read the numbers as signals. A visit shows that someone opened a page, not that they agreed with it.

Four Folder Website Examples

Build the site around the decision that the visitor must make.

Scenario	Folder contents	Access	Useful extra
Freelancer proposal	Proposal PDF, scope page, pricing table, work samples	Verified email through Cloudflare Access	Sign-in logs show when the client’s address opened it
Agency design review	HTML prototype, image exports, brand notes	Shared password during review	A feedback form from Google Forms or Tally linked from the home page, or Netlify Forms on Netlify
Consulting research packet	Executive summary, source PDFs, charts, data appendix	Password or verified email	A home page that says which document answers which question
AI-generated demo	index.html, JavaScript, JSON data, screenshots, release notes	Password during review, public after approval	Update the same project after each round of feedback

A single proposal PDF is fine for a small job. When you add research, references, examples and several pricing options, one attachment becomes hard to use. A folder website keeps the proposal short and the evidence one click away.

For feedback on Netlify, Netlify Forms receives submissions from a plain HTML form. To use it, enable form detection. Then add data-netlify="true" to the form tag. On other static hosts, link to an external form.

When a Folder Website Is the Wrong Tool

Approach	Strength	Limitation	Best when
Email attachments	Familiar and immediate	Size limits, duplicate versions, no activity data	Sending one or two final files
Cloud-drive link	Good storage and shared editing	Feels like browsing internal storage	Working together on source documents
Document-sharing service (DocSend, Papermark)	Per-document passwords, email gates and page-level activity	Built around documents, not web pages	Sending a deck or a report you want to track
Static host (Netlify, Cloudflare Pages, GitHub Pages)	One link, a real home page, fast updates	Access control depends on the host and plan	Presenting a set of files or a demo
Server or VPS	Full control, databases, custom code	You own security, updates and uptime	Running custom backend software

Storage and presentation are different jobs. A drive can hold a tidy project folder and still give the client a poor reading experience. A polished public site is too much for a confidential two-week review. Match the delivery to the relationship.

Folder-to-Website Pitfalls

Most failures are not technical. Often the site is confusing or shows too much, or nobody tested it as a visitor. Avoid these mistakes:

• Do not publish secrets, API keys, private notes or unrelated internal folders. Review each file before you upload it.
• Do not keep every draft. Make the current version obvious. Let the deploy history of the host keep the old versions.
• Do not link to a subfolder that has no index page. The visitor gets an error. On Cloudflare Pages without a 404.html, the visitor gets the home page again.
• Do not test only on your own machine. Open the shared URL in a private window. Use the password of the client. Follow each important link. Submit the form once.
• Do not treat noindex or an unguessable URL as privacy.

A folder website replaces attachment chains with one place to look. Add a home page and prepare copies that open in a browser. Pick a host and an access level that fit the work. Before you send the link, test the site as a visitor. Later updates go to the same URL, so old emails never point to a dead end.

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.