DEV Community

Aisha Blake
Aisha Blake

Posted on

Gatsby 101: Build a Personal Website

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
Enter fullscreen mode Exit fullscreen mode

Add MDX and About page

npm install gatsby-plugin-mdx

Add gatsby-config.js to your root directory.

module.exports = {
  plugins: [
    `gatsby-plugin-mdx`
  ]
}
Enter fullscreen mode Exit fullscreen mode

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)!
Enter fullscreen mode Exit fullscreen mode
git add .
git commit -m "Your commit message"
git push
Enter fullscreen mode Exit fullscreen mode

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
            }
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
            }
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Add images

npm install gatsby-transformer-sharp gatsby-plugin-sharp gatsby-image
Enter fullscreen mode Exit fullscreen mode

Top comments (0)