This is a live document for my Codeland workshop! Come back later for a cleaned up version!
git add .
git commit -m "Your commit message"
git push
npm install gatsby-plugin-mdx
Add MDX and About page
npm install gatsby-plugin-mdx
Add gatsby-config.js to your root directory.
module.exports = {
plugins: [
`gatsby-plugin-mdx`
]
}
Create a new file at src/pages/about.mdx
# About me
I'm a really wonderful person. Say hi!
Check out my [blog](https://aisha.codes)!
git add .
git commit -m "Your commit message"
git push
Add a blog
npm install gatsby-theme-blog
Update gatsby-config.js:
module.exports = {
plugins: [
`gatsby-plugin-mdx`,
{
resolve: `gatsby-theme-blog`,
options: {
basePath: `/blog`,
mdxOtherwiseConfigured: true
}
}
]
}
Create a content directory. Inside that, create directories called assets and posts.
Add an image called avatar.jpg to content/assets. .gif and .png will work, too!
Add a file called first-post.mdx to content/posts. It should look something like the following:
---
title: "My First Blog Post"
date: 2020-07-24
---
Today is a good day!
Shadow bio-content.js
Add a new file at src/gatsby-theme-blog/components/bio-content.js. This corresponds to the location of the theme file you're trying to update. Your new file should look something like this:
import React, { Fragment } from "react"
const BioContent = () => (
<Fragment>
Words by <a href="https://aisha.codes/">Aisha Blake</a>.
<br />
I'm a speaker, teacher, and software engineer! I can't spell.
</Fragment>
)
export default BioContent
Customize data
Add a siteMetadata object to your gatsby-config.js. The Gatsby blog theme is looking for certain data in certain places within that object. It should now looks something like this:
module.exports = {
siteMetadata: {
title: `Aisha Blake`,
author: `Aisha Blake`,
description: `Aisha Blake's personal site for Gatsby 101 at CodeLand`,
siteUrl: `https://gatsby-101-personal-site.netlify.app`,
alternateSite: `https://aisha.codes`,
social: [
{
name: `Twitter`,
url: `https://twitter.com/AishaBlake`,
},
{
name: `GitHub`,
url: `https://github.com/AishaBlake`,
},
],
},
plugins: [
`gatsby-plugin-mdx`,
{
resolve: `gatsby-theme-blog`,
options: {
basePath: `/blog`,
mdxOtherwiseConfigured: true
}
}
]
}
Add images
npm install gatsby-transformer-sharp gatsby-plugin-sharp gatsby-image
Top comments (0)