Deployment module
Uploading a Plain HTML, CSS and JavaScript Website
Publish a plain static website with a hosting File Manager or SFTP, check folder nesting, and test the live URL.
Learning Objectives
By the end of this lesson, you'll be able to:
- Upload a plain static website using File Manager or SFTP
- Verify that index.html is directly inside the web root
- Explain why uploading a ZIP is not automatically publishing
- Protect hosting credentials and live files
Why This Matters:
Manual deployment teaches exactly where files go and why folder nesting can break a homepage.
Before You Start:
You should be familiar with:
- Traditional Shared Hosting and Control Panels Review here
File Manager Workflow
A hosting File Manager is a browser-based tool for working with files already on the hosting account. It is useful for beginners because it makes the remote folder visible, but it is still possible to upload the right files to the wrong place. Always confirm the public web root before changing anything.
Upload a Plain Static Site
Confirm the public web root
Find the folder your host serves to the web. Common names include public_html, htdocs, www and httpdocs. Confirm the correct folder in your host documentation.
Back up or remove placeholder files
If the host created a placeholder homepage, download a backup before removing or replacing it. Do not delete files you do not understand on a real account.
Upload the project files
Upload index.html, CSS, JavaScript and image folders so index.html sits directly inside the public web root.
Test the live URL
Open the live address in a normal and private browser window. Check CSS, images, JavaScript, links and the browser console.
You're on track if you can:
- The correct public web root is identified
- index.html is directly inside the public folder
- CSS, JavaScript and images are uploaded
- The live URL works in a normal and private browser window
Common mistake
public_html/
└── my-project/
└── index.htmlUsually correct
public_html/
├── index.html
├── css/
├── js/
└── images/Uploading a ZIP Is Not Publishing
Uploading mywebsite.zip only places an archive on the server. The archive usually needs to be extracted, and the extracted files need to be placed in the correct public directory. Uploading the ZIP is not the same as publishing what is inside it.
A ZIP upload is a transport shortcut. If the host supports extraction, the useful workflow is: create the ZIP from the contents of the project folder, upload it into the correct public folder, extract it, then check that index.html sits directly in the web root. If extraction creates an extra wrapper folder, move the contents up one level or the homepage may not load.
FTP, FTPS and SFTP
| Protocol | Plain-English meaning | Use |
|---|---|---|
| FTP | Older file transfer protocol. | Avoid when secure alternatives are available. |
| FTPS | FTP protected with TLS. | Acceptable when supported and configured correctly. |
| SFTP | File transfer over SSH. | Prefer where supported. |
You may need a hostname, username, password, port and remote directory. Suitable clients include FileZilla, Cyberduck, WinSCP and Transmit as an optional paid macOS tool. Do not buy software just to complete this lesson.
Local computer files | Remote hosting filesThe two-panel interface is the main idea: one side is your computer, the other side is the hosting account. Upload from local to remote; download from remote to local. Before replacing live files, check the timestamp, file size and remote path. If you are not sure whether a file is still needed, download a backup first.
Do not share hosting passwords, commit credentials to Git or keep unused accounts open. Use separate accounts where available and store credentials securely.
Manual Upload Knowledge Check
Before moving forward, can you answer these?
- Why does public_html/my-project/index.html often fail as the homepage?
- What is the difference between uploading a ZIP and publishing the site?
- Which transfer method should students prefer when supported: FTP, FTPS or SFTP?
Check Your Answers
- The host may look for index.html directly inside public_html, not inside the nested my-project folder.
- The ZIP must be extracted and the extracted files must be in the correct public web root.
- SFTP, because it transfers files over SSH and avoids plain FTP credentials.
How confident are you with this concept?
Still confused | Getting there | Got it | Could explain it to a friend
Ready for the Next Deployment Step
Key Takeaways:
- Deployment is a publishing workflow, not just a button.
- The live URL is where deployment evidence is gathered.
- The right hosting path depends on files, update workflow, support needs and ownership.
- Troubleshooting starts with the first meaningful error.
Learning Objectives Review:
Look back at what you set out to learn. Can you now:
- Publish a plain static website with a hosting File Manager or SFTP, check folder nesting, and test the live URL. Check!
If you can name which part of the system you are changing, test the live result and record the outcome, deployment is becoming a repeatable workflow.
Think & Reflect:
Deployment evidence
- What would prove this site works for someone else?
Next action
- What should be recorded so this deployment can be repeated later?
Looking Ahead:
Next: continue with Building and Deploying a Vite Website.
Recommended Next Steps
Continue Learning
Ready to move forward? Continue with the next tutorial in this series:
Building and Deploying a Vite WebsiteRelated Topics
Explore these related tutorials to expand your knowledge: