Anson LowZF Blog

moon indicating dark mode
sun indicating light mode

Learning Gatsby.js Challenge 1

March 28, 2020 #Gatsbyjs, #100DaysOfGatsby

Thank you Gatsby’s team and Hashim Warren to start the 100DaysOfGatsby’s challenge. It’s a step by step guide to learn Gatsby.js from scratch. Every week, Hashim email the challenge together with link resources to help you complete the challenge.

Challenge 1: Create a Gatsby blog from scratch

First, I learned the basic of Gatsby.js in this Gatsby’s tutorial. I strongly encourage you to complete the official tutorial at least once, It help you understand how Gatsby.js works.

After complete the lessons, I check out the Gatsby Starter Library to find a starter for my blog. After applying the filter, there are around 133 blog starters. Time passed 1 hour++, I still can’t decide which one to use.

When I’m stuck, It means it’s a time to take a rest and grab a cup of coffee…

Come back to the desk, continue browsing Gatsby.js’ website. Tic toc, tic toc, don’t know how long the time had passed, I reached this page and see a starter which cannot be found in the starter library, weird huh?

Open Git Bash, Run the command:-

gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme

Then:-

cd my-blog
gatsby develop

What? error!? The following message show in terminal

gatsby starter blog theme error in terminal

Double-check the page,

Check 1, check 2, check 3, every word and spelling are correct. What is the problem? Scratching head…

Dig here dig there, wondering… continue scratching head…

20 mins later, oh… maybe I need to run:-

npm install

But, It just run an audit action,

Again, I try to run:-

gatsby develop

Open localhost:8000 in my browser.

The following error show up in the browser

gatsby starter blog theme error in browswer

Close Git Bash and open the project with VS Code and run:-

gatsby develop

Yo! It works. Hundred of (?) appear on my head.

I not sure why it’s not working in Git Bash but work in VS Code’s terminal which also using git Git Bash

Afterwards I update node packages npm update and gatsby develop to check out the site

This starter is pre-config with gatsby-theme-blog and it’s look similar to Dan Abramov’s blog named overreacted.io. I believe this theme is inspired by it.

I like this minimalist’s design and start to imagine I write like Dan Abramov

Bleh! Bang my head on to the wall, time to wake up and stop daydreaming.

Continue the guide…

Replace your avatar

The guide said

The blog theme starter ships with a solid gray image for the avatar. Add your own avatar by choosing the image you want, and overwriting the file located at /content/assets/avatar.png.

Let me find a handsome photo and put in the content/assets photo

Found one and rename it to ansonlowzf-handsome-photo.jpg

Drop it to content/assets folder

Hmmm… where the heck, I can modify and the path to ansonlowzf-handsome-photo.jpg?

Check gatsby-config.js file, package.json? I open every file and check line by line,

Oh, mama, how can I config it?

10 mins later,

I give up,

if you know how to do it, please share with me. My email is zhanfaye@gmail.com

No choice, I rename it to avatar.jpg

Finally, my handsome face show up,

Note

If your handsome face not showing up, Ctrl + c to stop your development server and gatsby-develop to restart it. If the problem persist, stop development server, close your editor, reopen your editor and start development server again.

Replace the content of the bio

This one is pretty straight forward

I check node_modules/gatsby-theme-blog

node module gatsby them blog

There are 11 components in the components folder, if you create a file exactly match the name and save it into src/gatsby-theme-blog/components. You can overwrite or modify the component with your code.

This is called component shadowing,

Thanks gatsby.js, I learn a new thing today.

To modify bio-content component, navigate to src/gatsby-theme-blog/components, open bio-content.js which already exist in the folder

Overwrite with your jsx code:-

import React, { Fragment } from "react"
import { Link } from "gatsby"
export default () => (
<Fragment>
Learning to be a digital marketer &amp; web developer.
<br />
<Link to="/about-me">More about me</Link>
</Fragment>
)

Ctrl + s, the bio content next to my handsome face get updated,

Cool, isn’t it?

Create a new blog post

Ctrl + c to stop your development server, then

Add a file with mdx extention my-new-blog.mdx and save it into content/posts

Add the following content to my-new-blog.mdx

---
title: My New Blog Post
date: 2020-01-31
---
My blog post content...

gatsby develop to start development server again

As simple as that, I created a blog post. Click the title to see my amazing blog content.

Change the color theme

There is a file colors.js exist in src/gatsby-theme-blog/gatsby-plugin-theme-ui

Just uncommented all code in the file, your theme immedietaly change to blue color theme.

If you don’t like the color theme, just modify each part of them with your color

import merge from "deepmerge"
import defaultThemeColors from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/colors"
const darkBlue = `#007acc`
const lightBlue = `#66E0FF`
const blueGray = `#282c35`
export default merge(defaultThemeColors, {
text: blueGray,
primary: darkBlue,
heading: blueGray,
modes: {
dark: {
background: blueGray,
primary: lightBlue,
highlight: lightBlue,
},
},
})

It’s that simple to start up a blog with gatsby.js and gatsby theme, try it yourself.

Thank you for reading…


A self-taught developer documenting and sharing his learning experience.
React.js • Gatsby.js • Next.js soon. More about me