Deploy Your Digital Garden on Netlify
Your Nuxt project is finished! Now it's time to share it with the world. Here, you will run through deploying your digital garden through Netlify's command line in the terminal.
Instructor: [0:00] It's time to deploy our digital garden so that other people can visit and read our amazing notes. We'll do that using Netlify.
[0:06] If you don't have an account already, you can go ahead and click Sign-Up to go ahead and create a free account, and it won't cost you anything. Then I'll go ahead and assume that you know how to create a repo and add all your code to that. That's what you'll be connecting to Netlify.
[0:19] To deploy, I'll be using the Netlify CLI, which makes things really easy to manage at the command line, so that you don't have to worry about clicking through a bunch of menus. If you don't have it already, you can install it by running npm install -g netlify/cli.
[0:32] Once you have the command line, inside of your terminal, you can go ahead and run Netlify login to make sure everything is hooked up correctly. As you can see, I'm already logged in. We'll go ahead and move on. Next, let's run the command, netlify init. What that will do is that'll kick off a process for getting our site deployed.
[0:47] If you have multiple teams, like I do here, make sure to go ahead and select the correct one by using the arrow keys. Then, we can go ahead and define a unique site name that will actually be deployed as the URL. In my case, I'm going to call mine Ben's Egghead Digital Garden. That will be deployed at Ben'sEggheadDigitalGarden.netlify.app.
[1:09] Next, we have to define our build command, but you'll see that Netlify CLI already detects that we're using Nuxt so it already pre-populates Nuxt Generate. All we need to do is hit Enter and then it knows that we're going to deploy from the disc so hit Enter again.
[1:22] Then we'll use the default Netlify functions folder. Don't worry about that, but we'll leave it as default so hit Enter again. Then finally, let's go ahead and create a Netlify.Tamil so that you can actually see the configurations and we'll make that, yes.
[1:33] Once that is configured, I'll go ahead and commit the changes. Then to show you, Netlify.Tamil just contains basically all the configurations that we just defined. If you need to make changes in the future, it's just as easy as coming into this file.
[1:46] With that, all we need to do now is push our code into our repository. Once we do that, we can actually check on our deploy by running the command Netlify open. What that will do is open the specific instance for our site.
[1:58] You can see here, Ben's Egghead Digital Garden is open without me having to navigate anywhere, which is very convenient. You can check on your deploys here under the deploys tab. Then once it's done, you can see, I can click on the URL and look, Hello Egghead.
[2:14] If we go to /notes, we see everything there and we can click through and everything works exactly as we expect. With that, congratulations. In this course, you've learned how to use Nuxt content in order to turn your code base into a git base headless CMS in order to manage your content.
[2:32] You learned all the core concepts you need in order to build an amazing digital garden using Nuxt, Vue, and you even learned how to deploy it using the Netlify CLI. Great work. I look forward to seeing all of your notes on the interwebs.