Introduction to Astro: Building Fast Static Websites

Astro enables fast, static site generation, ideal for blogs and portfolios without frequent updates.

### Introduction to Astro: Building Fast, Content-Driven Websites
* 👩 "Astro is designed for content-driven websites, which means it works best for **blogs and portfolio pages** that don't require **constant updates**."
* 🌐 Unlike dynamic web applications that rely on databases, Astro compiles content into HTML, resulting in **faster loading times** by **eliminating latency and processing requests**.
* 📄 The Astro.co website provides various themes and templates, allowing users to create diverse sites using **Markdown** without needing to write **HTML**.
* 🛠 Users can utilize platforms like StackBlitz, CodeSandbox, and GitHub Codespaces for development, with GitHub Codespaces offering the advantage of **automatic saving** and a **streamlined setup**.
* ☁ Deployment can be easily managed through Cloudflare, which connects to GitHub and **automatically updates the site whenever changes are committed to the main branch**.
* 🔗 Cloudflare also offers domain registration at competitive prices, often **cheaper than other providers**, making it a practical choice for those looking to **establish a personal domain**.
* 📈 Astro's server-side rendering generates **smaller, faster-loading web pages**, making it ideal for sites with **less dynamic content**, while still allowing integration with **external services for dynamic features**.
* 💡 The use of tools like Lighthouse can help assess website performance, ensuring **high rankings in search results** based on **speed and user experience**.

Okay, by show of hands, who wants to follow along today? Great! Okay, thanks for bringing your laptops. This will be really fun. Um, what I'm going to show you is actually only going to take like 10 minutes if there are no questions, so we're going to

go slow, make sure everybody's on the same page, and feel free to ask questions in between. So, who knows what Astro is? Raise your hand if you've heard of it or you know kind of what it is. Austin, I know I heard you talk about it.

So, sure. No, you're talking about something else. Oh, what's your name?  Atin? Yeah, that's what I said. Okay, cool. So, basically, you know, they they talk about this as content-driven websites. So what does that mean? So if you go to like

a dynamic web application, it needs to have a database; it needs to be refreshing and constantly changing. This is more for something like a blog or a portfolio page that's changing maybe less than every hour, right? So blogs are great because they kind of have static content; once you write an

article, it's up there; it's not going to change a lot. And you can basically just compile all of your site into HTML and then have a server serve just the HTML. So then you take out all the latency and slowness that goes along with

databases and, uh, you know, processing requests and looking things up and having logic. And so your site is going to be extremely fast. So that's basically what it is. So let's go to this page. Um, this is where you'll want to follow along; the website

Is Astro.co all right? So basically, the idea with Astro is they have a lot of what they call themes or templates, and with those you can create all different kinds of sites. You can use Markdown to actually create the content, so you don't even need to use HTML or...

HTML and so on. On this page, you can kind of see all of the templates, and they have tons more things that you can do. Okay, so would you guys rather me do a portfolio or a blog page? Portfolio. Portfolio. Okay, let's do it. So

basically, there are two options for you. You can open in StackBlitz; um, well, actually, let's let's go into the 'View repo'. So go ahead and click on 'View repo', and once you get in here, it's going to give you three options you can do:

StackBlitz, CodeSandbox, and GitHub Codespaces. The advantage of GitHub Codespaces is that if you have a GitHub account, you can automatically save everything there, and um, basically, it's an all-in-one setup for you. So let's... Gitpod is different; so GitHub's...

they're competitors. So GitHub created this thing, Codespaces, and the idea is when you launch it, you're launching an IDE and a remote server that can run all your code and let you edit the code and show you what it's going to look like without installing anything on your

system. Um, Gitpod is basically the same thing, but it's an independent company called Gitpod. And uh, the nice thing about uh GitHub is that toward the end of the presentation, what we're going to walk through is how to deploy the site. So if

If you have an account on cloudflare.com, you can deploy today, or you can sign up—it's pretty quick. Uh, regardless of what kind of plan you want for hosting this kind of site—a blog or a portfolio site—it's free, so they

