>> Hey, my name is Jay Gordon.
I am a Cloud Advocate with Microsoft Azure.
Today, I want to show you how
to create a static app with Gatsby.
If you want to follow along
and do even more than this demo
that I'm creating, you can go ahead
and head over to the Microsoft Learn module.
It's under the Static Web Apps,
and make sure you get the link
in the notes for this video.
Static websites,
they've been around forever.
You can easily install Gatsby,
which is a static site generator in your terminal.
Let's go ahead,
let's open up a new terminal here in VS Code.
To install it globally,
we can just run this command
of npm install gatsby -g.
There's three commands
that'll get us started.
We can just type gatsby new demosite.
Then if we had a GitHub URL,
we can add it.
Now, I actually do have
a site right here and it's for us.
Now, I'm just going to clone this repo
that I've already created rather than
build a new scaffolding.
Like I said, you can go ahead and start
with a brand new scaffolding.
But let's get through the demo quickly.
We'll go on to gatsby-starter-blog.
One of the things you can see within here,
there are all these different pages,
gatsby-config, gatsby-node.js, styles, components.
React components are in the slash pages.
Those will become routes,
and then become pages.
Let's open it up.
We'll open our folder.
Cool. We've got our folder here.
We can see that there's this content directory.
Within that content directory
is what actually will eventually
turn into the pages.
You see each post has its own
individual directory and a Markdown file,
and within that Markdown file
is where you can actually make
your updates to your blog post
and that's what we're going to do.
Before I actually start our development server,
what I'm going to do is just run NPM install.
That will install any of the required
node modules that are going to
be able to power our new Gatsby website.
That ran, and now let's go ahead
and type gatsby develop,
and so that's going to bring up
our development server.
You can see our Gatsby blog
is now available, let's go to it.
You can see right here
written by Jay Gordon a friend to dogs.
You can follow me on Twitter,
and then just some real basic posts.
If we go to New Beginnings,
we can actually take a look at it right here,
and there is the New Beginnings portion.
Now, to take this to production,
we're going to want to move it into Azure.
We are going to want to use
the Static Web App service.
What I'm going to do
is we've made these changes here.
I'm going to just git add,
git comit minus m.
New update is what we'll give it
as a comment.
Git push, and so now
it's going to push our changes up here.
Once we've done that,
now we can actually go here,
Static Web Apps, right here at the top.
Click on "Static Web Apps",
and we'll create a site.
We'll create a new resource group.
What's a resource group?
It's a place for our resources.
I'll just call it gatsby-blog, "Okay".
Hosting plan.
We've got two options.
Free, for hobby or personal projects;
or standard, that'll actually cost you money.
So we're going to stick with the free one.
We can pick the location
that we want our site to live in.
I'll pick East US 2 because
that's the closest to me.
Now, we can actually pick
the GitHub account where
it's going to be pulled from.
We could use other ones
such as Azure DevOps,
but you have to do that after it's created.
The GitHub workflow as you can see,
it'll go ahead and it'll authorize you,
require you to authenticate.
We've authenticated with GitHub,
and now what we're going to do
is give it a name.
I'm just going to enter jaygatsbyblog.
Now, after we've gone ahead,
we've logged in through GitHub,
you'll see we have the options to go
ahead and pick our organization.
That's my jaydestro, the repository,
and then we'll go here, gatsby-starter-blog.
Then we have the ability to pick our branch,
we're going to pick main.
Now, it's going to ask for build details,
and this is where we can actually select
all these different types of frameworks
that are available and we're going to use Gatsby.
Gatsby is going to be where exactly
our static site generator is going to look.
It's going to able to render the pages,
so we'll go ahead and we'll take a look at.
We've got our application, it's slash.
That's the root of where our app
is going to exist in our repository.
Our API locations,
if we were using an API for Azure
functions along with the Static Web App,
we would put the location of this API.
We're not going to do that today,
we're just doing a simple demo.
I'm going to go ahead and click "Create",
and it'll start the process of deploying it.
What's happening during this deployment?
Well, this is the Azure deployment.
This isn't the GitHub Actions deployment.
We need to go ahead
and go to the resource,
and we can see we've got
our resource group,
our subscription, subscription ID,
the URL that I mentioned
that would be created.
If you click on it right now,
you can see it's instantly available.
But it's got this demo page on here.
This demo page isn't really going to help us.
We want our deployed page.
To find our deployment,
we can see GitHub Actions run,
and that's where this workflow file
has been added.
Let's go to GitHub Actions run.
We can see that there's actually
an event going on to build our site.
Why don't we take a look?
If we go back to the URL,
we'll see new update.
That's everything today.
I hope you've learned a whole lot
about using Azure Static Web Apps
and how to create a static site using Gatsby.
Make sure you check out
this learn module where you can take
all these skills and use them here,
or you can head to my GitHub repository
that I'll put in the notes,
and you can just fork this,
use this as a template,
and copy, and update this yourself.
Thanks again.
Once again, my name is Jay Gordon.
See you next time.
[MUSIC]