Install and Configure Gatsby Blog Theme

Laurie Barth
InstructorLaurie Barth

Share this video with your friends

Send Tweet
Published a year ago
Updated 10 months ago

Set up gatsby-theme-blog in order to add pre-built blog functionality to your Gatsby site.

Laurie Barth: [0:00] Start with a working Gatsby site and install gatsby-theme-blog. Navigate to your gatsby-config file and add a new plugin. The name will be gatsby-theme-blog, and we're going to add an option.

[0:20] The option in this case will be basePath, which we can set to any path we like, in this case /blog. The default path is /, and since our site already has an index.js page, that takes up the space of / in our site.

[0:42] Create a directory called content and another directory called posts. Put a markdown file in it, that the theme will treat as an mdx file. Add a title to the front matter as well as a date. We can add some minor content to our markdown, save, and run the gatsby develop command.

[1:15] Once it's run, we can take a look at localhost:8000/blog and see that we have a listing page. We can click on our post and we'll see the full blog post available to us.