have a pretty generous free tier with Cloudflare, and they basically connect to GitHub. So if you have your GitHub repository saved and it has your Astro site in it, you just go to Cloudflare and connect it. Anytime there's a commit to the main branch, it

will run Astro, generate your site, and host it all for you. So it's really sweet. And then another thing you can do with it is—Cloudflare sells domain names, and their kind of mission is to sell them at cost. So if you go to GoDaddy or any of those, they're going to be like twice as much. So that's an advantage, too, if you want to get a domain that's specific to you, that has your name in it or whatever. Okay, so I haven't tried this

in a browser, so hopefully everything is going to work. Okay, so GitHub Codespaces. So basically, with a Codespace, um, you can actually open it for any repository. So you might notice on any repository there's a button at the top right that's green, and you can

use it to check out, but it also allows you to create a Codespace from that repository. And what happens is that Codespace generates a container on the server, and it lets you save your files there and it keeps them saved. And then if you want to push those changes,

To the repository, there's a place to commit them, and they'll go into the repository. So you could, uh, use this permanently to have no programs on your computer and just do it through the browser. You can have your own site hosted and generated automatically and deployed.

Automatically. Um, any questions so far? You're saying that this was, um, like a comp toy? Or... yeah, so there's two things we're going to be using today. Um, through the CodeSpace, we're going to be doing the editing, and that should be free. They

have, uh, higher cores that you can get if you have a plan, so your server will be a little faster. And then for deployment, we're going to use a service called Cloudflare. Yeah, so Cloudflare is really easy to manage, um, and I've used

it for a long time and it's so great. Okay, so let's, uh, I guess we're kind of in the West, so we'll do US West, and we'll just create CodeSpace. This will probably take a couple of minutes. Um, any questions while this is spinning up?

Hopefully you... you've clicked this and well, and you've got it going. Yeah, they have a free tier. Yeah, it's a free tier. Yeah, as far as I know, when you use a CodeSpace, it can't accidentally rack up charges, because especially because

the virtual container is only active until you idle out. So you don't have to worry about turning it off or anything; it'll just turn off whenever you're done. Um, I've used, like, Gitpod, for example, and their tier is pretty good as well.

But some of the other ones, they're pretty terrible about telling you when you're done spinning up a new one. And you can see from this, it does take a little while. Let's see, how can I hide this? You got it. Okay, sorry, did you get

the portfolio? Remember the Showcase section? Or what? Yeah, so in the Showcase section, we clicked on the "View on GitHub" link, and then we clicked on "Open in Codespaces." And I really don't know how to... uh... hide this. Does anybody know, by

chance, is that what you meant right there? Oh, no, hold on. We go... well, then I won't be able to click on anything. Oh, go... I'm floating meeting controls. Okay, press Escape. Okay, okay, cool. No Escape. Okay, so who has used VS Code before, because that's what's popping up

here? Great. Okay, so the nice thing about VS Code is that it's written in web technology. So when you run it locally on a desktop app, it's actually using Electron to render it as a web page. So when you pull it up in a Codespace, or

on Gitpod, or wherever you're using it, it automatically is... uh... the exact same. So you'll enjoy the same features whether you're using it on the browser or you download the desktop app. Okay, let's make this bigger. Okay, perfect. Uh, actually, yeah, I'll make it a little smaller.

Here. All right. So you can see, as part of this repository, it has a special file in it that tells Codespaces what to do. So it checked out the repository for us; we're in the repository, looking at the files on the left. We have one single

Page or file open to edit, and then down here we have a terminal. So it automatically opens the terminal, it automatically ran this command `astro dev`, and it automatically put a browser over here. So we're like, a browser within a browser here, and you can actually see

what the code is doing. Um, if you are not in this situation and you're not using this browser, you can go to, for example, this localhost address.  It would let you view it also. Uh, that's helpful if you have like a second screen or whatever you want to

have the site in one screen and the code in another screen. So I'm going to make this smaller, but basically what's going to happen is it's watching for file changes. So anytime we change a file, it's going to automatically rebuild and it's going to update the tab

