We've seen how we can use
the "public" folder
to keep images and other assets
used in our pages.
Now, we're building a blog website,
but we still have no blog posts.
So it's time to write
our first blog post.
And we could start by adding
a Link to what will be
the page for our blog post.
We may want all the posts
to be under the same path,
and under there we will have
different pages
starting with a "first-post" for example.
Here we need an anchor element
with the title for this link,
that can be again "First Post".
Now, let me remove
these other list items.
And in our page
we see the link to "First Post".
Of course if we click that link
we'll get a 404 page,
because we haven't actually
created the page for that URL yet.
You should know by now
how to create a page,
so why don't you pause this video
and try and add that page yourself?
There's just a tiny challenge here,
in that the page must be in a sub-path.
I'll wait just a couple of seconds
before showing you the solution.
Ok, let's see how to create
that "first-post" page.
We know that pages go
inside the "pages" folder.
But in this case we first want
to create a sub-folder called "posts",
and inside that sub-folder
we'll create a "first-post.js" file.
So that's how we'll get this page
exposed as "/posts/first-post"
in the URL.
Now we need our component code,
and I'll copy that from our AboutPage,
just to save some time.
Let's rename "AboutPage"
to "FirstPostPage",
and also change the title accordingly.
And this is a good starting point
for our new page.
If we try opening that link again,
we can see our new First Post page.
That's pretty simple.
Now, we could add a paragraph
with the content of our post, like
"This is my first ever blog post!"
And, you know, we could keep writing
more content into this page,
but writing an article by hand
using JSX elements inside a React component
is probably not the best approach.
Maybe we could use Markdown instead.
And we'll look at that in the next video.