Explore Gatsby Theme Blog 2.0
Tags: gatsby, react
Published: 2020-07-27 00:46:36


I started my blog in April 2020 by using [gatsby-starter-blog-theme](https://github.com/gatsbyjs/gatsby/tree/master/starters/gatsby-starter-blog-theme). The good thing is out of the box; I could immediately begin writing a blog with the starter. The bad part is I not learning how to set up a blog theme with gatsby.

Gatsby release gatsby-theme-blog 2.0 in the second week of July 2020. I want to take this opportunity to learn the setup from scratch.

Let's get started.

## Initial A Project With Gatsby Starter

I use the simplified bare-bones starter for this new blog site - [gatsby-starter-hello-world](https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-hello-world/)

Open any terminal

```shell
cd desktop //cd to the folder where you want to save the project.

gatsby new ansonlowzf-blog2.0 https://github.com/gatsbyjs/gatsby-starter-hello-world

cd ansonwlowzf-blog2.0

gatsby develop
```

**Note:-**

- If you are new to Gatsby, make sure you install gatsby-cli globally in your machine follow this [guide](https://www.gatsbyjs.org/docs/quick-start/).
- ansonlowzf-blog2.0 is the name I choose for my blog, and you should use the name you want for your project.

I can see "Hello world!" appear in the browser.

## Install gatsby-theme-blog

**_Ctrl + C_** to stop the local development server then go to the terminal

```shell
npm install gatsby-theme-blog

npm update 

```

I always like to update all the modules to the latest.😊

```shell
code .
```
Open the file in VS Code

## Configure Gatsby-config File

Open **gatsby-config.js**

You shall see something like below:-

```javascript
module.exports = {
  /* Your site config here */
  plugins: [],
}
```

Add gatsby-theme-blog as a plugin

```javascript
module.exports = {
  /* Your site config here */
  plugins: [`gatsby-theme-blog`],
}
```

Save the file and run:-

```shell
gatsby develop
```

You shall see a content folder appear in the root directory

Inside the content folder, there are:-

- assets folder - to keep the blog images
- posts folder - to write the blog post in Markdown

**_Ctrl + C_** to stop the local development server

**Note:-**

No need to visit http://localhost:8000/ to check anything yet. We just want gatsby-theme-blog to generate a **content** folder for us.

## Create The First Blog Post

Create **/content/posts/my-first-post.md** and add the following code:-

![first blog post content](https://dev-to-uploads.s3.amazonaws.com/i/yvdrra7nv1o4vd9dqc54.png)

Delete **src/pages/index.js** (This is important especially you want to render your blog list in index page.)

Save the file and run:-

```shell
gatsby develop
```

Visit [http://localhost:8000/](http://localhost:8000/) in the browser

You shall see something similar to:-

![Blog list in index page](https://dev-to-uploads.s3.amazonaws.com/i/ky0g694leuragadt83t7.png)

As simple as that, a blog list in index page. 😊

You might already notice, my footer is different from yours, why?

Check out the next step.

## Set Up Site Metadata

This site metadata I copy from my previous blog, you can also copy from the "[gatsby-theme-blog](https://www.gatsbyjs.org/packages/gatsby-theme-blog/)" site and look for "additional configuration", or you can copy the code below and paste it after the **plugins** and change to your data accordingly.

```javascript
module.exports = {
  /* Your site config here */
  plugins: [...code],
  siteMetadata: {
    title: `Anson LowZF Blog`,
    author: `Anson LowZF`,
    description: `A self taught front-end developer documenting and sharing his learning process`,
    siteUrl: `https://ansonlowzf.com`,
    social: [
      {
        name: `Twitter`,
        url: `https://twitter.com/ansonlowzf`,
      },
      {
        name: `Github`,
        url: `https://github.com/ansonlowzf`,
      },
      {
        name: `Proudly hosted on Netlify`,
        url: `https://www.netlify.com/`,
      },
    ],
  },
}
```

Save the file and run:-

```shell
gatsby develop
```

Now, you shall see the footer content change according to your data.

## Shadowing The Bio Content

Click **My First Post**

You shall see:-

![first blog post](https://dev-to-uploads.s3.amazonaws.com/i/dqkfqyu6m4glnxaku7s5.png)

I would like to amend this part:-

![Highlight the bio content with red box](https://dev-to-uploads.s3.amazonaws.com/i/6ua2cmfzwk497ns38xmi.png)

In the gatsby theme, we just need to find out which component render this part and overwrite it. This is called **shadowing**.

Create **/src/gatsby-theme-blog/components/bio-content.jsx**

How do I know to create this file could overwrite the bio content?

Check out the shadowing [guide](https://www.gatsbyjs.org/docs/themes/shadowing/) by Gatsby.

I find out which component is rendering the bio content part in gatsby theme blog's [Github](https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog/src/components)

Check out the components, I find out the bio content component is rendering the part mentioned. The code is as below:- (Check gatsby theme blog's [Github](https://github.com/gatsbyjs/themes/blob/master/packages/gatsby-theme-blog/src/components/bio-content.js))

```javascript
import React, { Fragment } from "react"
import { Styled } from "theme-ui"

/**
 * Shadow me to add your own bio content
 */

const BioContent = () => (
  <Fragment>
    Words by <Styled.a href="http://example.com/">Jane Doe</Styled.a>.
    <br />
    Change me. This is all quite default.
  </Fragment>
)

export default BioContent
```

See the file above, very obvious right?

I shadowing the **bio-content.jsx** with my code as below:-

```javascript
import * as React from "react"
import { Styled } from "theme-ui"

const BioContent = () => (
  <>
    A self-taught developer documenting and sharing his learning experience.
    <br />
    React.js &bull; Gatsby.js &bull; Next.js soon. More{" "}
    <Styled.a href="/about-me">about me</Styled.a>
  </>
)

export default BioContent
```

Save the file, and restart the development server.

You shall see:-

![The bio content change to my information](https://dev-to-uploads.s3.amazonaws.com/i/wnog8z6uju7a345qacf3.png)

## Add Avatar

If you check the bio compnent source code:-

![bio avatar source code](https://dev-to-uploads.s3.amazonaws.com/i/47udso79rsup31g3h5rl.png)

As long as you name your image **avatar** with jpeg, jpg, gif or png extension and put in the asset folder, it will pass to **bio** component. (Check out the [source code](https://github.com/gatsbyjs/themes/blob/master/packages/gatsby-theme-blog/src/components/bio.js))

I grab a handsome face photo, rename it to avatar.jpg and drag to the assets folder.

Restart the development server

Tada~

![My avatar show up in bio content](https://dev-to-uploads.s3.amazonaws.com/i/g3ttneoniwjqn6li7pb8.png)

If your avatar not showing up, try `gatsby clean` to delete the cache file and start the development server again.

## Change The Site's Font

The default system-ui font looks a bit skinny and un-organized for me.

I want to change to Roboto. How to change it?

Create **src/gatsby-plugin-theme-ui/index.js**

```js
export default {
  fonts: {
    body: `Roboto, "Helvetica Neue", sans-serif`,
  },
}
```

Save the file, and you'll see the entire website change to Roboto font.

You may ask why we don't need to import Roboto font in the first place?

If you check the [source code](https://github.com/gatsbyjs/themes/blob/master/packages/gatsby-theme-ui-preset/src/index.js), you'll notice Roboto font already built into gatsby theme blog.

## Conclusion

It's not much different compare to version 1.

I'll continue to explore gatsby-theme-blog 2.0 and write my experience about it.

(I'm a new to writing, if you found any part I can improve or mistake, please leave me a comment. Thank you in advance)