on the right that shows us what it looks like. Okay, any questions so far? Yes, there is. So if you come into extensions, it's just called Astro. So, and that's a good point to bring up here—right here you may notice this

looks a lot like JavaScript or TypeScript, and it is. And then down here, this looks like HTML or JSX, and it is. The difference is, if you have ever used React, that you have a component file—this is the Astro file.  Do Astro, so component file

would import and do these things in it, but then it would have a function that returns this content. So basically, the only thing special about Astro is that it starts with the `---` at the top. And then once you've done all of the code imports and logic that you want to

Do you just do another dash-dash-dash, and then after that, all the content after that is what gets rendered? So that's sort of how these files work. You actually don't even need to edit this file, though, unless you get a little more into changing the structure of the website or something like that. Any questions on that? Okay, great. All right, so you can see this is functioning; it's got a little dropdown here. I'm guessing that because our window is so small, it's...

We make our window bigger. Yeah. So on a bigger browser tab or browser window, you see kind of this nice thing here, and you can see how fast the pages are loading. It's loading up plain HTML, and so it's just pretty much instant, which is really nice. And this template comes with a light-themed, dark theme, that's kind of cool. Okay. All right, so let's go ahead and change this right here where it says "My name is" and the place you want to go to...

Where all the content is is called "content," and inside "content" you'll find configuration. You probably don't have to do anything with this. This, for example, defines that we have a collection called "content." In a blog, you'd have a collection called "posts"; you might have a collection called "pages." Astro calls these collections...

...and basically, it would be the website/pages or /blog or /post or whatever you can determine where it's going to be at. Okay, so inside of "content," we have one called "work." So let's see what we have in here if we can find the main page here. And actually, I wonder if it's in...

Here, yeah, yeah. So actually, this homepage is in the index.astro, and then we'll get into clicking on some of these pages down here, and we'll go to markdown files and we'll show how to edit those. Okay, so let's first change this.

So my name is... Okay, so I've made a change. It actually is changing; it's actually saving after I stopped typing for a little while. Um, you can turn that off if you want, but it's pretty cool. What should we say for the tagline? Okay, all...

right. Um, and then yeah, this one here has: Home, Work, About. Okay. Okay, so we've edited this page. Great. Let's go and... yeah, let's edit this one. So I'm going to click over to this page so we can see what it looks like so...

This is just the main page, and I clicked on Work, and then on the Work page I'm clicking on this particular page. Okay, so you can see we have kind of this header here, so it's got a built-in header that stays there all the

time. And then let's look over here; we have one called Bloom Box. So this is going to be the content. Okay, so for the markdown files, there's actually something similar to the Astro files. So you can see that there's three dashes at the beginning,

then you have all of this metadata about the page. So you have like the page title, and that will show up in links and in the title of the tab. Um, you can have a publish date and modify date. You can specify an image to use as a representation of the

Page. I think it's—it might even be for SEO, too. And then you get this field description, and so on a listing page, like a list of your blog articles, it would have the description underneath. You can give it some tags, and the blog ones, for example, have a tag

page where you can click on a tag—tag—and I'll show you all the pages with that tag. And then we've got the closing three dashes. So the top part, where it's in between the three dashes, that's not going to display on the page

anywhere. What happens here is, um, we have the content in this. So actually, maybe what I should say better about this is: this top part, somebody has configured this collection, which is, you know, their work or their portfolio, to accept some things, including image and image alt, and they've said in the

template that this image should show up down here, right under the beginning. It should show the description here. Um, it's showing the tags that we created: Dev, branding, and back end. So we could do something like this to change the tag, and we can do something like

this to change the title. And you can see it's kind of pulling that info at the top of the markdown file in there. Uh, so then, yeah, go ahead. Yeah, as long as it's in the three dashes, you're good. You'll notice that with some of this, you have to have um

either a pipe or—actually, maybe it still works that you can do—uh, quotes or pipes for multi-line strings. Okay, so the template kind of ends this special stuff, like the image here, and then you can see all of our code right here. So, for example, we

