1
00:00:03,000 --> 00:00:04,571
We've seen how we can use

2
00:00:04,571 --> 00:00:05,765
the "public" folder

3
00:00:06,327 --> 00:00:08,885
to keep images and other assets

4
00:00:08,885 --> 00:00:10,370
used in our pages.

5
00:00:10,952 --> 00:00:13,602
Now, we're building a blog website,

6
00:00:13,602 --> 00:00:16,024
but we still have no blog posts.

7
00:00:16,600 --> 00:00:18,238
So it's time to write

8
00:00:18,238 --> 00:00:19,798
our first blog post.

9
00:00:20,377 --> 00:00:22,016
And we could start by adding

10
00:00:22,516 --> 00:00:24,280
a Link to what will be

11
00:00:24,280 --> 00:00:26,446
the page for our blog post.

12
00:00:27,027 --> 00:00:28,505
We may want all the posts

13
00:00:28,505 --> 00:00:30,043
to be under the same path,

14
00:00:30,603 --> 00:00:32,368
and under there we will have

15
00:00:32,368 --> 00:00:33,314
different pages

16
00:00:33,878 --> 00:00:36,685
starting with a "first-post" for example.

17
00:00:37,185 --> 00:00:38,707
Here we need an anchor element

18
00:00:39,207 --> 00:00:41,161
with the title for this link,

19
00:00:41,161 --> 00:00:43,251
that can be again "First Post".

20
00:00:43,819 --> 00:00:44,936
Now, let me remove

21
00:00:44,936 --> 00:00:46,363
these other list items.

22
00:00:46,926 --> 00:00:47,939
And in our page

23
00:00:47,939 --> 00:00:50,100
we see the link to "First Post".

24
00:00:50,667 --> 00:00:52,681
Of course if we click that link

25
00:00:52,681 --> 00:00:54,046
we'll get a 404 page,

26
00:00:54,610 --> 00:00:56,734
because we haven't actually

27
00:00:56,734 --> 00:00:59,409
created the page for that URL yet.

28
00:00:59,409 --> 00:01:01,139
You should know by now

29
00:01:01,139 --> 00:01:02,791
how to create a page,

30
00:01:02,791 --> 00:01:05,387
so why don't you pause this video

31
00:01:05,387 --> 00:01:08,140
and try and add that page yourself?

32
00:01:08,140 --> 00:01:10,893
There's just a tiny challenge here,

33
00:01:10,893 --> 00:01:13,961
in that the page must be in a sub-path.

34
00:01:15,012 --> 00:01:17,317
I'll wait just a couple of seconds

35
00:01:17,317 --> 00:01:19,488
before showing you the solution.

36
00:01:20,055 --> 00:01:22,020
Ok, let's see how to create

37
00:01:22,020 --> 00:01:23,694
that "first-post" page.

38
00:01:24,266 --> 00:01:25,627
We know that pages go

39
00:01:25,627 --> 00:01:27,312
inside the "pages" folder.

40
00:01:27,876 --> 00:01:29,998
But in this case we first want

41
00:01:29,998 --> 00:01:32,686
to create a sub-folder called "posts",

42
00:01:33,256 --> 00:01:35,436
and inside that sub-folder

43
00:01:35,436 --> 00:01:38,454
we'll create a "first-post.js" file.

44
00:01:39,037 --> 00:01:42,027
So that's how we'll get this page

45
00:01:42,027 --> 00:01:44,744
exposed as "/posts/first-post"

46
00:01:44,744 --> 00:01:45,740
in the URL.

47
00:01:46,421 --> 00:01:48,450
Now we need our component code,

48
00:01:48,450 --> 00:01:50,936
and I'll copy that from our AboutPage,

49
00:01:51,501 --> 00:01:52,522
just to save some time.

50
00:01:53,902 --> 00:01:55,926
Let's rename "AboutPage"

51
00:01:55,926 --> 00:01:57,528
to "FirstPostPage",

52
00:01:58,567 --> 00:02:00,406
and also change the title accordingly.

53
00:02:03,533 --> 00:02:05,416
And this is a good starting point

54
00:02:05,416 --> 00:02:06,385
for our new page.

55
00:02:06,942 --> 00:02:09,014
If we try opening that link again,

56
00:02:09,514 --> 00:02:11,822
we can see our new First Post page.

57
00:02:12,322 --> 00:02:13,534
That's pretty simple.

58
00:02:13,534 --> 00:02:15,208
Now, we could add a paragraph

59
00:02:16,155 --> 00:02:18,716
with the content of our post, like

60
00:02:18,716 --> 00:02:21,277
"This is my first ever blog post!"

61
00:02:21,988 --> 00:02:24,565
And, you know, we could keep writing

62
00:02:24,565 --> 00:02:26,569
more content into this page,

63
00:02:26,569 --> 00:02:28,717
but writing an article by hand

64
00:02:28,717 --> 00:02:31,794
using JSX elements inside a React component

65
00:02:31,794 --> 00:02:34,228
is probably not the best approach.

66
00:02:34,228 --> 00:02:36,804
Maybe we could use Markdown instead.

67
00:02:36,804 --> 00:02:39,739
And we'll look at that in the next video.