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

워크숍 개요, 예상 소요 시간은 10분입니다.

콘텐츠 중심 웹사이트에서의 사용에 중점을 둔 Astro에 대한 간략한 소개입니다.

블로그 및 포트폴리오 페이지에 대한 적합성을 강조하는 동적 웹 애플리케이션과 Astro를 비교합니다.

정적 콘텐츠 컴파일 및 HTML 제공으로 인한 Astro의 속도 이점에 대한 설명입니다.

Astro 웹사이트(astro.build) 및 해당 테마/템플릿 소개.

GitHub 코드스페이스를 사용하여 개발 환경 설정하기

Astro를 사용하여 포트폴리오 페이지를 만들기로 결정합니다.

프로젝트 열기 옵션에 대한 설명입니다: 스택블리츠, 코드샌드박스, 깃허브 코드스페이스.

통합 IDE 및 원격 서버를 포함한 GitHub 코드스페이스의 장점.

GitHub 코드스페이스와 Gitpod의 비교.

무료 티어와 GitHub와의 통합을 강조하면서 Cloudflare를 사용하여 사이트를 배포하는 방법에 대해 논의합니다.

GitHub 코드스페이스 및 VS Code로 작업하기

리포지토리에서 코드스페이스를 만드는 방법과 그 기능에 대해 설명합니다.

로컬 설치 없이 개발을 위해 코드스페이스를 사용하는 방법에 대해 논의합니다.

더 빠른 서버를 위한 무료 티어 사용 및 유료 옵션에 대한 설명입니다.

코드스페이스를 만드는 단계와 프로세스 중 발생할 수 있는 질문에 대한 답변입니다.

비활성 컨테이너의 자동 종료를 강조하여 예상치 못한 요금 청구에 대한 우려를 해소합니다.

VS Code 내에서 코드 편집 및 실시간 업데이트

VS 코드와 웹 기반 특성에 대해 소개합니다.

프로젝트의 파일 구조와 `astro dev` 명령어에 대한 설명입니다.

실시간 미리보기 기능 및 다른 보기 방법 시연.

파일 변경 시 자동 재구축 및 업데이트 메커니즘에 대한 설명입니다.

Astro 확장 기능과 JavaScript/TypeScript 및 HTML/JSX와의 유사성에 대해 논의합니다.

콘텐츠` 폴더와 그 구조에 대한 설명입니다.

index.astro` 파일 편집 및 자동 저장 기능 데모.

프로젝트 내에서 여러 페이지를 탐색하고 편집하는 데모입니다.

기본 제공 헤더와 그 기능에 대한 설명입니다.

마크다운 파일, 메타데이터, 앞부분 사용법에 대해 논의합니다.

다른 프레임워크와의 비교 및 배포

React, Next.js, Remix와 같은 다른 프레임워크와 비교한 Astro의 위치에 대한 설명.

Astro의 정적 HTML 컴파일과 동적 콘텐츠에 대한 의미에 대한 설명입니다.

'아일랜드'를 사용하여 아스트로 내에서 자바스크립트 및 동적 요소를 처리하는 방법에 대해 논의합니다.

계정 생성 및 리포지토리 연결을 포함하여 Cloudflare를 사용한 배포 프로세스.

Cloudflare와 Vercel 배포 옵션 비교.

자동 배포를 위해 GitHub 리포지토리를 Cloudflare 페이지에 연결하는 단계.

변경 사항을 커밋하고 GitHub와 동기화하는 데모입니다.

GitHub에서 변경 사항을 확인하고 코드스페이스에 액세스합니다.

Cloudflare 페이지에 배포하고 여러 코드스페이스를 관리하기 위한 마지막 단계입니다.

덜 동적인 웹사이트에 대한 Astro의 장점과 성능 이점에 대해 자세히 알아보세요.

동적 요구 사항에 따라 다양한 웹사이트 유형에 대한 Astro의 적합성을 해결합니다.

워드프레스와 비교하여 Astro의 사전 렌더링 기능과 다른 서비스와의 통합을 강조합니다.

SEO 및 Google의 라이트하우스 점수에 대한 웹사이트 속도의 중요성.