Can I put in a list? Okay, so let's see. So if you haven't used Markdown before, it's just basically a really kind of obvious way to change the content on a page without knowing HTML. So, for example, I can come in here and put two, oops, two hash marks, and

it's going to make this into a header, a second-level header. If there are three hashes, it's a third-level header, and so on. These bullets come from just these dashes. So if you have a space above some dashes and a space below, then it'll make a list for

you. Same that you use for... yes, yeah. In fact, what we can do is do something like this: it's like `MPX Astro create`. And okay, so I... it might... yeah. So it's kind of cool; it already supports coloring, which is nice if you're a tech blogger.

You can just start writing code in the middle of your blog articles. Something I've always been curious about: does Markdown support a copy button section? So it... it can. So Markdown by itself, there's no indication or anything that you want a copy button; it's up to a

template. So if you want... if this template supports it, uh, for example, Astro that I did for my website, it has a little copy button. And I didn't do anything to make that happen; I just literally did three backticks, and then, uh, HTML, close the backtick, and I

write the code in there, and it makes it all nice and colored. Other questions? Yeah. When I initially... this is my first time seeing Astro; it kind of looked like it was advertised as maybe a competitor to React or Angular or something, but this looks like a lot like

So, is this more akin to Next.js or Remix, or something like that, kind of build-on end? Yeah, it's a meta-framework on top of React. I mean, no, it's not on top of React; it's on top of JSX, so JSX

syntax is something that React, Next, and Astro all use. Um, so basically, when you are firing this up, the main difference between Remix and Next and just a plain React app is that Astro always compiles to HTML files. So it's only for websites that don't have any forms that they need

to process that would require server actions, and you can add that. But all the pages it's going to generate for you are static. So you can add JavaScript to it. Oh yeah, but yeah, how does it work if you add... yeah. So when you add JavaScript,

you're basically, you would add it somewhere in one of the Astro files, and I'm not exactly sure. So here it just has style; it's at the top. Yeah, so this, this runs at build time; all the stuff up here runs at build time.

If you want something to run while on the page, I can't remember. I think you just say `client`, I think you say like `Astro.client`, that makes... so you're telling it, "Hey, this is going to be..."

yes. Yeah, and that's one thing that they've done that's really cool is they invented this idea of "Islands", where you can have a dynamic part of the page, and all you have to do is tell it, "Hey, this is going to be dynamic," and it can render the entire rest of the page and build that statically, but then know that it has to do some

Automatic work, uh, on the back end every time it shows a certain block of server components. Yeah, great! So let's go into, uh, Cloudflare. Um, who has a Cloudflare account already? Anyone? Is it possible to have Astro export your... yeah, it's like `npm run build`. So once

you're happy with how things look, you say `build`, and it will give you a single folder that you can copy anywhere.  C... yeah, I mean, Cloudflare does it, Vercel does it, but Vercel, I don't know about their free tier, what they allow

you to do. Quite a bit. Did they work with non-JS apps? Yeah, yeah. You can deploy anything on there. They have, uh, Docker; they support Docker. All right, okay. So if you haven't created an account, you can create one now if you want. Um, basically, what happens here is

just when you get to your account, on the left side you have this menu, and one of the things on the menu is Workers and Pages. So if I click on Workers and Pages, I can see all these different, um, things going on here. So you can see this that I just

created last week is my blog on here using Astro. So basically, to create an application, all you do is say 'Create application', and then it gives you a, um, bunch of different things, templates that you can use. Um, but you don't need to do any of that. You can click on

Pages, and the nice thing is you can just connect it to Git, and it looks like it works with GitLab as well.  So, on the left we have Workers and Pages, and then you have to click on Pages. So there's Workers and Pages; so under Pages, all you do is say

To connect, I've already connected, but you would normally go through the GitHub OAuth process.  Log in with GitHub, then you can come in here and select a repository. I've only given it access to one repository, so that's why it only shows one, but it would show

all of the repositories you give it access to. You just click on it, and it asks you a few questions. You can just do all the defaults and say 'done.' From that moment on, it'll start deploying, and anytime you make a commit to main,

