article template

gatsby-config.js

@@ -1,10 +1,33 @@
 module.exports = {
+  /* Your site config here */
+  plugins: [
+    'gatsby-plugin-sass',
+    'gatsby-plugin-netlify-cms',
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "content",
+        path: `${__dirname}/content`,
+      },
+    },
+    {
+      resolve: `gatsby-transformer-remark`,
+      options: {
+        // CommonMark mode (default: true)
+        commonmark: true,
+        // Footnotes mode (default: true)
+        footnotes: true,
+        // Pedantic mode (default: true)
+        pedantic: true,
+        // GitHub Flavored Markdown mode (default: true)
+        gfm: true,
+        // Plugins configs
+        plugins: [],
+      },
+    },
+  ],
   siteMetadata: {
     title: 'myblog.com',
     description: 'GatsbyJS blog site.'
-  },
-  plugins: [
-    'gatsby-plugin-sass',
-    'gatsby-plugin-netlify-cms'
-  ]
+  }
 }

gatsby-node.js

@@ -0,0 +1,42 @@
+const path = require('path')
+
+exports.createPages = async ({ actions, graphql }) => {
+  const { createPage } = actions
+
+  const articleTemplate = path.resolve('src/templates/article.jsx')
+
+  const result = await graphql(
+    `
+      {
+        allMarkdownRemark {
+          edges {
+            node {
+              frontmatter {
+                templateKey
+                slug
+                title
+              }
+            }
+          }
+        }
+      }
+    `
+  )
+
+  if (result.errors) {
+    throw result.errors
+  }
+
+  const all = result.data.allMarkdownRemark.edges
+  const articles = all.filter(article => article.node.frontmatter.templateKey === "article")
+
+  articles.forEach(({ node }) => {
+    createPage({
+      path: `article/${node.frontmatter.slug}/`,
+      component: articleTemplate,
+      context: {
+        slug: node.frontmatter.slug,
+      },
+    })
+  })
+}

package.json

@@ -17,6 +17,8 @@
     "gatsby": "^2.26.1",
     "gatsby-plugin-netlify-cms": "^4.9.0",
     "gatsby-plugin-sass": "^3.1.0",
+    "gatsby-source-filesystem": "^2.10.0",
+    "gatsby-transformer-remark": "^2.15.0",
     "netlify-cms-app": "^2.14.14",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",

src/pages/index.jsx

@@ -1,25 +1,48 @@
 import React from 'react';
-import { Link } from 'gatsby'
+import { Link, graphql } from 'gatsby'
 import Layout from '../components/Layout/Layout'
 import SEO from '../components/SEO/SEO'
 
-const IndexPage = () => {
+const IndexPage = ({ data: { articles: { edges } } }) => {
   return (
     <>
       <SEO title='Index page' />
       <Layout>
-        <h1>Articles (6):</h1>
+        <h1>Articles ({ edges.length }):</h1>
         <div className="main-posts">
-          <div className='post'>
+          {edges.map(({ node }, i) => (
+             <div className='post' key={i}>
                 <h2>
-                <Link to={'/'}>{'Article 1'}</Link>
+                  <Link to={`/article/${node.frontmatter.slug}`}>{node.frontmatter.title}</Link>
                 </h2>
-              <small>{'2021-01-01'}</small>
+                <small>{node.frontmatter.date}</small>
+                <p>{node.frontmatter.description}</p>
               </div>
+          ))}
         </div>
       </Layout>
     </>
   )
 }
 
+export const query = graphql`
+{
+    articles: allMarkdownRemark(
+      filter: { frontmatter: { templateKey: { eq: "article" } } }
+      sort: { order: DESC, fields: frontmatter___date }
+    ) {
+      edges {
+        node {
+          frontmatter {
+            slug
+            title
+            date(formatString: "D MMMM YYYY", locale: "ru-RU")
+            description
+          }
+        }
+      }
+    }
+  }
+`
+
 export default IndexPage

src/templates/article.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { graphql } from 'gatsby'
+import Layout from '../components/Layout/Layout'
+import SEO from '../components/SEO/SEO'
+
+const articleTemplate = ({ data: { article: { frontmatter, html } } }) => {
+  return (
+    <>
+      <SEO title={frontmatter.title} />
+      <Layout>
+        <div className="blog-post">
+          <div className="blog-post__title">
+            <h1>{frontmatter.title}</h1>
+          </div>
+          <div className="blog-post__date">
+            <small>{frontmatter.date}</small>
+          </div>
+          <div className="blog-post__description">
+            <p>{frontmatter.description}</p>
+          </div>
+          <div className="blog-post__img">
+            <img src={frontmatter.image} alt={frontmatter.title}/>
+          </div>
+          <div className="blog-post__content">
+           <div dangerouslySetInnerHTML={{ __html: html }}></div>
+          </div>
+        </div>
+      </Layout>
+    </>
+  )
+}
+
+export const query = graphql`
+  query Article($slug: String!) {
+    article: markdownRemark(frontmatter: {slug: {eq: $slug}}) {
+      html
+      frontmatter {
+        slug
+        title
+        description
+        date(formatString: "D MMMM YYYY", locale: "ru-RU")
+        image
+      }
+    }
+  }
+`
+
+export default articleTemplate