Deploying a Web Project to Netlify

Deploying a Web Project to Netlify

Why This Matters

A project that only works on your computer is not yet something other people can use.

For example, you may have built:

calculator/
├── index.html
├── style.css
└── script.js

You can open it on your computer, but another person cannot simply open your local files from their browser.

Deployment changes that.

Your computer
     ↓
   Project
     ↓
  Netlify
     ↓
Live website
     ↓
Shareable URL

Instead of saying:

"The project works on my computer."

you can say:

"Open this link and try it."

That is an important step from building a project to delivering a usable product.

1. What Is Deployment?

Deployment means making an application or website available in an environment where people can use it.

For a simple website, deployment might mean:

HTML
CSS
JavaScript
   ↓
Web hosting
   ↓
Internet
   ↓
Browser

For example, after deployment your project might have a URL such as:

https://my-calculator.netlify.app

Anyone with access to the website can open that URL in a browser.

2. What Is Netlify?

Netlify is a platform that can host and deploy web projects.

It can take the files or source code for your project and make them available through a public web address.

For example:

Your project
     ↓
   Netlify
     ↓
https://your-project.netlify.app

Netlify is particularly convenient for frontend projects and static websites.

It can also connect to Git repositories and automatically deploy new versions when your repository changes.

3. What Is a Static Website?

A simple static website can consist of files such as:

index.html
style.css
script.js

The browser downloads these files and runs the HTML, CSS, and JavaScript.

For example:

Browser
   ↓
index.html
   ↓
style.css
   ↓
script.js

A calculator built with HTML, CSS, and browser JavaScript is a good example of a project that can be deployed as a static website.

You do not need a server running your calculator's JavaScript for this type of application.

4. Before You Deploy

Before deploying a project, make sure it works locally.

For example:

□ HTML works
□ CSS loads correctly
□ JavaScript works
□ Images load correctly
□ Links work
□ The project has an index.html file

If something is already broken on your computer, deployment will not automatically fix it.

A useful rule is:

Test locally first, then deploy.

5. The Two Common Ways to Deploy

Netlify can be used in different ways.

For beginners, two approaches are particularly useful:

Netlify
                   │
        ┌──────────┴──────────┐
        ↓                     ↓
 Manual deployment      GitHub deployment
        │                     │
 Upload files           Connect repository
        │                     │
        ↓                     ↓
     Deploy              Build / Deploy

Both approaches can produce a live website.

The difference is how Netlify receives your project.

6. Method 1 — Manual Deployment

Manual deployment means uploading your project directly to Netlify.

This is useful when:

• you want to quickly publish a small project
• you are learning how deployment works
• the project does not need an automated deployment workflow
• you simply want to get a working project online

The basic idea is:

Project folder
      ↓
Upload to Netlify
      ↓
Netlify deploys files
      ↓
Live website

7. Preparing the Project for Manual Deployment

Suppose your project looks like this:

calculator/
├── index.html
├── style.css
└── script.js

The important thing is that the files required by the website are together in the project folder.

For a simple static website, the folder containing index.html is usually what you need to deploy.

For example:

calculator/
└── index.html

is better than accidentally uploading the wrong parent folder.

8. Uploading a Project Manually

After signing in to Netlify, you can use Netlify's manual deployment option to upload your project files.

The exact Netlify interface may change over time, but the basic process is:

Netlify
   ↓
Create / Add new project
   ↓
Deploy manually
   ↓
Upload project
   ↓
Netlify processes the files
   ↓
Deployment completes

For a simple static project, Netlify can serve the uploaded files directly.

9. Your First Netlify URL

After the deployment completes, Netlify provides a web address for the project.

It will typically look similar to:

https://your-project-name.netlify.app

Open the URL in your browser.

Your local project should now be available online.

For example:

Computer
calculator/
    ↓
Netlify
    ↓
https://my-calculator.netlify.app

You can now share that URL with someone else.

10. Manual Deployment Is Simple, but Has a Limitation

Suppose you change your calculator.

You update:

script.js

Your local project now contains the new version.

But the website on Netlify does not automatically know that your local file changed.

With manual deployment, you generally need to upload the updated project again.

Change locally
     ↓
Upload again
     ↓
New deployment

For a small project this may be perfectly fine.

But as projects become more active, manually uploading every update becomes inconvenient.