a commit to main, then you will get the site automatically updating. Do you...yes, and just add...yeah. So the nice thing is you don't have to do anything locally as long as it's on GitHub. So what we didn't show, and let's go back and show this real

quick. So on here, we can say 'Source control' and 'Open repository,' and here we go. Okay. And so now I can commit this. I...okay, so I like to just do 'Commit and sync' all the time. Do you want to commit all the changes, even if you haven't selected the

changes? That's always...and just double-checks with you the first time that you really want to save your changes. Okay, so now I'm assuming that this is going to be on my GitHub. So when you open in Codespaces, it automatically forks the

repository. So let's open github.com and we'll go [Music] to...let's see 'Recent activity'...let's see...as...yeah, this one. So this is the one we just created tonight. Um, this you can see is where you can access the Codespaces. So right now,

I'm in the Codespaces; it's called this, and if I weren't in the Codespaces, there would be a button here to open it up again. So we've pushed these changes, so if we go in here and look—so go to examples—oh, we're in the parent; okay, so we're like in a parent one anyway.

So I would come into Cloudflare, and this one was just called Astro, but I'd come into Cloudflare, and there'd be an item here that said Astro, the name of this that I created, and

then I choose that repository, and then it automatically asks you a few questions, but you can just leave everything default, and then you click Setup, and it's going to deploy your site. Anytime you want to make changes to it, like I said, you can just come back here

and you can open up your Codespaces again right here. Um, just be aware—you probably don't want to open up multiple. So if you come to this the second time, make sure you choose one that's used last, and it will persist any changes you have, but you want to make

sure that you take any changes that you really want to be live and commit those, and those will go live. And, of course, if you wanted to make experiments, say, make sure you save those; you can create another branch and put the branch name whatever you want, and that will

not be connected to Cloudflare. So Cloudflare only connects the main branch, so anytime you commit or merge into main, then you'll get the website updated. Uh, any other questions? Yeah, so you mentioned that Astro's benefit is that it's server-side compiling/generating.

Your HTML for you, so you're getting smaller web pages, um, and so it works faster. Other than installing a bunch of JavaScript apps on the front end that go on the site, yeah, is the reason you mentioned that it's better for sites that are less

dynamic, simply because they are more dynamic. You would have to client-render more things, and then you would start to lose out on the advantages. Yeah, exactly, because you're going to want to either access the database or do fetch calls to somewhere else, and if your application is primarily based

on that kind of stuff, and it's, you know, user login and they see different things every time they come, then that's where you would want to use something other than Astro. Although, if you get into advanced, like I said, you can have a lot of things pre-rendered, like maybe a

navigation bar or part of pages, and then only make an island, is what they call it, where your dynamic application is server-rendered. It's interesting, though, because you know you think about WordPress, and you know my blog was on WordPress before, and how many times did

it update? It updated like once a week, right? And every time somebody requested a page, it was going into the database and was fetching all this information, building the nav, building the post that you're looking at, getting, loading up the comments, like all of these different things, right? And with Astro, it builds it

ahead of time, and if you do want some dynamic things, you can integrate with other services. I won't go into um, but there are a lot out there for like chat widgets, so it's just a widget you put on; it's hosted by somebody else and they

Handle, you know, posting the discussion and serving the discussion to you in a section of your page. You can use other services to make forms, and the forms go and do something and maybe return some content to a dynamic part of your page. So you can, if you think about a lot

of websites that don't change very often, this is a great way to go. Um, and I wasn't super familiar with this until last week, but on Chrome, you can go into the dev tools, and there's something called a Lighthouse score. So several

years ago, Google started saying, "Hey, as part of ranking your page and deciding how far up on the list of results to put it, we're going to assess how fast your website is. We're going to assess when a user loads it, how much time do they wait

before they see something and before they see everything," and that will give you a score, and that can help you move you up or down on the list of results. So if you have a website where it's really important for people to come often, then it's such a great way

to go because you'll get 98 or 100% on those uh metrics. Yeah, yeah. So each template does its own thing. Um, the one that we just looked at was uh Bootstrap, or sorry, was Tailwind. So, and you can always use plain

