feat: set up basic blog structure

src/pages/blog/index.tsx

@@ -0,0 +1,35 @@
+import * as React from "react"
+import { graphql, PageProps } from "gatsby"
+import Layout from "../../components/organisms/Layout"
+
+const Blog = ({ data: { allMdx } }: PageProps<Queries.BlogQuery>) => {
+  console.log("allMdx", allMdx)
+  return (
+    <Layout pageTitle="Blog">
+      {allMdx.edges.map(({ node: post }) => (
+        <a href={`//${location.host}/blog/${post.slug}`}>
+          <h2>{post.frontmatter?.title}</h2>
+        </a>
+      ))}
+    </Layout>
+  )
+}
+
+export const query = graphql`
+  query Blog {
+    allMdx {
+      edges {
+        node {
+          id
+          slug
+          frontmatter {
+            title
+            published
+          }
+        }
+      }
+    }
+  }
+`
+
+export default Blog

src/pages/blog/{mdx.slug}.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { graphql, PageProps } from "gatsby"
+import { MDXRenderer } from "gatsby-plugin-mdx"
+import Layout from "../../components/organisms/Layout"
+
+import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader";
+deckDeckGoHighlightElement();
+
+const BlogPost = ({ data: { mdx } }: PageProps<Queries.BlogPostQuery>) => {
+  return (
+    <Layout pageTitle={mdx?.frontmatter?.title ?? ""}>
+      <MDXRenderer>
+        {mdx?.body ?? ""}
+      </MDXRenderer>
+    </Layout>
+  )
+}
+
+export const query = graphql`
+  query BlogPost($id: String) {
+    mdx(id: {eq: $id}) {
+      id
+      body
+      frontmatter {
+        title
+        published
+        updated
+      }
+    }
+  }
+`
+
+export default BlogPost