├── .gitignore
├── src
    ├── images
    │   └── icon.png
    ├── pages
    │   ├── about.js
    │   ├── index.js
    │   ├── blog
    │   │   ├── index.js
    │   │   └── {mdx.slug}.js
    │   └── 404.js
    └── components
    │   ├── layout.module.css
    │   └── layout.js
├── blog
    ├── another-post
    │   ├── tech.jpg
    │   └── index.mdx
    ├── latest-post
    │   ├── healthcare.jpg
    │   └── index.mdx
    ├── my-first-post
    │   ├── activism.jpg
    │   └── index.mdx
    └── yet-another-post
    │   ├── podcast.jpg
    │   └── index.mdx
├── gatsby-config.js
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .cache/
3 | public
4 | 


--------------------------------------------------------------------------------
/src/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainStack/my-gatsby-site/main/src/images/icon.png


--------------------------------------------------------------------------------
/blog/another-post/tech.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainStack/my-gatsby-site/main/blog/another-post/tech.jpg


--------------------------------------------------------------------------------
/blog/latest-post/healthcare.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainStack/my-gatsby-site/main/blog/latest-post/healthcare.jpg


--------------------------------------------------------------------------------
/blog/my-first-post/activism.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainStack/my-gatsby-site/main/blog/my-first-post/activism.jpg


--------------------------------------------------------------------------------
/blog/yet-another-post/podcast.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainStack/my-gatsby-site/main/blog/yet-another-post/podcast.jpg


--------------------------------------------------------------------------------
/blog/latest-post/index.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Latest Post"
 3 | date: "2021-09-08"
 4 | hero_image: "./healthcare.jpg"
 5 | hero_image_alt: "Healthcare is what keeps us all well"
 6 | hero_image_credit_text: "Unsplash"
 7 | hero_image_credit_link: "https://unsplash.com/photos/L8tWZT4CcVQ"
 8 | ---
 9 | 
10 | Extra Extra!!
11 | 


--------------------------------------------------------------------------------
/blog/yet-another-post/index.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Yet Another Post"
 3 | date: "2021-07-25"
 4 | hero_image: "./podcast.jpg"
 5 | hero_image_alt: "Podcasts are super legit"
 6 | hero_image_credit_text: "Unsplash"
 7 | hero_image_credit_link: "https://unsplash.com/photos/ZDNyhmgkZlQ"
 8 | ---
 9 | 
10 | Wow look at all this content. How do they do it?
11 | 


--------------------------------------------------------------------------------
/blog/another-post/index.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Another Post"
 3 | date: "2021-07-24"
 4 | hero_image: "./tech.jpg"
 5 | hero_image_alt: "Tech is where true progress comes from"
 6 | hero_image_credit_text: "Unsplash"
 7 | hero_image_credit_link: "https://unsplash.com/photos/SYTO3xs06fU"
 8 | ---
 9 | 
10 | Here's another post! It's even better than the first one!
11 | 


--------------------------------------------------------------------------------
/src/pages/about.js:
--------------------------------------------------------------------------------
 1 | // Step 1: Import React
 2 | import * as React from 'react'
 3 | import Layout from '../components/layout'
 4 | 
 5 | // Step 2: Define your component
 6 | const AboutPage = () => {
 7 |   return (
 8 |     <Layout pageTitle="About Me">
 9 |       <p>Hi there! I'm the proud creator of this site, which I built with Gatsby.</p>
10 |     </Layout>
11 |   )
12 | }
13 | // Step 3: Export your component
14 | export default AboutPage
15 | 


--------------------------------------------------------------------------------
/blog/my-first-post/index.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "My First Post"
 3 | date: "2021-07-23"
 4 | hero_image: "./activism.jpg"
 5 | hero_image_alt: "Activism is what changes the world"
 6 | hero_image_credit_text: "Unsplash"
 7 | hero_image_credit_link: "https://unsplash.com/photos/72doRdFx-Lo"
 8 | ---
 9 | 
10 | This is my first blog post! Isn't it *great*?
11 | 
12 | Some of my **favorite** things are:
13 | 
14 | * Petting dogs
15 | * Singing
16 | * Eating potato-based foods
17 | 


--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   siteMetadata: {
 3 |     siteUrl: "https://www.yourdomain.tld",
 4 |     title: "My First GraphQL Site",
 5 |   },
 6 |   plugins: [
 7 |     "gatsby-plugin-image",
 8 |     "gatsby-plugin-sharp",
 9 |     {
10 |       resolve: "gatsby-source-filesystem",
11 |       options: {
12 |         name: `blog`,
13 |         path: `${__dirname}/blog`,
14 |       }
15 |     },
16 |     "gatsby-plugin-mdx",
17 |     "gatsby-transformer-sharp",
18 |   ],
19 | };
20 | 


