---
# System prepended metadata

title: SIMPLE GATSBY MDX STEPS

---

# SIMPLE GATSBY MDX STEPS


`npm install -g gatsby-cli`

`gatsby new my-site`

`cd mysite`

create your repository on GitHub, then

```
git remote add origin https://github.com/J0RD4NK0FFM4N/jk-firstby.git
git branch -M main
git push -u origin main
```

add mdx

install with
```
npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
npm i gatsby-plugin-sharp gatsby-remark-images
```


add to config.js

```
`gatsby-plugin-sharp`,
`gatsby-remark-images`,
{
  resolve: `gatsby-plugin-mdx`,
  options: {
    defaultLayouts: {
      default: require.resolve("./src/components/mdx-layout.js"),
    },
    gatsbyRemarkPlugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 960,
        },
      },
    ],
  },
},
```

make the first page in the pages in the src folder:
```
//a react componet goes in here.//
import React from "react"
const TheFirstPage = function(){
  return(
      <p>so this is the first page of firstby</p>
  )
}
export default TheFirstPage
```
then check it out at localhost8000/thefirstpage:
![](https://i.imgur.com/pW0tyNB.png)






LAUREN

```
import React from 'react'

const myUncapitalizedComponent = () => {
    return (
        <>
        <h1>this works</h1>
        <p>because the uncapitalized variable isn't in JSX</p>
        </>
        
    )
}

export default myUncapitalizedComponent
```


make it look better:
create a mdx-layout.js file:
```import React from "react"

export default function(props){
  return(
    <div style={{
      backgroundColor: "plum",

    }}>
      <div style={{
        margin: "auto",
        width:"80%",
        marginTop: "50px",
        fontFamily: "sans-serif",
      }}>

      {props.children}
      </div>
    </div>
  )
}
```
check it out:
![](https://i.imgur.com/L93NYHt.png)

while I personally LOVE plum and am delighted that it exists as a known css color, I'll ultimately go with a slicker light grey. We actually found [this site that is suuuper cool!](https://casesandberg.github.io/react-color/) I found a grey using one of the many color pickers here! I had to do some digging though becaus I actually liked the opaque version that was hidden under the pickers. It was an alpha of .5 rather than 1 in case anyone else wants to know!






# 20210112 Daily Spin Up Notes

So today I wanted to see if I could
1. write a new script that works to get faster at that process
2. try a new template
3. make a site for Fall Undergraduate Reflections of Winter Teaching Week

## gatsby-go-dim
aka the script for creating a gatsby site using [this dimension themed starter](https://github.com/codebushi/gatsby-starter-dimension).

Here is a [preview of the dimension starter](https://gatsby-dimension.surge.sh/).

and the script:
```
#! /usr/bin/env zsh

PROJECT_NAME=$1
gatsby new $PROJECT_NAME https://github.com/codebushi/gatsby-starter-dimension
DATA_STRING="{\"name\":\"$PROJECT_NAME\",\"private\":false}"
curl -u "J0RD4NK0FFM4N:$GITHUB_TOKEN" https://api.github.com/user/repos -d $DATA_STRING
atom $PROJECT_NAME
cd $PROJECT_NAME
git remote add origin "https://github.com/mkuzmick/$PROJECT_NAME.git"
git branch -M main
git push -u origin main
open -a "Google Chrome" "http://localhost:8000"
gatsby develop

```
 Since I am bringing in relatively little content which I have curently in a google doc, I didn't include the part about pulling in a folder (and now think that maybe the whole data string part of this script is irrelavent?)
 
I didnt forget the thing I always forget (the whole chmod thing)! It's what launches the script as a real life script!


