Explore Gatsby Theme Blog 2.0

I started my blog in April 2020 by using 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

Open any terminal

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.
• 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

npm install gatsby-theme-blog

npm update 

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

code .

Open the file in VS Code

Configure Gatsby-config File

Open gatsby-config.js

You shall see something like below:-

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

Add gatsby-theme-blog as a plugin

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

Save the file and run:-

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:-

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

Save the file and run:-

gatsby develop

Visit http://localhost:8000/ in the browser

You shall see something similar to:-

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" 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.

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:-

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:-

I would like to amend this part:-

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 by Gatsby.

I find out which component is rendering the bio content part in gatsby theme blog's Github

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)

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:-

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:-

Add Avatar

If you check the bio compnent source code:-

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)

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

Restart the development server

Tada~

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

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, 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)