Get Started Astro Tutorial — 2. Defining the data model

00:00 / 00:00

2. Defining the data model

In the previous step, we created the project and gave it a name.

Now we move to the Model tab and define the structure of our data.

Let's start with the easiest part: the About page where we introduce ourselves.

About page

What content will this page have?

If we defined it in TypeScript, it would look something like this:

interface About {
  fullname: string;
  picture: media;
  shortBio: string;
  extendedBio: longtext;
}

We're going to create the About entity with the fields we've defined. To do this, click on "Add new model" and name it "About".

Now we start adding fields. Let's begin with the photo:

Next, the name:

Now the short bio:

And finally, the extended bio:

Now let's get to the core of our site—we want to display posts, so we’ll define the "Post" entity.

What content will a post have?

If it were pseudo-TypeScript, it would look like this:

interface Post {
  title: string;
  slug:string;
  date: Date;
  author: string;
  summary: string;
  image: media;
  content: longtext;
}

We're going to create the Post entity with the fields we've defined. To do this, click on "Add new model" and name it "Post".

And now we start adding fields. First, the title:

Next, the slug:

Next, the date:

Now the author:

Post summary:

Header image for the post:

Finally, the content of the post:

Now our structure is complete :)

Next, we'll start entering data.