# Netlify

Netlify is a platform for building and deploying websites and web apps. It builds your site from your Git repository on every push and serves it from its global CDN, with serverless functions and support for server-rendered frameworks too. Their free plan works well with DatoCMS, so it's an easy place to start.

**Warning:** this guide assumes you have a working website project on your machine integrated with DatoCMS. If it's not the case, you can head over the [main documentation](https://www.datocms.com/docs/general-concepts.md) to see how to properly configure the DatoCMS administrative area and how to integrate it with your favorite framework.

### Step 1: create your Git repository

Create a new repository on [GitHub](https://github.com/new). To avoid errors, do not initialize the new repository with README, license, or gitignore files. You can add these files after your project has been pushed to GitHub.

Terminal window

```bash
$ git init
$ git add .
```

Commit the files that you've staged in your local repository.

Terminal window

```bash
$ git commit -m 'First commit'
```

At the top of your GitHub repository's Quick Setup page, click the clipboard icon to copy the remote repository URL. In Terminal, add the URL for the remote repository where your local repository will be pushed.

Terminal window

```bash
$ git remote add origin YOUR_GITHUB_REPOSITORY_URL
```

Now, it's time to push the changes in your local repository to GitHub.

Terminal window

```bash
git push -u origin main
```

Now that your project is up and running on GitHub, let's connect it to Netlify.

### Step 2: connect your repo to Netlify

Creating a new site on Netlify is simple. Once you've logged in, you'll be taken to [https://app.netlify.com/sites](https://app.netlify.com/sites). If you're just starting out, there's only one option:

(Image content)

Clicking "New Site" brings you to this screen:

(Image content)

Once you click on the "Link to GitHub" button, it will present the following screen:

(Image content)

Click the "Authorize Application" button to let Netlify read the list of your GitHub repositories. Like it says in the image above, Netlify doesn't store your GitHub access token on their servers. Once you've connected Netlify and GitHub, you can see a list of your Git repos. Select the one we just created:

(Image content)

The next screen is extremely important: it's where you instruct Netlify to build your website:

(Image content)

Depending on your framework, the **Build command** and **Publish directory** fields need to be filled with different values. In the *Site Settings*, make sure you add your DatoCMS read-only token as a `DATO_API_TOKEN` environment variable:

(Image content)

You can find your API token in the *Settings \> API tokens* section:

(Image content)

Once everything is ready, press the *Build your site* button. Netlify will run the build process for the first time and you can watch the progress of the operation.

(Image content)

Once the build process is finished, Netlify will publish under a temporary domain the directory specified earlier. Now every time you push some change to GitHub, Netlify will repeat the build process and deploy a new version of the site.

(Image content)

### Step 3: connect Netlify to DatoCMS

There's only one last step needed: connecting DatoCMS to Netlify, so that every time one of your editors presses the *Publish changes* button in your administrative area, a new build process (thus a new publication of the final website) gets triggered.

(Video content)

Let's go through the process step-by-step. First, go to *Settings \> Build triggers*, add a new build trigger and select *Netlify*. The Netlify authorization window should pop up:

(Image content)

On the new window that pops up, click on "Grant Access" to allow DatoCMS to set up the auto-deploy mechanism and select the Netlify site that you want to link to DatoCMS, so that a number of bi-directional hooks will be configured:

(Image content)

You can specify which branch of your Git repository you want to link and build with the build trigger you're creating:

(Image content)

When everything is done, confirm the integration pressing the **Save Settings** button.

## Related content in "Hosting & Deployment"

- [Hosting and CI Building Solutions](https://www.datocms.com/docs/hosting-and-deployment.md)
- [Netlify](https://www.datocms.com/docs/hosting-and-deployment/netlify.md)
- [Vercel](https://www.datocms.com/docs/hosting-and-deployment/vercel.md)
- [GitLab CI](https://www.datocms.com/docs/hosting-and-deployment/gitlab.md)
- [Custom webhook](https://www.datocms.com/docs/hosting-and-deployment/custom-webhook.md)