How to deploy a website to Netlify
This is a beginner level tutorial on how to deploy a static site to Netlify. It assumes basic knowledge of HTML and CSS and familiarity with Git and GitHub.
So you have built a website and are now wondering how to get it from your computer and onto the world wide web. Maybe you have completed one of our HTML & CSS tutorials and are trying to show off the results to your friends and family, or perhaps you are looking to host your personal website online. Either way, deploying a site for the first time can be an intimidating experience, but it doesn’t have to be that way.
Enter Netlify. Netlify is a tool that provides an intuitive online interface for deploying websites in just a few clicks. What’s more, it’s completely free for unlimited projects for one person, making it ideal for personal websites and small projects.
To deploy your site, you will have to commit your code into a git repository and push it to the git hosting provider of your choice (such as GitHub, GitLab, or Bitbucket). I will use GitHub as an example in this tutorial, as all codebar code is hosted on GitHub. If you don’t know how to use git or GitHub, take a look at codebar’s handy git tutorial, or try try.github.io.
Once you have pushed your code to Github, you are ready to deploy your site. The first step is to visit the Netlify Create a new site page: https://app.netlify.com/start. Don’t worry if you haven’t got a Netlify account yet, you will create one as part of this process.
In the Continuous Deployment section, choose the git provider your code is hosted on, in our case GitHub. At this point Netlify will ask you to authorize access to your GitHub account. Once you have given permission to Netlify to access your GitHub repositories, it will ask you to choose the project you want to host (as an example I’m deploying my own personal website):
The next step is to tell Netlify which branch to deploy from. In git the default branch is called master, use this unless you explicitly want to deploy another branch, in which case choose from the dropdown. Netlify has built-in continuous deployment support which means every time you push code to your chosen branch Netlify will re-deploy the site and your changes will be available right away. This neat feature allows fast iteration on your website and makes it a breeze to keep it up to date.
If you built your site using a static site generator (such as Gatsby.js, Jekyll or Middleman) you will also have to specify two more options. Build command is the command you use to build your static files (such as gatsby build, jekyll build or middleman build). Publish directory is the directory where your generated files are located (such as public/ or build/). You can ignore the advanced settings.
Once you have filled out all the required settings, hit the Deploy site button. In a few short minutes your site will be available at a public URL provided by Netlify. If you’d like to change this URL to something more sensible, for example [your_name].netlify.com you can do so under Settings / General / Site details, by clicking the Chang site name button. That’s it, you are ready to share your work with the world.
That’s not all
Netlify provides a super simple deployment process but it has a number of other powerful features. You can add a custom domain to make your site available at the domain of your choice. Securely exchanging information on the internet is important, so Netlify provides each site with a free and automatic TLS certificate. You can even add dynamic functionality such as forms to your site directly from Netlify.
