Deploying a Static Site on Netlify

Deployment steps

To deploy a static Next.js website on Netlify, we need to perform the following three steps:

1. Push the application to a GitHub repository.

2. Create a netlify.toml file in our application's root directory. This file will tell Netlify what to do during deployment.

3. Create a Netlify site and connect it to the GitHub repository.

Creating a production build

Creating a production build is not a necessary step in deploying an application, because Netlify will run the build command during deployment. However, it does help to know how the application is built and what the build command does.

To create a production build, we can use the next build command. If our npm script has been set up in our package.json file, we can use the npm run build command.

Note: We haven’t installed next globally, so the next build command won’t work. However, the npm run build command will work because we have set it up in our project.

The next build command creates an optimized version of our application that we can use in production.

So first, let’s build our application using the npm run build command in the code widget below. After the build is complete, a new folder named .next is created. This folder contains the output that the build generates. It’s also the folder that is deployed for the users to see. To view the contents of the folder, use the ls .next command in the terminal.

Using Git to push the application to a GitHub repo

First things first, we have to create a GitHub repository to hold our application code.

Note: Adding to a Git repository only works on an empty repository. To complete the process in subsequent tries, please create a new repository to push to.

Let’s start by logging in to your GitHub account. Next, follow the steps in the slides below to create a new repository:

• Click the “Create repository” button to create a new repository.

• Add a repository name, then click the “Create Repository” button.

• Click the “Copy" icon button to copy the URL of the repository so that we can use this repository as our remote origin.

The repository URL will help us when we’re connecting the repository to our local project directory.

Now let’s take a look at how to create an access token to access our repository from the command line. This is also a fairly short process, so let’s get into it. First, go to the “Developer Settings” in the “Settings” tab. Here, we can create a personal access token for our account. Follow the steps in the slides below:

• Open the “Tokens (classic)” tab to go to the Tokens page.

• From the “Generate new token” drop-down list, select the “Generate new token (classic)” option to generate a token.

• Add a “Note” to distinguish this from other tokens, and check the repo and admin:org checkboxes to give the token the appropriate access. Press the “Generate token” button at the bottom of the page to create the token.

• Copy the access token right now and paste it somewhere for future use because it won't be visible after you move to the next page.

Now that we have everything ready, we can push our code to the repository we just created. To recap, we need two pieces of information to access the repository for read and write functions: the repository URL and the GitHub access token.

Please click the “Run” button in the code widget below to start the terminal and follow the steps mentioned below the widget.

Note: Please add your GitHub email, password, and access token to the environment variable in order to run the code successfully.

The GitHub username and email added to the environment variables are used to include the current user's name and email to the git config environment, which helps track version histories. As for the GitHub access token, it’s used to authenticate us as a collaborator of the repository. Now let’s discuss how we can add our local code to a Git repository:

• Use the git init && git symbolic-ref HEAD refs/heads/main command to initialize the current directory as a Git repository and set the name of the default branch to “main” to keep it consistent with Git versions greater than 2.27.1.

• Use the git remote add origin <repository-URL> command to add a remote origin to the directory. This will let Git know which remote repository the directory is linked to. The repository URL is the URL of the repository that we created earlier in this lesson.

• Use the git add . command to add the code in the local repository to the Git repository. We can use the git status command to see which files were added to Git.

• Use the git commit -m "commit message" command to commit the added files to the repository.

• Finally, use the git push -u origin main command to push the changes to the remote repository on GitHub. The terminal will prompt you for your email. Once you’ve entered it, it will prompt you for your password. Here you’ll have to enter the access token that we created earlier. The password you’re typing won’t be visible in the terminal, so make sure not to paste it twice.

• At the end of this process, you should be able to see the code in your repository.

Note: As mentioned earlier, adding to a Git repository will only work on an empty repository. To complete the process again, please create a new repository to push to.

Setting up the netlify.toml file

The netlify.toml file is kept in the root of the project directory. This file tells Netlify what to do during production and deployment. The following code is added to the file:

We have two sections in this file. The first is the [build] section, which tells Netlify how to build the project with command and then which folder to deploy with publish.

The second section is the [[plugins]] section, and tells Netlify which package to use for the deployment.

Deployment on Netlify

The final step of our deployment will be to create a Netlify site and deploy our project on that site.

Creating a Netlify website

Here are the steps to deploy your website on Netlify:

1. Sign up for Netlify using your GitHub account.

2. Click the “Import from Git” button to create your first Netlify project.

3. Click the “GitHub” button from the available options under the “Connect your Git provider” heading. If you haven’t connected to Git before, then you can follow these steps:

   1. Click the “Authorize Netlify” button to allow Netlify to connect to your GitHub account.

   2. Click the “Install” button and then add your GitHub password on the next page.

   3. Select the repository you want to deploy from the list of repositories.

4. Netlify autodetects the site because of our netlify.toml file. Click the “Deploy site” button at the bottom of the page.

Netlify autogenerates a site name for our website, which will also be a part of its domain. The domain of the website should look like: <sitename>.netlify.app. Once the deployment is complete, the website domain should appear in place of the “Site deploy in progress” status.

The best part about deploying on Netlify is that whenever the GitHub repository is updated, the deployed website is too, so we don't have to worry about deployment again. We can push changes to our GitHub repository, and the changes will be shown on the deployed site.