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:
  • Base directory: Leave empty or select the root directory of your source code.
  • Build command: type the build command specific to your project. for example, hugo for Hugo based site
  • Publish directory: The directory where output static files should live. public in most cases.
  • 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:

Add Graphical CMS to Your Static Site
Add Netlify CMS to Your Static siteI will focus on Hugo static site generator’s implementation in this article. But, the methodology are almost similar for every other SSGs out there. If you have a static site integrated with a marketplace theme or your own theme, then skip the next step