Posted in Web Development

Deploy Static Site on Netlify

How to deploy a static or JAMStack site on Netlify for free

Deploy Static Site on Netlify
Photo by Ilya Pavlov / Unsplash

If you have a static website, built using Gatsby, Hugo or other SSGs ready for deployment or you want to make your already fast static website even FASTER by CDN (Content Delivery Network) based distribution for FREE then Netlify can be your best choice. Netlify provides an easy to use graphical interface to help us deploy our static sites and most importantly they offer a starter package which is free and doesn't require any credit card information. Their free package is more than enough for most of static sites out there.

How to Deploy a Static site on Netlify

Firstly, you need to create a free account on Netlify here. After successful sign up and email verification, Netlify will redirect you to their dashboard. There, you can see the Starter package offerings and limits for bandwidth usage, build minutes, concurrent builds and team members' count. Those limits are more than enough for many of the static sites.

Considering that, you have your static site running locally without any build error, you have to push the site to your Github/Gitlab/Bitbucket repository.

How to push the source code to Github/Gitlab/Bitbucket:

  • After logging in to your Github/Gitlab/Bitbucket, you have to create a repository/project.
  • In your local computer's project directory, run this commands:
git branch -m main
git remote add origin git@gitlab.com:<YOUR_USERNAME>/<YOUR_REPO_NAME>.git
git add .
git commit -m "Initial Commit"
git push -u origin --all
git push -u origin --tags
  • Once your remote git repository is ready, go back to Netlify dashboard and click New site from Git button.
  • Authenticate your remote Git account with Netlify.
  • You will see the list of repositories, select the repo you want to deploy.
  • In the site deployment settings window, enter the branch as main (it should be already entered).
  • In the build settings section:
  • Click Deploy site.

After that, you will see Build processing status in your Netlify dashboard. Once the build is complete, Published status will be shown in your site's Production Deploys list. Also a automatically generated public URL be shown for your site (you can change it). Click on the link, and your site will be there, LIVE and PUBLIC!

If you want to add Graphical CMS in your site to manage contents, Read this: