Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: create the building-a-blog stub article #10748

Closed
wants to merge 11 commits into from
62 changes: 59 additions & 3 deletions docs/docs/building-a-blog.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,63 @@
title: Building a blog
---

This is a stub. Help our community expand it.

Please use the [Gatsby Style Guide](/docs/gatsby-style-guide/) to ensure your
pull request gets accepted.
### Building a blog

Using gatsby-starter-blog you will build a full-featured blog.
vojoup marked this conversation as resolved.
Show resolved Hide resolved

### Prerequisites

You must know how to set up a basic Gatsby project based on a starter. If you need to, check the [main tutorial](https://www.gatsbyjs.org/tutorial).
vojoup marked this conversation as resolved.
Show resolved Hide resolved

### Setting up blog metadata

Edit the siteMetadata to set the site title, author, and other properties:

```js:title=gatsby-config.js
siteMetadata: {
title: `Gatsby Starter Blog`,
author: `Kyle Mathews`,
description: `A starter blog demonstrating what Gatsby can do.`,
siteUrl: `https://gatsby-starter-blog-demo.netlify.com/`,
social: {
twitter: `kylemathews`,
},
},
```

### Adding articles

To create an article, add a new folder to `/content/blog/`. The name of this folder is the route on which the article is available. You write the article itself in the `index.md` file under the created folder.

#### Article metadata

All the article metadata such as the `title` come from the header of the index.md file. You can access this data under the `frontmatter` object.

content/blog/hello-world/index.md
---
title: Hello World
date: '2015-05-01T22:12:03.284Z'
---

#### Adding more data to frontmatter

You can include more data in `frontmatter` like `readTime` for example. To use this data, you also have to change the page queries that are reading this data:

```js:title=src/templates/blog-post.js
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
readTime
}
`
```

```js:title=src/pages/index.js
frontmatter {
date(formatString: "MMMM DD, YYYY")
title
readTime
}
`
```