Create an Astro Page & Layout

[00:00:00]
>> Astro by default, anything that you put in the pages directory gets treated as a route. So index.html is your / home route. So just, your site.com/, that's what index is. And if we wanna create something else we can create about.astro, but we can also use mark down here so we can create about.md and we'll get /about there as well.

[00:00:24]
You can ship .HTML files if you'd like. Those .HTML files are missing a few of the Astro features. So those are like if you're trying to migrate something over and you don't have time to make it work with the astro components syntax or something. Or you've got some special thing you don't wanna rewrite, drop some HTML in incrementally migrate over.

[00:00:44]
With a plugin you can use MDX, if you're familiar with MDX. We won't really touch on that today. I've talked about it in previous workshops and there are great resources out there for anybody who wants to learn. But the general idea is MDX is a way to write markdown that supports JSX components.

[00:01:01]
So you can bring in a React component or there's one for Svelte, there's one for Solid, and that way you can kinda build out sites that are mostly content driven, but where you need it. Like if you wanna put in a dynamic newsletter capture or something, you can use a React component to drop that in, and MDX allows that.

[00:01:20]
We also have the ability to use .js or .ts in a markdown page, which is a special case called an endpoint. We'll look at that later when we get into the rss feed for the blog. But you can use that for delivering json, sending up a little, like a simple API, and a whole bunch of other things that we can talk about later on.

[00:01:42]
So what I wanna do is I want to create an about page. So I'm gonna create a new file and we're gonna set it up as about.md. So this about page doesn't have anything but text on it. So I'm gonna keep it as simple as possible. I just wanna have some markdown.

[00:01:58]
And in here I have the content. So I have this workshop assets folder. And this is all the stuff that I don't want anybody to have to watch me type out or I don't want you to have to transcribe off the screen. So whenever I'm using one of these, I'll try to remember to call it out, but a lot of times, I'm just gonna be copy-pasting something out of here.

[00:02:14]
So for this about page, I'm going to copy this and come in to my new about page and save. And then when I come out here, I can navigate to About, and we've got a page, right? So this is the Astro workflow. We're kind of just getting in here.

[00:02:32]
We're creating pages, we're making things just function. And when I say that things are really quick to start, this is kind of what I mean. We were just making the website now, right? So if you wanna quickly mock something out, you wanna try something out, it happens nice and fast.

[00:02:49]
Next, these pages aren't linked together. They're not styled we don't have a lot going on. So what we wanna do is create what's called a layout. And this is gonna introduce the idea of an astro component. So the index page is, you may have noticed a .astro file.

[00:03:04]
So that's an astro component, but we're not really using it as a component right now, we're just putting some HTML in here. So let's create a new folder called layouts. And inside of that folder, we're gonna create a new file, and we'll call this one default.astro. Inside of this, we are going to move a lot of what was in the index.astro.

[00:03:34]
And I think I have this stored up in the markup, yes. So in this markup folder, there is a starter here. And this is all the markup we want to use in our default layout. So let's look a little bit at what this does. I'll make this bigger.

[00:03:56]
So we've got our head component, and I'm gonna use a few Google fonts in this. So we set up the "preconnect" here. We set up our favicon, we've got a link to the actual Google font that we're gonna use. And then we add in a title, so that we can identify our site.

[00:04:18]
Next, we've got a header so the header has a link to the homepage with a logo we've got todo to add in NAV items. And a todo to add in display content. And then we wrap the whole thing up with some footer. You can functionally ignore the footer.

[00:04:33]
I mostly just left it in there for the link demo. So with that, this is the layout that we wanna use. And it looks as you can see, it's we're just telling Astro, here's some HTML that we want you to use. So this isn't done yet, but we're gonna go ahead and give it a shot and see how this works.

[00:04:53]
So I'm gonna go into my index.astro. And I'm gonna introduce something called frontmatter, which is how Astro files or Astro components allow us to do kind of like build time processing. It allows us to do stuff that won't show up in the browser. And the way that I'm gonna do this is I'm gonna import my layout from layouts/default.astro.

[00:05:23]
So that's the file we just created. And then instead of having all of this I'm going to change it to a layout. And so this is then all we need inside of our index because the layout is handled elsewhere. Now, this is gonna break but I wanna show you how this works to start and then we'll look at how to fix it.

[00:05:51]
So if we look at the homepage right now, you can see that we've got the header and footer, but we're missing our content. So how do we get that content into our layout? Because this is the way that we want this to work. We're passing in the content of the page as children, but Astro components aren't React components, so we don't have that concept of like adding children in there as a prop.

[00:06:17]
Instead, we do something different in an Astro component. Now, frontmatter can do a lot, instead of kind of doing a whole session on the individual pieces of frontmatter and what you can do with it, we're gonna learn it incrementally as we go. So we'll start with this, we're importing a component.

[00:06:36]
And throughout the course of this workshop, we'll do more and more things with the frontmatter in Astro components. So stick with me, and more things will become available. There's also a whole section in the Astro docs, which are excellent, that will help. Kind of disambiguate anything that you feel like I glossed over, or if you just want a deep dive on a particular concept, if we didn't cover it in a way that you want, definitely check out those Astro docs.

[00:07:02]
So what I'm gonna do next is I want this content to show through in my layout. So back in the default.astro, we've got this to do to display content. And the way this works in Astro is you put in a slot. And so a slot, it's very similar to how children in React works.

[00:07:26]
The major difference is that you can have named slots, which allows you to have multiple slots on your page. So for example, if you wanted to make the title of your page dynamic, you could have a slot called title. And then on each page, you could specify the title tag on that page.

[00:07:46]
Now, there are easier ways to do that in Astro where you can use the frontmatter to specify the title and so on and so forth. But this is a really flexible and powerful way to do it. We're not gonna get into it because I feel like a lot of times that's not necessary.

[00:07:59]
I think as you get into more complex projects, you may need that, today for what we're building, we're not going to need that. So we'll start here. But as you can see, adding that slot, now we've got the content, is coming through, right? So that's the guts of how an Astro site works.

[00:08:20]
We've got layouts. And if I go over to, I wanna actually set this up in my About page as well, because my About page right now doesn't have that layout. So if I head into my markdown file I can do the same thing where I add some frontmatter, but frontmatter is a little bit different this isn't an Astro component.

[00:08:43]
So we're not using in JavaScript to import, we just set a tag of layout or a frontmatter property of layout and give it the path. So we save that and, spelled it wrong, there it is. So now, same concept, we've got our home page is using a layout, our About page is using a layout.

[00:09:12]
This is a combination of Astro components and markdown files. And all of that is running off of the same layout. Now, there are ways that you can do some specialty things, we'll look at that in just a minute here. But this is giving us the control we need to get through building out the guts of our site, our homepage and our About page.

[00:09:37]
So, at this point, we're not styled we don't have any any, like visual layout or anything like that. So let's add that and this is going to show another another really powerful concept in Astro. It's not original to Astro, this is something that I believe was borrowed from Vue, from Svelte, probably from frameworks before that that I didn't use.

[00:09:59]
But it's the idea of a single file component where you can declare styles in line with your your components and have those picked up.