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 • Gatsby.js • 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)
Top comments (0)