CSS on any of them as well. Yeah. So API calls: what you want to do is, if it was something that you put in an island, then you can do a fetch request and populate that part of the page. So you can do stuff like that, but it's

Server whatever you want to fetch and do; you can client-side render it, you can server-side render it, however you want to do it. Yep, yeah, cool. Thanks! Thanks so much for following along. Yeah, one more question? Yes, it automatically watches for a push to main, and I don't have to

do anything to tell Cloudflare to deploy it. It just starts building the site; it checks out the code and runs Astro build, takes the resulting files, and it deploys those to your site. Yeah, and if you use them for

uh, domain registration, you can just buy a domain here, and if it's with them, they can connect and point it to your pages automatically. If not, if it's hosted somewhere else, you have to go into that other place's DNS and connect

it up. But this is nice, too, because you can just buy a cheaper domain and then do whatever you want; point it to whichever pages you want. Do you know the price for...? Yeah, let's look for... Oh, this is the wrong thing. Uh, I did this last time. This is register

domains. So, regular .com? Yeah, that's probably... Yeah. So, regular .com currently costs under $10 a year. That's a year. It depends on...

Create and deploy a website with Astro for free - Ken Snyder

UtahJS

Introduction to Astro and its functionalities

Overview of the workshop, estimated duration of 10 minutes.

Brief introduction to Astro, focusing on its use for content-driven websites.

Comparison of Astro with dynamic web applications, highlighting its suitability for blogs and portfolio pages.

Explanation of Astro's speed advantage due to static content compilation and HTML serving.

Introduction to Astro's website (astro.build) and its themes/templates.

Setting up the development environment using GitHub Codespaces

Decision to create a portfolio page using Astro.

Explanation of options for opening the project: StackBlitz, CodeSandbox, and GitHub Codespaces.

Advantages of GitHub Codespaces, including integrated IDE and remote server.

Comparison of GitHub Codespaces and Gitpod.

Discussion on deploying the site using Cloudflare, highlighting its free tier and integration with GitHub.

Working with GitHub Codespaces and VS Code

Explanation of creating a Codespace from a repository and its functionalities.

Discussion on using Codespaces for development without local installations.

Clarification on free tier usage and paid options for faster servers.

Steps to create a Codespace, addressing potential questions during the process.

Addressing concerns about unexpected charges, highlighting the automatic shutdown of inactive containers.

Code editing and real-time updates within VS Code

Introduction to VS Code and its web-based nature.

Explanation of the project's file structure and the `astro dev` command.

Demonstration of the real-time preview feature and alternative viewing methods.

Explanation of the automatic rebuild and update mechanism upon file changes.

Discussion on Astro extensions and its similarity to JavaScript/TypeScript and HTML/JSX.

Demonstration of editing the homepage content.

Explanation of the `content` folder and its structure.

Demonstration of editing the `index.astro` file and the automatic saving feature.

Demonstration of navigating and editing different pages within the project.

Explanation of the built-in header and its functionality.

Discussion on Markdown files, their metadata, and usage of front matter.

Comparison with other frameworks and deployment

Clarification on Astro's position relative to other frameworks like React, Next.js, and Remix.

Explanation of Astro's static HTML compilation and its implications for dynamic content.

Discussion on handling JavaScript and dynamic elements within Astro using 'Islands'.

Deployment process using Cloudflare, including account creation and repository connection.

Comparison of Cloudflare and Vercel deployment options.

Steps to connect a GitHub repository to Cloudflare Pages for automatic deployment.

Demonstration of committing changes and syncing with GitHub.

Verification of changes on GitHub and accessing the Codespaces.

Final steps for deployment on Cloudflare Pages and managing multiple Codespaces.

Further discussion on Astro's benefits for less dynamic websites and its performance advantages.

Addressing the suitability of Astro for different website types based on their dynamic needs.

Comparison with WordPress, highlighting Astro's pre-rendering capabilities and integration with other services.

Importance of website speed for SEO and Google's Lighthouse score.