This is where GitHub integration becomes useful.

11. Method 2 — Deploy from GitHub

Instead of uploading your project manually, you can connect Netlify to a GitHub repository.

The workflow becomes:

Write code
    ↓
Git
    ↓
Commit
    ↓
GitHub
    ↓
Netlify
    ↓
Deploy
    ↓
Live website

This creates a much more useful development workflow.

12. Why Connect GitHub to Netlify?

When Netlify is connected to your GitHub repository, Netlify can use the repository as the source for your deployment.

For example:

GitHub repository
       ↓
Netlify
       ↓
Live website

When you push a new version of the project to GitHub, Netlify can detect the change and create a new deployment.

This means you do not need to manually upload the project every time.

13. Connecting a GitHub Repository

The general workflow is:

Netlify
   ↓
Add new project
   ↓
Import an existing project
   ↓
Choose Git provider
   ↓
GitHub
   ↓
Authorize / select repository
   ↓
Configure deployment
   ↓
Deploy

You select the GitHub repository containing your project.

Netlify then knows where the project's source code is located.

14. What Is a Build Command?

When deploying a project, Netlify may ask for a build command.

A build command is a command that prepares your source code for deployment.

For example, some frontend projects use:

npm run build

This may create a directory containing the final files that should be published.

However, not every project needs a build command.

A simple HTML/CSS/JavaScript project may already contain the files that should be served.

For example:

index.html
style.css
script.js

There may be nothing to build.

This is an important beginner concept:

A project can be deployable even when it has no build step.

15. What Is the Publish Directory?

The publish directory is the folder containing the files Netlify should make available as the website.

For example, a project might have:

project/
├── src/
├── public/
└── ...

After a build, the deployable files might be placed into:

dist/

In that case, Netlify needs to publish the dist directory.

For a simple project:

calculator/
├── index.html
├── style.css
└── script.js

the project root itself may contain the files that need to be published.

The important question is:

Which folder contains the final files that the browser should receive?

That folder is the publish directory.

16. Simple Project vs Framework Project

Different projects can have different deployment requirements.

Simple HTML/CSS/JavaScript

index.html
style.css
script.js

Often:

Build command → none
Publish directory → project files

A project with a build system

For example, a frontend project might use:

package.json
src/

and generate:

dist/

after running:

npm run build

In that situation:

Build command → npm run build
Publish directory → dist

The exact settings depend on the project's tools and configuration.

17. Automatic Deployments

One of the biggest benefits of connecting GitHub to Netlify is automatic deployment.

Suppose your project is already deployed.

You make a change:

Change code
    ↓
git add
    ↓
git commit
    ↓
git push
    ↓
GitHub updated
    ↓
Netlify detects change
    ↓
New deployment
    ↓
Website updated

This is called continuous deployment.

You do not have to manually upload the project after every change.

18. A Simple Example

Suppose your deployed website currently displays:

Hello World

You change the HTML to:

Welcome to my website

Then:

git add .
git commit -m "Update welcome message"
git push

GitHub receives the change.

If Netlify is connected to that repository, Netlify can start a new deployment.

After the deployment succeeds, the live website shows:

Welcome to my website

This is the basic GitHub → Netlify workflow.

19. Deployment Status

A deployment can have different outcomes.

For example:

Waiting
   ↓
Building
   ↓
Deploying
   ↓
Published

If something goes wrong:

Build failed

Netlify provides deployment information and logs that can help you identify the problem.

20. Reading Deployment Errors

When a deployment fails, do not immediately assume that Netlify is broken.

Start by asking:

1. Does the project work locally?
2. Is the correct repository connected?
3. Is the correct branch being deployed?
4. Is the build command correct?
5. Is the publish directory correct?
6. Are required dependencies available?
7. Did the build produce the expected output?

For example, if Netlify runs:

npm run build

but the project does not contain the required build script, the deployment can fail.

The deployment log usually provides information about where the failure occurred.

21. Common Beginner Deployment Mistakes

Mistake 1 — Uploading the wrong folder

You may accidentally upload:

projects/

when the actual website is inside:

projects/calculator/

Make sure the deployed folder contains the files your website needs.

Mistake 2 — Missing index.html

For a simple static website, make sure the expected entry page exists.

For example:

index.html

Mistake 3 — Incorrect file paths

