Welcome to part 9 of this tutorial series. This is the final part and in this bonus part of the series we will take a brief look at how to deploy our website to the internet.
This will span several topics, some of which deserve their own tutorial series, so I’ll try to explain each one as best as I can, but you may have to do some additional research on your own to fully understand each step.
On the other hand, if you are already familiar with Git and GitHub, this will be quite easy for you and you can just skim over the explanations and follow the steps real quick.
Let’s get started! 🚀
Step 1: Create a production build
The first thing we need to do is to create a production build of our website. This is a build that is optimized for performance and is ready to be deployed to the internet. We don’t technically have to do the build step ourselves, but it is likely there will be some kind of error during the build process (which is totally fine), so it is good to do it locally first to catch any errors.
To create a production build, run the following command:
npm run build
And here is my terminal output:
Actually, that was successful the first time around! If you get any errors, it will tell you what file it is and give you a specific error message. You can check out the specific file and also Google the error if you need any help figuring out what was wrong.
In my case, we can see it Compiled successfully, though it is warning us about the use of the <img> element as there is a more optimized version in Next.js. We can ignore this for now, but if you’re going to use a lot of images that you host yourself then this is something that could be optimized. As you probably used the same code as me, your code is likely also building without any errors, but if not, don’t despair. You will get it fixed! 🛠
Step 2: Creating a Git repository (not GitHub)
The next step is to create a Git repository for our project. This is a version control system that allows us to keep track of changes to our code and collaborate with others. We will not be using GitHub for this step (that is the next step), but we will be using Git itself. If you don’t have Git installed, you can download it from here. Make sure you download and install the correct version for your operating system.
If you’re not familiar with Git, you can think of it as a way to save snapshots of your code at different points in time. This allows you to go back to a previous version of your code if you make a mistake, or if you want to see how your code has changed over time. It also allows you to collaborate with others on the same codebase, by merging changes together and resolving conflicts.
You don’t need to understand Git in depth to follow along with our deployment here, but if you are interested in becoming a developer and not yet familiar with Git, it is a good idea to learn it as it is an essential tool for software development. Everyone and their dog uses Git in the web and software development fields, no kidding! 🐶
So assuming you already had or now have Git installed, let’s initialize a Git repository in our project folder. To do this, run the following command:
git init
This will create a new Git repository in your project folder. At this point the repository is empty. Before we commit any files to the repository, the first important step is always to create a .gitignore file. This file tells Git which files and folders to ignore when tracking changes to your code.
This is important because there are certain files and folders that we don’t want to include in our Git repository, such as the node_modules folder (which contains all of our dependencies) and the .next folder (which contains the output of our build process).
The reason is that anyone who needs to use this code repository can simply run npm install to install all the dependencies, and npm run build to create the production build. So we don’t need to include these files in our repository.
Luckily for us, Next.js already includes a .gitignore file in the project template, so we don’t need to create one ourselves. It also includes the .env.local file where we stored our API key, so you don’t have to worry about your API key being included in the code repository either. You can check out the .gitignore file Next.js created for you in your main project folder:
As you can see it is basically just a list of the files and folders to be ignored by git, hence the name .gitignore. If you ever need to add more files or folders to be ignored, you can simply add them to this file. If the file doesn’t exist, you can always create one and it will be auto-detected by Git.
Now that we have our empty repository and our .gitignore file in place, we can add all of our files to the repository and make a commit, which is a snapshot of our code at a specific point in time. First make sure your terminal is in the root of your project folder, and then run the following command:
git add .
This will simply add to the Git repository, all the files and folders in the current directory and all subdirectories. The . is a shorthand for the current directory. (So make sure you are in the root of your project folder when you run this command.)
If you accidentally made a mistake here, you can remove all files from the staging area by running git reset without any arguments. At this point, we don’t have a real commit yet, we just added the files to the staging area which means we are planning to commit them. If you want to see the staging area you can press the Git icon in VS Code on the left-hand sidebar and you will see something like this:
In your case, the list will display a lot more files and folders than in this screenshot. You can see that in my case I already made a bunch of commits and the only changes in my staging area are updates to this tutorial file I was writing at the time of this screenshot. 📝
So the staging area is showing us what we plan to commit. In order to actually make the commit or snapshot of our code at this point in time, you can either type a commit message in that Message box above the big blue button there and then press the big blue Commit button, or you can do it in the terminal by running the following command:
git commit -m "Initial commit"
In this command the -m flag stands for message and the message in quotes is the message you want to attach to the commit. This message should be a short description of the changes you made in this commit. In this case, we are making the initial commit, so we can just write “Initial commit” as the message. In subsequent commits you would typically write a small description of the changes you made in that commit compared to the previous commit.
Step 3: Pushing to GitHub
Now we have a Git repository with our code in it, but it is still only on our local machine. In order to deploy our website to the internet, we need to push our code to a remote repository. This is where GitHub comes in. GitHub is a website that allows you to host your Git repositories online so that you can access them from anywhere and collaborate with others on the same codebase.
If you don’t already have a GitHub account, you can sign up for one at github.com for free. Don’t worry, you don’t need any paid account or plans here, a free account will do more than fine!
So make sure you have an account, log in to GitHub, and then find your way to your main profile page. Now click on the + icon in the top right corner and select New repository from the dropdown menu like so: