Deploying Astro

[00:00:00]
>> So this is the page that shows all the places you can deploy an Astro site. And like I said, you can deploy virtually anywhere. Because by default, an Astro site is HTML and CSS and like client-side JavaScript, any CDN is a great place to deploy an Astro site.

[00:00:18]
So if your company has some kind of like cloud storage and S3 bucket or you're using Azure or Google Cloud. If you've got the ability to do an S some equivalent of a storage bucket and a CDN, you're good to go. You can deploy an Astro site, you don't need to get special infrastructure, you don't need to provision new deployment servers, or new environments, or anything like that.

[00:00:43]
You just put it up on your CDN that already works. It's gonna be great. This is a trick that I used over and over again when I worked at IBM. Static sites don't have to go through the same kinds of rigorous deployment reviews. So you can just ship something and not fight with everybody else on your team about whether or not it's secure.

[00:01:00]
Because HTML, CSS, they're just secure. You can't hack an HTML file, you can deface it but like you're not getting through to the server. [LAUGH] So you have a lot of options with Astro built in and once you've built the assets, you can just deploy them wherever you want as long as it has support for that static files.

[00:01:22]
The most common options I've seen are tools like Netlify or Vercel, render Cloud flare pages and AWS. But you've got a lot of options. You can use any one of these or roll your own if you want. If you are interested in building one of these, if your company is a hosting provider and you want to run Astro, the code under the hood for one of these is not super intense.

[00:01:46]
You just have to tell Astro how does the server work and this is what it looks like. So these are all open source you can go find, I think they're all open source, you can go find them and check them out. I'm gonna be using Netlify today you are welcome to use whatever your favorite is we're going on preferences, not this is what I enjoy, not like a dogmatic choice.

[00:02:07]
I don't care, you do you. So the way this actually works is we've got that Astro CLI again. And so I'm just gonna run, let me collapse this down, and we're gonna open up the command line here. And I'm going to say npx astro add netlify. And it's going to ask me if I want to install this package.

[00:02:31]
And I do. And then it's going to ask if I wanna update my config, gives me a Netlify adapter and I do. And that's kind of it on the Astro site, it's ready to go. So then I'm going to commit my changes, so we're gonna git add everything and we'll git commits and say, site ready to deploy.

[00:02:59]
I'm gonna push that up. And so, we're on the workshop branch, so what I'm gonna do is if you haven't forked it yet you can actually GitHub repo fork to get your own copy and it's going to allow you to create a new fork of the repo. Would I like to add a remote?

[00:03:20]
Yes, I do. So then I'm going to git push origin. Actually, I'm gonna rename this to main just for the sake of not having to like go specify a specific branch. So I'm gonna call this branch main and then I'm gonna git push origin Main. And if I go to that repo now, so github.com.

[00:03:47]
jlengstorf and then I've got astro-frontend-masters, I now have this, this is the repo, this is what we pushed up and it's ready to rock. So from there I can get over to the Netlify site. So, over to app.netlify.com I don't know why collapse that down. And I can add a new site, so I will import an existing project let's say you get something in from Git and I'm gonna click GitHub because that's where I sent everything and I can search for Astro.

[00:04:27]
I have a lot of repos so this takes a while. And here's the one. Okay, so it's gonna deploy this main branch. It would let me deploy any of the others if I wanted. And it auto detected that this is an Astro site, so I don't have to change any settings, I can just hit deploy.

[00:04:49]
And now it's gonna do its deployment thing and this should take about 30 seconds all and I think. And that 30 seconds includes all the setup and tear down of, of the Netlify servers. I wanna point out if I can get it to hold still. This building, the Astro site itself took 1.08 seconds.

[00:05:20]
Now granted we're not like this is, with the products and the blog and everything, we're looking at maybe like 10, 15 pages tops. But it's pretty dang cool that this just works, right? It didn't require us to do a lot. It's very, very fast. This is powered by Vite, under the hood.

[00:05:42]
So we get a lot of that just screaming fast performance that Vite is supplying for folks. And that is all the way done. So let's see, how long did this take total? Remember, this is our first deploy. So 25 seconds with no cache, no nothing. It's just very fast to deploy Astro sites.

[00:06:02]
And the slowdown will come in as you start to add more and more complex queries and you're parsing more and more data as part of your deployment pipeline. So you can make anything slow. But the thing I like is that by default, these deployments are extremely fast. And now that we've got that, there we go.

[00:06:22]
We're live, we're in production. So this is now up live at Stupendous Halva And then this hash.netlify.app.