Deploying an HTML File With Netlify Drop
Netlify Drop is one of the fastest ways to publish a static page: you drag a folder containing an index.html onto a web page, and a few seconds later you have a live address. You do not need Git, a command line or a build step. For a first project made with an AI assistant, it is a gentle introduction to publishing.
Features and screens change, so read the on-screen instructions if they differ from this guide.
Prepare your folder
Netlify Drop publishes a folder, not a loose file. Put everything your site needs in one folder:
index.htmlat the top level of the folder.- Any CSS, JavaScript or images the page uses, in the same folder or in subfolders.
Open the folder’s index.html from your computer and test the page first. If it works there, it will generally work online, provided its links are relative, such as images/logo.png, and not absolute paths to your own disk, such as C:\Users\you\logo.png.
Remove anything that should not be public: notes, drafts, backup files, and above all any file containing passwords or keys. Everything in the folder will be visible to anyone who knows where to look.
Drag and drop
Visit Netlify’s drop page. You will see an area that asks you to drag a folder in. Take your site folder and drop it there. The service uploads the files and, after a short moment, shows a link to your site.
The address will have a random name ending in netlify.app. Open it and test the page on your computer and your phone. Click every button, try the forms, and look for missing images.
Claim the site so it does not disappear
Sites published without an account may be temporary. A message on the page typically explains how long it will stay up and offers a way to log in or sign up to keep it. If you want the site to stay, create a free account or log in, and attach the site to it. Do this soon after uploading.
Once the site belongs to an account, you can manage it from the dashboard: see its address, change its name, and look at deployment history.
Change the site name
The random name is not very memorable. In the site settings, you can usually change it to something readable, like my-tip-calculator, if the name is not taken. The address then becomes my-tip-calculator.netlify.app. Choose a name you are happy to put in a link, because changing it later can break links you have shared.
Update the page
To publish a new version, open your site in the dashboard and look for the option to deploy again by dragging a folder. Drop the updated folder, and the new version goes live. Netlify keeps previous deployments, so if the new one has a problem you can restore an earlier one from the list.
Before you upload an update, test locally and save a numbered copy of the folder. This way you always have your own record, even if you never need to use the restore feature.
Common problems
The address shows “Page not found.” Check that index.html is at the top level of the folder you dropped. A common mistake is dropping a folder that contains another folder that contains the site.
Styles or images are missing. Check file names and capitalization. Logo.png and logo.png are different files on the web.
Changes do not appear. Reload with a hard refresh or open the page in a private window; your browser may be showing a cached copy.
A form does nothing. A plain HTML form needs somewhere to send data. Netlify offers a form handling feature that requires a specific attribute, but the details change, so read the current documentation or ask your assistant to follow it. Our guide on contact forms for static sites covers options.
Know the limits
Free plans have limits on things like bandwidth and the number of builds. A small personal tool will rarely reach them, but read the current plan details so you are not surprised. Netlify, like other hosts, has terms of use you should read, particularly if you plan to use a site commercially.
Remember that a static site cannot run server code or keep a private database. For tools that need them, you will need other services.
A tidy folder structure
A little order makes deployment smoother. Keep index.html at the top, put styles in a css folder, scripts in a js folder and pictures in an images folder. Use lowercase names without spaces, for example team-photo.jpg, because spaces and capital letters cause broken links more often than anything else.
Before you drop the folder, open index.html and check that every link and image path uses these exact names. If you ask your assistant to reorganize files, give it your folder listing and ask it to update the paths in the code. Then test locally again. A few minutes of tidying can save an hour of confusion after the upload.
If you are curious how the dashboard works, spend a few minutes looking around after the first deploy. Find the list of past deployments, the domain settings and the section that shows how much of the free plan you have used. Knowing where these live means you can act quickly when you need to roll back an update, rename the site or check limits. Exploring while nothing is wrong is far easier than learning the layout in the middle of a problem.
Next steps
Put a simple page in a folder, drop it on Netlify and open the address on your phone. Rename the site, claim it with an account, and then make a small edit and redeploy to confirm you know how updates work. Add the address, the date and the host to your notes file so you can find the site later.