1
00:00:03,000 --> 00:00:05,636
So, we created this FirstPostPage,

2
00:00:05,636 --> 00:00:07,652
but we also mentioned that

3
00:00:08,230 --> 00:00:10,180
it would be better to write

4
00:00:10,180 --> 00:00:12,636
our blog posts in Markdown format.

5
00:00:13,208 --> 00:00:15,115
So let's open a new editor tab,

6
00:00:16,675 --> 00:00:19,617
and set the file type to "Markdown".

7
00:00:20,117 --> 00:00:21,972
In Markdown we can write a header

8
00:00:22,472 --> 00:00:24,743
by starting the line with a hash mark

9
00:00:24,743 --> 00:00:26,890
so we could use this for the title.

10
00:00:27,451 --> 00:00:29,771
And then we can write a paragraph

11
00:00:29,771 --> 00:00:32,863
simply as normal text, without special tags.

12
00:00:33,433 --> 00:00:35,698
Let's also note that this post

13
00:00:35,698 --> 00:00:37,737
was written using Markdown.

14
00:00:38,312 --> 00:00:39,930
Now, in Visual Studio Code

15
00:00:39,930 --> 00:00:41,360
we can also preview it,

16
00:00:41,922 --> 00:00:44,349
if we open the "Command Palette",

17
00:00:44,349 --> 00:00:46,409
by pressing Command+Shift+P,

18
00:00:46,409 --> 00:00:47,732
or Control+Shift+P

19
00:00:47,732 --> 00:00:49,424
if you're not on macOS,

20
00:00:50,144 --> 00:00:52,585
here you can search all available commands,

21
00:00:53,085 --> 00:00:54,591
and there is one called

22
00:00:54,591 --> 00:00:56,948
"Markdown: Open Preview to the Side"

23
00:00:57,513 --> 00:00:58,856
So if I press enter,

24
00:00:58,856 --> 00:01:01,942
we can see the rendered Markdown on the right.

25
00:01:02,509 --> 00:01:05,649
And we can keep adding content on the left,

26
00:01:05,649 --> 00:01:07,985
like some bold text for example.

27
00:01:08,558 --> 00:01:10,063
Or we could add a list,

28
00:01:11,792 --> 00:01:14,269
starting each line with an asterisk,

29
00:01:14,269 --> 00:01:17,091
that will be displayed as a bullet point.

30
00:01:17,091 --> 00:01:19,018
So this is a much better way

31
00:01:19,018 --> 00:01:20,326
to write an article

32
00:01:20,326 --> 00:01:21,840
compared to writing it

33
00:01:21,840 --> 00:01:24,180
directly inside a React component.

34
00:01:25,025 --> 00:01:27,332
Now, let's save this Markdown file.

35
00:01:27,832 --> 00:01:29,379
And I'll create a new folder

36
00:01:29,379 --> 00:01:30,318
called "content",

37
00:01:30,318 --> 00:01:31,644
just to keep it separate

38
00:01:31,644 --> 00:01:33,081
from the rest of our code.

39
00:01:33,747 --> 00:01:35,365
Inside content we could have

40
00:01:35,365 --> 00:01:37,099
another folder called "posts",

41
00:01:37,657 --> 00:01:38,522
and this is where

42
00:01:38,522 --> 00:01:39,846
we want to save this file.

43
00:01:41,857 --> 00:01:43,637
I'll have to find that folder

44
00:01:43,637 --> 00:01:44,803
in this dialog now.

45
00:01:46,223 --> 00:01:48,079
Ok, and we can call this file

46
00:01:48,579 --> 00:01:50,585
"first-post.md".

47
00:01:51,912 --> 00:01:52,381
There you go.

48
00:01:53,512 --> 00:01:55,238
So our challenge now is

49
00:01:55,238 --> 00:01:57,715
how do we take this Markdown file

50
00:01:58,290 --> 00:02:00,312
and display it as the content

51
00:02:00,312 --> 00:02:01,915
of our "FirstPostPage"?

52
00:02:03,223 --> 00:02:04,586
This will require

53
00:02:04,586 --> 00:02:06,750
quite a few separate steps,

54
00:02:06,750 --> 00:02:08,834
We need to read that file,

55
00:02:08,834 --> 00:02:10,276
parse the Markdown

56
00:02:10,276 --> 00:02:12,039
and render it to HTML,

57
00:02:12,039 --> 00:02:14,684
but also see how we can load data

58
00:02:14,684 --> 00:02:16,127
in a Next.js page.

59
00:02:16,127 --> 00:02:17,970
We'll cover all of this

60
00:02:17,970 --> 00:02:19,813
in the next few videos.