--------------------------------------------------------------------------------
/src/components/layout.module.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     margin: auto;
 3 |     max-width: 500px;
 4 |     font-family: sans-serif;
 5 |   }
 6 |   .heading {
 7 |     color: rebeccapurple;
 8 |   }
 9 |   .nav-links {
10 |     display: flex;
11 |     list-style: none;
12 |     padding-left: 0;
13 |   }
14 |   .nav-link-item {
15 |     padding-right: 2rem;
16 |   }
17 |   .nav-link-text {
18 |     color: black;
19 |   }
20 | 
21 |   .site-title {
22 |     font-size: 3rem;
23 |     color: gray;
24 |     font-weight: 700;
25 |     margin: 3rem 0;
26 |   }


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | // Step 1: Import React
 2 | import * as React from 'react'
 3 | import Layout from '../components/layout'
 4 | import { StaticImage } from 'gatsby-plugin-image'
 5 | 
 6 | // Step 2: Define your component
 7 | const IndexPage = () => {
 8 |   return (
 9 |     <Layout pageTitle="Home Page">
10 |       <p>I'm making this by following the Gatsby Tutorial.</p>
11 |       <StaticImage
12 |         alt="Clifford, a reddish-brown pitbull, posing on a couch and looking stoically at the camera"
13 |         src="../images/icon.png"
14 |       />
15 |     </Layout>
16 |   )
17 | }
18 | // Step 3: Export your component
19 | export default IndexPage
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-gatsby-site",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "description": "My Gatsby Site",
 6 |   "keywords": [
 7 |     "gatsby"
 8 |   ],
 9 |   "scripts": {
10 |     "develop": "gatsby develop",
11 |     "start": "gatsby develop",
12 |     "build": "gatsby build",
13 |     "serve": "gatsby serve",
14 |     "clean": "gatsby clean"
15 |   },
16 |   "dependencies": {
17 |     "@mdx-js/mdx": "^1.6.22",
18 |     "@mdx-js/react": "^1.6.22",
19 |     "gatsby": "^3.13.0",
20 |     "gatsby-plugin-image": "^1.13.0",
21 |     "gatsby-plugin-mdx": "^2.13.0",
22 |     "gatsby-plugin-sharp": "^3.13.0",
23 |     "gatsby-source-filesystem": "^3.13.0",
24 |     "gatsby-transformer-sharp": "^3.13.0",
25 |     "react": "^17.0.1",
26 |     "react-dom": "^17.0.1"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/pages/blog/index.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { Link, graphql } from 'gatsby'
 3 | import Layout from '../../components/layout'
 4 | 
 5 | const BlogPage = ({ data }) => {
 6 |     return (
 7 |         <Layout pageTitle="My Blog Posts">
 8 |             {
 9 |                 data.allMdx.nodes.map(node => (
10 |                     <article key={node.id}>
11 |                         <h2>
12 |                             <Link to={`/blog/${node.slug}`}>
13 |                                 {node.frontmatter.title}
14 |                             </Link>
15 |                         </h2>
16 |                         <p>Posted: {node.frontmatter.date}</p>
17 |                     </article>
18 |                 ))
19 |             }
20 |         </Layout>
21 |     )
22 | }
23 | 
24 | export const query = graphql`
25 |     query {
26 |         allMdx(sort: {fields: frontmatter___date, order: DESC}) {
27 |             nodes {
28 |                 frontmatter {
29 |                     date(formatString: "MMMM D, YYYY")
30 |                     title
31 |                 }
32 |                 id
33 |                 slug
34 |             }
35 |         }
36 |     }
37 | `
38 | 
39 | export default BlogPage


--------------------------------------------------------------------------------
/src/pages/404.js:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Link } from "gatsby"
 3 | 
 4 | // styles
 5 | const pageStyles = {
 6 |   color: "#232129",
 7 |   padding: "96px",
 8 |   fontFamily: "-apple-system, Roboto, sans-serif, serif",
 9 | }
10 | const headingStyles = {
11 |   marginTop: 0,
12 |   marginBottom: 64,
13 |   maxWidth: 320,
14 | }
15 | 
16 | const paragraphStyles = {
17 |   marginBottom: 48,
18 | }
19 | const codeStyles = {
20 |   color: "#8A6534",
21 |   padding: 4,
22 |   backgroundColor: "#FFF4DB",
23 |   fontSize: "1.25rem",
24 |   borderRadius: 4,
25 | }
26 | 
27 | // markup
28 | const NotFoundPage = () => {
29 |   return (
30 |     <main style={pageStyles}>
31 |       <title>Not found</title>
32 |       <h1 style={headingStyles}>Page not found</h1>
33 |       <p style={paragraphStyles}>
34 |         Sorry{" "}
35 |         <span role="img" aria-label="Pensive emoji">
36 |           😔
37 |         </span>{" "}
38 |         we couldn’t find what you were looking for.
39 |         <br />
40 |         {process.env.NODE_ENV === "development" ? (
41 |           <>
42 |             <br />
43 |             Try creating a page in <code style={codeStyles}>src/pages/</code>.
44 |             <br />
45 |           </>
46 |         ) : null}
47 |         <br />
48 |         <Link to="/">Go home</Link>.
49 |       </p>
50 |     </main>
51 |   )
52 | }
53 | 
54 | export default NotFoundPage
55 | 


