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.
Prerequisites
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
//v16.13.1
npm -v //press enter
//8.3.0
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" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/{your_username}/{your_repository_name}.git
git push -u origin main
Check your repository on GitHub, and you should have something like this.
Create an account on Netlify and log in to your Netlify dashboard.
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.
Then, scroll to the bottom of the page and either grant Netlify access to all your repositories or select a particular repository.
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.
Drag and drop your project folder and wait for it to be published.
Conclusion
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)