Writing Your First Blog

In your code editor, src/pages is the place where Gatsby will go looking for markdown files. I am going to create my blog posts about DC Comics, starting with the DC Rebirth #1. So let’s create a folder called DC Rebirth #1 , and inside it create a file named index.md .

Gatsby converts the front matter of a markdown file usable HTML data. Open the index.md file that you just created and write the following in it:

--- path: '/dc-rebirth' date: '2018-05-23T12:34:00+00:00' title: "DC UNIVERSE - Rebirth" tags: ['The Flash', "Batman", "Superman", "Wally West", "Wonder Woman", "DC"] excerpt: "It all begins here. Do not skip to the last page. Do not let a friend or message board ruin this comic for you. The future (and past) of the DC Universe starts here. Don’t say I didn’t warn you!" --- (Start writing your blog post from here)

Here, I have added a path that Gatsby is going to use as the URL to access this post, a date using Unix TimeStamp, a title for the blog post, a tag containing a list of keyword that I will be able to use to search for the post, and a small summary that I will show on the Blog’s main page. After that, you can write your blog post like a regular markdown file.

Repeat this process for the rest of your blog posts.

Once done, you can launch this project using gatsby develop command from your terminal.

Create an index of your posts

If you take a look at your blog in the browser, you will see that Gatsby is not displaying the blog post that you have created.

This is because, Gatsby still does not know where these blog posts are or that you even want them to be displayed in the browser.

Gatsby uses GraphQL to create a query that will be used by Gatsby to search for the blog posts.

Go to src/pages/index.js write the following code:

To understand what exactly is happening here, take a look the GraphQL query that I have named query . Not unimaginative at all!

This query named query is going to take in all the Markdown files inside the src folder. It will then give out the total number of markdown files ( totalCount ) and set up edges containing node .

The edge is a file system path to the node . Here node is nothing but our blog post. This node will have a unique id and all the frontmatter data like title , date , path , tags , and excerpt that we have defined earlier in the blog post’s markdown file. This data is then taken into the Indexpage component.

If you go back to your Blog in the browser, you will see that it is now displaying your blogs.