A website may work locally but fail after deployment if file paths are incorrect.

For example:

<script src="script.js"></script>

must match the actual location and filename.

Mistake 4 — Case-sensitive filenames

Be careful with:

script.js

versus:

Script.js

A path that appears to work in one environment may fail when deployed.

Mistake 5 — Incorrect publish directory

Netlify may successfully deploy but show the wrong files if the publish directory is incorrect.

Mistake 6 — Incorrect build command

If the project does not require a build command, do not invent one.

If the project does require a build, make sure the command matches the project's configuration.

Mistake 7 — Expecting local changes to appear automatically

With manual deployment:

Local change
    ≠
Live website change

You need to deploy the new version.

With GitHub deployment, pushing the new commit can trigger a new deployment.

22. Custom Domains

Netlify can also be used with a custom domain.

Instead of:

https://my-calculator.netlify.app

a project can eventually be available through a domain such as:

https://mycalculator.com

This is useful for production websites and portfolio projects.

However, a custom domain is not required to learn deployment.

The Netlify-provided URL is enough to get your first project online.

23. Manual Deployment vs GitHub Deployment

FeatureManual DeploymentGitHub DeploymentEasy first deploymentYesYesUpload files directlyYesNoUses GitHubNoYesAutomatic updatesNoYesGood for quick experimentsYesYesGood for active developmentLess convenientMore convenientRequires Git knowledgeMinimalBasicDeployment triggered by Git pushNoYes

Both are useful.

For your first deployment, manual deployment helps you understand what deployment actually means.

Once you start changing the project regularly, GitHub-based deployment provides a more efficient workflow.

24. Recommended Learning Path

For a beginner, a useful progression is:

Build a project
      ↓
Test locally
      ↓
Learn Git Basics
      ↓
Publish project to GitHub
      ↓
Deploy manually to Netlify
      ↓
Understand the live website
      ↓
Connect GitHub to Netlify
      ↓
Push a change
      ↓
Watch Netlify deploy automatically

This progression teaches more than simply clicking a deployment button.

It shows how a project moves through a basic software delivery workflow.

25. From Local Project to Live Product

You can now see the complete journey:

BUILD
                  ↓
             Local project
                  ↓
                GIT
                  ↓
           Version history
                  ↓
              GITHUB
                  ↓
          Source repository
                  ↓
             NETLIFY
                  ↓
             Deployment
                  ↓
              INTERNET
                  ↓
             LIVE WEBSITE

This is a simplified version of the workflow used in professional software development.

The tools become more sophisticated as projects grow, but the basic idea remains:

Build → Version → Publish → Deploy → Share

Key Takeaways

• Deployment makes your project available for people to use online.
• Netlify can host and deploy frontend and static web projects.
• A simple HTML/CSS/JavaScript project can often be deployed without a build step.
• You can deploy manually by uploading your project to Netlify.
• You can also connect Netlify to a GitHub repository.
• Manual deployment is useful for quickly getting a project online.
• GitHub-based deployment is useful when you expect to update the project regularly.
• A build command prepares source code for deployment when a project requires one.
• A publish directory contains the final files that Netlify should serve.
• GitHub-connected projects can automatically redeploy after new commits are pushed.
• Deployment logs help diagnose failed deployments.
• Always test your project locally before deploying.
• A Netlify-generated URL is enough to make a project publicly accessible; a custom domain is optional.

Prerequisites

• Basic HTML, CSS, and JavaScript
• Basic Git knowledge
• Basic GitHub knowledge
• A Netlify account
• A completed web project

Related Topics

• Git Basics
• Publishing Your Project to GitHub
• GitHub Workflow
• Deployment Strategies
• Build Pipelines
• CI/CD
• Environment Configuration
• Client-Side Routing
• Data Fetching & API Integration

Further Reading

Netlify

https://www.netlify.com/

Netlify Docs

https://docs.netlify.com/

Netlify — Deploy manually

https://docs.netlify.com/welcome/add-new-site/

Netlify — Deploy from Git

https://docs.netlify.com/build/get-started/

Netlify — Continuous deployment

https://docs.netlify.com/build/git-workflows/overview/

Netlify — Build configuration

https://docs.netlify.com/configure-builds/overview/

Netlify — Custom domains

https://docs.netlify.com/domains-https/custom-domains/