--------------------------------------------------------------------------------
/src/components/layout.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { Link, useStaticQuery, graphql } from 'gatsby'
 3 | import {
 4 |   container,
 5 |   heading,
 6 |   navLinks,
 7 |   navLinkItem,
 8 |   navLinkText,
 9 |   siteTitle
10 | } from './layout.module.css'
11 | 
12 | const Layout = ({ pageTitle, children }) => {
13 |   const data = useStaticQuery(graphql`
14 |     query {
15 |       site {
16 |         siteMetadata {
17 |           title
18 |         }
19 |       }
20 |     }
21 |   `)
22 |   return (
23 |     <div className={container}>
24 |       <title>{pageTitle} | {data.site.siteMetadata.title}</title>
25 |       <header className={siteTitle}>{data.site.siteMetadata.title}</header>
26 |       <nav>
27 |         <ul className={navLinks}>
28 |           <li className={navLinkItem}>
29 |             <Link to="/" className={navLinkText}>
30 |               Home
31 |             </Link>
32 |           </li>
33 |           <li className={navLinkItem}>
34 |             <Link to="/about" className={navLinkText}>
35 |               About
36 |             </Link>
37 |           </li>
38 |           <li className={navLinkItem}>
39 |             <Link to="/blog" className={navLinkText}>
40 |               Blog
41 |             </Link>
42 |           </li>
43 |         </ul>
44 |       </nav>
45 |       <main>
46 |         <h1 className={heading}>{pageTitle}</h1>
47 |         {children}
48 |       </main>
49 |     </div>
50 |   )
51 | }
52 | export default Layout


--------------------------------------------------------------------------------
/src/pages/blog/{mdx.slug}.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { graphql } from 'gatsby'
 3 | import { MDXRenderer } from 'gatsby-plugin-mdx'
 4 | import { GatsbyImage, getImage } from 'gatsby-plugin-image'
 5 | import Layout from '../../components/layout'
 6 | 
 7 | const BlogPost = ({ data }) => {
 8 |     const image = getImage(data.mdx.frontmatter.hero_image)
 9 | 
10 |     return (
11 |         <Layout pageTitle={data.mdx.frontmatter.title}>
12 |             <p>{data.mdx.frontmatter.date}</p>
13 |             <GatsbyImage
14 |                 image={image}
15 |                 alt={image}
16 |             />
17 |             <p>
18 |                 Photo Credit:{" "}
19 |                 <a href={data.mdx.frontmatter.hero_image_credit_link}>
20 |                     {data.mdx.frontmatter.hero_image_credit_text}
21 |                 </a>
22 |             </p>
23 |             <MDXRenderer>
24 |                 {data.mdx.body}
25 |             </MDXRenderer>
26 |         </Layout>
27 |     )
28 | }
29 | 
30 | export const query = graphql`
31 |     query ($slug: String) {
32 |         mdx(slug: {eq: $slug}) {
33 |             body
34 |             frontmatter {
35 |                 title
36 |                 date(formatString: "MMMM D, YYYY")
37 |                 hero_image_alt
38 |                 hero_image_credit_link
39 |                 hero_image_credit_text
40 |                 hero_image {
41 |                     childImageSharp {
42 |                         gatsbyImageData
43 |                     }
44 |                 }
45 |             }
46 |         }
47 |     }
48 | `
49 | 
50 | export default BlogPost
51 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <a href="https://www.gatsbyjs.com/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter">
 3 |     <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
 4 |   </a>
 5 | </p>
 6 | <h1 align="center">
 7 |   Gatsby minimal starter
 8 | </h1>
 9 | 
10 | ## 🚀 Quick start
11 | 
12 | 1.  **Create a Gatsby site.**
13 | 
14 |     Use the Gatsby CLI to create a new site, specifying the minimal starter.
15 | 
16 |     ```shell
17 |     # create a new Gatsby site using the minimal starter
18 |     npm init gatsby
19 |     ```
20 | 
21 | 2.  **Start developing.**
22 | 
23 |     Navigate into your new site’s directory and start it up.
24 | 
25 |     ```shell
26 |     cd my-gatsby-site/
27 |     npm run develop
28 |     ```
29 | 
30 | 3.  **Open the code and start customizing!**
31 | 
32 |     Your site is now running at http://localhost:8000!
33 | 
34 |     Edit `src/pages/index.js` to see your site update in real-time!
35 | 
36 | 4.  **Learn more**
37 | 
38 |     - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
39 | 
40 |     - [Tutorials](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
41 | 
42 |     - [Guides](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
43 | 
44 |     - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
45 | 
46 |     - [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
47 | 
48 |     - [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
49 | 
50 | ## 🚀 Quick start (Gatsby Cloud)
51 | 
52 | Deploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/):
53 | 
54 | [<img src="https://www.gatsbyjs.com/deploynow.svg" alt="Deploy to Gatsby Cloud">](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-minimal)
55 | 


--------------------------------------------------------------------------------