Publish 1 blog post to resolve issue

Author: Frans Allen

blog/hello-folks/index.md

@@ -0,0 +1,9 @@
+---
+path: "/blog/hello-folks/"
+title: "Hello folks!"
+date: "2020-10-04"
+author: "Frans Allen"
+tags: ["statically", "website", "design"]
+---
+
+Hello folks, do you like our new website design?

src/components/post-link.js

@@ -4,7 +4,7 @@ import { Link } from 'gatsby';
 const PostLink = ({ post }) => (
   <article>
     <Link
-      className="block border hover:shadow-lg border-gray-200 p-8 pt-10 mb-4"
+      className="block border hover:shadow-lg border-gray-400 p-8 pt-10 mb-4 rounded"
       to={post.frontmatter.path}
     >
       <h2 className="text-xl font-bold">{post.frontmatter.title}</h2>

src/pages-available/blog.js

@@ -1,13 +1,23 @@
 import React from 'react';
+import { graphql } from 'gatsby';
 
 import Layout from '../components/layout';
 import SEO from '../components/seo';
+import PostLink from '../components/post-link';
+
+const BlogPage = ({
+  data: {
+    allMarkdownRemark: { edges },
+  },
+}) => {
+  const Posts = edges
+    .filter((edge) => !!edge.node.frontmatter.date) // You can filter your posts based on some criteria
+    .map((edge) => <PostLink key={edge.node.id} post={edge.node} />);
 
-function BlogPage() {
   return (
     <Layout>
-      <SEO title="Blog" keywords={[`statically`, `blog`, `updates`]} />
-      <section className="mt-24 mb-20 max-w-4xl mx-auto">
+      <SEO title="Blog" keywords={[`statically`, `blogs`, `news`]} />
+      <section className="max-w-2xl mx-auto mt-20 px-5">
         <div className="text-center">
           <h1 className="page-title">We are preparing.</h1>
           <h2 className="page-desc max-w-3xl">
@@ -17,7 +27,7 @@ function BlogPage() {
 
         <form
           action="https://statically.us18.list-manage.com/subscribe/post?u=4dfd4ae04677bf4f6248182fc&amp;id=397ea962f2"
-          className="bg-white border border-gray-400 rounded px-8 pt-6 pb-8 mt-24 mb-4 max-w-xl mx-auto"
+          className="bg-white border border-gray-400 rounded px-8 pt-6 pb-8 mt-24 mb-16 max-w-xl mx-auto"
           name="Newsletter"
           method="POST"
         >
@@ -37,9 +47,33 @@ function BlogPage() {
             Subscribe
           </button>
         </form>
+        
+        {Posts}
       </section>
     </Layout>
   );
 };
 
 export default BlogPage;
+
+export const pageQuery = graphql`
+  query {
+    allMarkdownRemark(
+      sort: { order: DESC, fields: [frontmatter___date] }
+      filter: { frontmatter: { path: { regex: "/blog/" } } }
+    ) {
+      edges {
+        node {
+          id
+          excerpt(pruneLength: 160)
+          frontmatter {
+            date(formatString: "MMMM DD, YYYY")
+            path
+            title
+            author
+          }
+        }
+      }
+    }
+  }
+`;