From this point on in the course, let's actually start getting hands-on with the Jamstack. Now let's create a Nux powered portfolio website with content from Storyblock. The first step to doing that will be to create a brand new Nux project. org slash getting dash started slash quick start.
And on this page I can find the command needed to bootstrap a new project. That's right here under the new project heading, and I'll just copy it, and then open up my terminal and paste it in. Once I paste it, I will backspace the Nuxtap part of this, as that's what we want our project to be called. So instead of Nuxtap, let's say Jamstack course.
I'll hit enter. Okay to proceed, yes. And just like that, we've started our brand new project. So now I'll open up the project in VS Code with the code command.
Awesome. Now inside of the built-in terminal in VS Code, I can install our dependencies and we can start up our dev server to see what we're working with. This install might take just a few seconds, so I'll fast forward things just a bit. Awesome.
Now we can run npm run dev and see our page in the browser. This is what our bootstrapped Nuxt project looks like in the browser. But let's take a quick moment to get familiar with the code as well. A brand new Nuxt 3 project is actually quite light out of the box.
ts here, which is where we'll register our StoryBlock module in just a moment. vue file, which displays a Nuxt welcome component. This is exactly what we saw in the browser a moment ago. If I replace it with some text, let's say, hello world, and save it back over in the browser, sure enough, that's what our page looks like.
Awesome. All right, so to get working with StoryBlock in Nuxt, we need to install the official StoryBlock Nuxt module. We can do that in the terminal by typing npm install at StoryBlock slash Nuxt. While it's installing, we can go ahead and inside of NuxtConfig, register our module with Nuxt.
I'll define the modules option as an array. The module we want to register right now is of course called at StoryBlock slash Nuxt. So that's just an array where the first element is the name of the module and the second argument is an options object so that we can configure how the module works. Here, I'll add in an option called access token.
And for now, we can just leave that blank. In the next lesson, we'll open up StoryBlock, take a look around, and then actually get it connected to our Nuxt project via that access token. From this point on in the course, let's actually start getting hands-on with the Jamstack. Now let's create a Nux powered portfolio website with content from Storyblock.
The first step to doing that will be to create a brand new Nux project. org slash getting dash started slash quick start. And on this page I can find the command needed to bootstrap a new project. That's right here under the new project heading, and I'll just copy it, and then open up my terminal and paste it in.
Once I paste it, I will backspace the Nuxtap part of this, as that's what we want our project to be called. So instead of Nuxtap, let's say Jamstack course. I'll hit enter. Okay to proceed, yes.
And just like that, we've started our brand new project. So now I'll open up the project in VS Code with the code command. Awesome. Now inside of the built-in terminal in VS Code, I can install our dependencies and we can start up our dev server to see what we're working with.
This install might take just a few seconds, so I'll fast forward things just a bit. Awesome. Now we can run npm run dev and see our page in the browser. This is what our bootstrapped Nuxt project looks like in the browser.
But let's take a quick moment to get familiar with the code as well. A brand new Nuxt 3 project is actually quite light out of the box. ts here, which is where we'll register our StoryBlock module in just a moment. vue file, which displays a Nuxt welcome component.
This is exactly what we saw in the browser a moment ago. If I replace it with some text, let's say, hello world, and save it back over in the browser, sure enough, that's what our page looks like. Awesome. All right, so to get working with StoryBlock in Nuxt, we need to install the official StoryBlock Nuxt module.
We can do that in the terminal by typing npm install at StoryBlock slash Nuxt. While it's installing, we can go ahead and inside of NuxtConfig, register our module with Nuxt. I'll define the modules option as an array. The module we want to register right now is of course called at StoryBlock slash Nuxt.
So that's just an array where the first element is the name of the module and the second argument is an options object so that we can configure how the module works. Here, I'll add in an option called access token. And for now, we can just leave that blank. In the next lesson, we'll open up StoryBlock, take a look around, and then actually get it connected to our Nuxt project via that access token.