DEV Community

Cover image for How to Deploy your Static Site to Netlify
Victor Oluwayemi
Victor Oluwayemi

Posted on • Updated on

How to Deploy your Static Site to Netlify

There are various ways to deploy and host static sites after you design them on your local machine. A static site is a website built with plain HTML, Javascript, or CSS code.**
Netlify is an easy way to deploy and host static web projects without buying a domain name and hosting. Netlify does everything for you.

Getting Started

In this article, you will learn how simple it is to launch your static site on Netlify. You need an account to deploy on Netlify. You will deploy a static site designed with HTML/CSS; check out the Netlify documentation to integrate other frameworks like React.js/Next.js.


To follow the instructions in each section, you'll need the following setup:

  • A code editor such as VScode.
  • Git is installed on your system.
  • An account with a Git provider (GitHub/Bitbucket/Gitlab). GitHub will be used in this article.
  • Ensure Node.js is installed. To check if Node and npm are installed, type this code in your terminal:
node -v //press enter
npm -v //press enter
Enter fullscreen mode Exit fullscreen mode

Deploy to Netlify using Github

To create a repository on GitHub, open a terminal in VScode, run each command line by line, and press enter. A git provider like Github connects your project to enable Netlify to allow continuous deployment; anytime you make changes to your project and push to GitHub, Netlify automatically redeploys your site, and the changes you make are visible.

echo "# My app" >>
git init
git add
git commit -m "first commit"
git branch -M main
git remote add origin{your_username}/{your_repository_name}.git
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Check your repository on GitHub, and you should have something like this.
Github repository

Create an account on Netlify and log in to your Netlify dashboard.
Netlify homepage

Switch to the Sites tab, click the Add New Site dropdown, and connect to your GitHub repository.
Connect to Github repository

You will be prompted to authorise Netlify to access your GitHub repositories; if you can’t find the search for a specific repository, select Configure the Netlify app on GitHub.
Pick a repository

Then, scroll to the bottom of the page and either grant Netlify access to all your repositories or select a particular repository.
Select a repository on Github

Finally, select the repository and click deploy.

Your browser will then redirect you to the site overview page, where you can look for the deployment in the list of production deploys. Select the link to open your deployed site.
Site overview page

Deploy to Netlify using Drag and Drop

Login to your Netlify Dashboard, switch to the Sites tab, and click the Add New Site dropdown. Select Deploy manually or browse to upload.
Netlify Drag and Drop

Drag and drop your project folder and wait for it to be published.


In this tutorial, you learned how to use Netlify to deploy your project (HTML or CSS) online using Github and manual deployments.
You can connect a custom domain name to your site, connect the forms to Netlify for easy management, or check the documentation to explore more features.

That’s all for now. Happy Coding!


Top comments (0)