{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/create-gatsby-markdown-blog-website/", "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"a723ff61-472b-5e27-8834-ad0318aeb460","excerpt":"In this article i will explain you step by step to create gatsby blog website using markdown files Step 1: Install gatsby cli to use gatsby command globally…","html":"

In this article i will explain you step by step to create gatsby blog website using markdown files

\n

Step 1: Install gatsby cli to use gatsby command globally

\n
npm install -g gatsby-cli\n
\n

Step 2: Create new project using gatsby

\n
gatsby new personal-blog\n
\n

Step 3: Install bootstrap, jquery and call it in gastby-browser.js file

\n

In order to use bootstrap and jquery in our gatsby blog website we need to install bootstrap and jquery and call the\ninstalled package inside gatsby-browser.js file

\n
npm install bootstrap jquery @popperjs/core --save\n
\n

Update gatsby-browser.js with the following code

\n
//Update gatsby-browser.js file with the following\n//code after installing above package\n\n/**\n * Implement Gatsby's Browser APIs in this file.\n *\n * See: https://www.gatsbyjs.com/docs/browser-apis/\n */\n\n// You can delete this file if you're not using it\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport \"jquery/dist/jquery.min.js\";\nimport \"@popperjs/core/dist/umd/popper.min.js\";\nimport \"bootstrap/dist/js/bootstrap.min.js\";\n
\n

Step 4: Adding plugins to the project we created above

\n
npm install --save gatsby-plugin-catch-links gatsby-plugin-react-helmet gatsby-source-filesystem gatsby-transformer-remark\n
\n

gatsby-plugin-catch-links implements the history pushState API and does not require a page reload on navigating to a different page in the blog

\n

gatsby-plugin-react-helmet allows for modification of the head tags

\n

gatsby-source-filesystem is a gatsby source plugin for sourcing data into your Gatsby application from your local filesystem like markdown files

\n

gatsby-transformer-remark a transformer plugin takes some underlying data format that is not inherently usable in its current form (e.g. Markdown, json, yaml, etc.) and transforms it into a format that Gatsby can understand and that you can query against with GraphQL

\n

Step 5: Update gatsby-config.js file with all the plugins installed above

\n

Create blog folder under src folder in your project where you will be creating markdown files for your blog and update the path under gatsby-source-filesystem plugin as done in the code below

\n
//Update gatsby-config.js with the following code\nmodule.exports = {\n  siteMetadata: {\n    title: `Personal Blog`,\n    description: `Personal blog with markdown files`,\n    author: `@gatsbyjs`,\n    siteUrl: `http://localhost:8000`,\n  },\n  plugins: [\n    `gatsby-plugin-react-helmet`,\n    `gatsby-plugin-image`,\n    {\n      resolve: `gatsby-source-filesystem`,\n      options: {\n        path: `${__dirname}/src/blog`,\n        name: `blog`,\n      },\n    },\n    {\n      resolve: `gatsby-source-filesystem`,\n      options: {\n        name: `images`,\n        path: `${__dirname}/src/images`,\n      },\n    },\n    {\n      resolve: \"gatsby-transformer-remark\",\n      options: {\n        plugins: [],\n      },\n    },\n    `gatsby-transformer-sharp`,\n    `gatsby-plugin-sharp`,\n    {\n      resolve: `gatsby-plugin-manifest`,\n      options: {\n        name: `gatsby-starter-default`,\n        short_name: `starter`,\n        start_url: `/`,\n        background_color: `#663399`,\n        display: `minimal-ui`,\n        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.\n      },\n    },\n  ],\n};\n
\n

Step 6: Creating our first blog using markdown files

\n
//Update src/blog/myfirst-blog/index.md with the following code\n// if there is no such file and folder create it\n---\npath: \"/myfirst-blog\"\ndate: 2022-5-20T17:12:33.962Z\ntitle: \"My First Gatsby blog Post\"\n---\nHello, my first blog post!\n
\n

Step 7: Create Template for your blog post

\n

In order to render your blog on path /myfirst-blog and display the correct content we need to create a template name blog-post.js under src/templates folder for our blog post and display the content. Every time path changes content will change

\n
//Update src/templates/blog-post.js with the following code\n//Create the file and folder if it doesn't exist\n\nimport * as React from \"react\";\nimport Layout from \"../components/layout\";\nimport Seo from \"../components/seo\";\nimport { graphql } from \"gatsby\";\n\nconst BlogPost = ({ data }) => {\n  const { markdownRemark: post } = data;\n  return (\n    <Layout>\n      <Seo\n        description={post.frontmatter.description}\n        title={post.frontmatter.title}\n      />\n      <div className=\"container\">\n        <div className=\"row\">\n          <div style={{ minHeight: \"100vh\" }} className=\"col-md-8 mx-auto mt-5\">\n            <h1>{post.frontmatter.title}</h1>\n            <div\n              className=\"blog-post-content\"\n              dangerouslySetInnerHTML={{ __html: post.html }}\n            />\n          </div>\n        </div>\n      </div>\n    </Layout>\n  );\n};\n\nexport const pageQuery = graphql`\n  query BlogPostByPath($path: String!) {\n    markdownRemark(frontmatter: { path: { eq: $path } }) {\n      html\n      frontmatter {\n        date(formatString: \"MMMM DD, YYYY\")\n        path\n        title\n        description\n      }\n    }\n  }\n`;\n\nexport default BlogPost;\n
\n

Step 8: Create Static pages for each blog

\n

Here for blog we don't have calculated estimated that how many blogs we will be creating may be we can create 10 blogs or 50 or may be 100 and more so accordingly we need to create pages dynamically as per mark down files thus we will be writing code for creating such pages for each blog which we have created using markdown files and we will be using same template for every blog

\n

Update the following code in gatsby-node.js file to create pages for our blog using template as blog-post.js

\n
//Update gatsby-node.js file with the following code\n\nconst path = require(\"path\");\n\nexports.createPages = async ({ actions, graphql, reporter }) => {\n  const { createPage } = actions;\n\n  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`);\n\n  const result = await graphql(`\n    {\n      allMarkdownRemark(\n        sort: { order: DESC, fields: [frontmatter___date] }\n        limit: 1000\n      ) {\n        edges {\n          node {\n            frontmatter {\n              path\n            }\n          }\n        }\n      }\n    }\n  `);\n\n  if (result.errors) {\n    reporter.panicOnBuild(`Error while running GraphQL query.`);\n    return;\n  }\n\n  result.data.allMarkdownRemark.edges.forEach(({ node }) => {\n    createPage({\n      path: node.frontmatter.path,\n      component: blogPostTemplate,\n      context: {}, // additional data can be passed via context\n    });\n  });\n};\n
\n

Once updated run below command to start the project

\n
npm run develop\n
\n

Visit this url http://localhost:8000/myfirst-blog you will be able to see the blog listing

\n

Step 9: Create blog listing page

\n

Update your src/pages/index.js page with the following code

\n
//Update pages/index.js page or any other page of your choice\n// for blog listing\n\nimport * as React from \"react\";\nimport Layout from \"../components/layout\";\nimport Seo from \"../components/seo\";\nimport { Link, graphql } from \"gatsby\";\n//import * as styles from \"../components/index.module.css\"\n\nconst IndexPage = ({ data }) => {\n  const { edges: posts } = data.allMarkdownRemark;\n  return (\n    <Layout>\n      <Seo title=\"Home\" />\n\n      <main role=\"main\">\n        <section className=\"jumbotron text-center\">\n          <div className=\"container\">\n            <h1 className=\"jumbotron-heading\">My Blog</h1>\n            <p className=\"lead text-muted\">\n              Something short and leading about the collection below—its\n              contents, the creator, etc. Make it short and sweet, but not too\n              short so folks don't simply skip over it entirely.\n            </p>\n          </div>\n        </section>\n        <div className=\"album py-5 bg-light\">\n          <div className=\"container\">\n            <div className=\"row\">\n              {posts\n                .filter((post) => post.node.frontmatter.title.length > 0)\n                .map(({ node: post }) => {\n                  return (\n                    <div className=\"col-md-4\">\n                      <div className=\"card mb-4 box-shadow\">\n                        <img\n                          className=\"card-img-top\"\n                          data-src=\"holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail\"\n                          alt=\"Thumbnail [100%x225]\"\n                          style={{\n                            height: \"225px\",\n                            width: \"100%\",\n                            display: \"block\",\n                          }}\n                          src=\"data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_180ec0d40cf%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_180ec0d40cf%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.7109375%22%20y%3D%22120.15%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\"\n                          data-holder-rendered=\"true\"\n                        />\n                        <div className=\"card-body\">\n                          <h5>\n                            <Link\n                              style={{ color: \"#000\" }}\n                              to={post.frontmatter.path}\n                            >\n                              {post.frontmatter.title}\n                            </Link>\n                          </h5>\n                          <p className=\"card-text\">{post.excerpt}</p>\n                        </div>\n                      </div>\n                    </div>\n                  );\n                })}\n            </div>\n          </div>\n        </div>\n      </main>\n    </Layout>\n  );\n};\n\nexport default IndexPage;\n\nexport const pageQuery = graphql`\n  query IndexQuery {\n    allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {\n      edges {\n        node {\n          excerpt(pruneLength: 250)\n          id\n          frontmatter {\n            title\n            date(formatString: \"MMMM DD, YYYY\")\n            path\n          }\n        }\n      }\n    }\n  }\n`;\n
\n

Step 10: Update header.js, footer.js ,layout.css to beautify your blog with bootstrap css

\n

Update /src/components/layout.css with the following css

\n
/*Update /src/components/layout.css with the following css*/\n\n:root {\n  --jumbotron-padding-y: 3rem;\n}\n\n.jumbotron {\n  padding-top: var(--jumbotron-padding-y);\n  padding-bottom: var(--jumbotron-padding-y);\n  margin-bottom: 0;\n  background-color: #fff;\n}\n@media (min-width: 768px) {\n  .jumbotron {\n    padding-top: calc(var(--jumbotron-padding-y) * 2);\n    padding-bottom: calc(var(--jumbotron-padding-y) * 2);\n  }\n}\n\n.jumbotron p:last-child {\n  margin-bottom: 0;\n}\n\n.jumbotron-heading {\n  font-weight: 300;\n}\n\n.jumbotron .container {\n  max-width: 40rem;\n}\n\nfooter {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n\nfooter p {\n  margin-bottom: 0.25rem;\n}\n\n.box-shadow {\n  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);\n}\n
\n

Update src/components/header.js file with the following code

\n
//Update src/components/header.js file with the following code\n\nimport * as React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Link } from \"gatsby\";\n\nconst Header = ({ siteTitle }) => (\n  <header>\n    <div className=\"collapse bg-dark\" id=\"navbarHeader\">\n      <div className=\"container\">\n        <div className=\"row\">\n          <div className=\"col-sm-8 col-md-7 py-4\">\n            <h4 className=\"text-white\">About</h4>\n            <p className=\"text-muted\">\n              Add some information about the album below, the author, or any\n              other background context. Make it a few sentences long so folks\n              can pick up some informative tidbits. Then, link them off to some\n              social networking sites or contact information.\n            </p>\n          </div>\n          <div className=\"col-sm-4 offset-md-1 py-4\">\n            <h4 className=\"text-white\">Contact</h4>\n            <ul className=\"list-unstyled\">\n              <li>\n                <Link to=\"/\" className=\"text-white\">\n                  Follow on Twitter\n                </Link>\n              </li>\n              <li>\n                <Link to=\"/\" className=\"text-white\">\n                  Like on Facebook\n                </Link>\n              </li>\n              <li>\n                <Link to=\"/\" className=\"text-white\">\n                  Email me\n                </Link>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div className=\"navbar navbar-dark bg-dark box-shadow\">\n      <div className=\"container d-flex justify-content-between\">\n        <Link to=\"/\" className=\"navbar-brand d-flex align-items-center\">\n          <strong>{siteTitle}</strong>\n        </Link>\n        <button\n          className=\"navbar-toggler\"\n          type=\"button\"\n          data-toggle=\"collapse\"\n          data-target=\"#navbarHeader\"\n          aria-controls=\"navbarHeader\"\n          aria-expanded=\"false\"\n          aria-label=\"Toggle navigation\"\n        >\n          <span className=\"navbar-toggler-icon\" />\n        </button>\n      </div>\n    </div>\n  </header>\n);\n\nHeader.propTypes = {\n  siteTitle: PropTypes.string,\n};\n\nHeader.defaultProps = {\n  siteTitle: ``,\n};\n\nexport default Header;\n
\n

Update src/components/footer.js file with the following code

\n
//Update src/components/footer.js with the following code\n//If file doesn't exist create the file under same path\n\nimport * as React from \"react\";\nimport PropTypes from \"prop-types\";\n//import { Link } from \"gatsby\"\n\nconst Footer = ({ siteTitle }) => (\n  <footer className=\"text-muted\">\n    <div className=\"container\">\n      <p>\n        {\" \"}\n        © {new Date().getFullYear()} {siteTitle}\n      </p>\n    </div>\n  </footer>\n);\n\nFooter.propTypes = {\n  siteTitle: PropTypes.string,\n};\n\nFooter.defaultProps = {\n  siteTitle: ``,\n};\n\nexport default Footer;\n
\n

Update src/components/layout.js file with the following code

\n
/**\n * Layout component that queries for data\n * with Gatsby's useStaticQuery component\n *\n * See: https://www.gatsbyjs.com/docs/use-static-query/\n */\n\nimport * as React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { useStaticQuery, graphql } from \"gatsby\";\n\nimport Header from \"./header\";\nimport Footer from \"./footer\";\nimport \"./layout.css\";\n\nconst Layout = ({ children }) => {\n  const data = useStaticQuery(graphql`\n    query SiteTitleQuery {\n      site {\n        siteMetadata {\n          title\n        }\n      }\n    }\n  `);\n\n  return (\n    <>\n      <Header siteTitle={data.site.siteMetadata?.title || `Title`} />\n      {children}\n      <Footer siteTitle={data.site.siteMetadata?.title || `Title`} />\n    </>\n  );\n};\n\nLayout.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n\nexport default Layout;\n
\n
Congratulations! you have just created a blog website
","fields":{"slug":"/create-gatsby-markdown-blog-website/"},"frontmatter":{"title":"Create Gatsby responsive blog website with markdown files","date":"May 25, 2022","description":"In this article i will explain you step by step to create gatsby blog website using markdown files","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Gatsby.jpg"}},"previous":{"fields":{"slug":"/create-custom-pipe-angular/"},"frontmatter":{"title":"How to create custom pipe in angular","date":"May 10, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/custom-pipe-in-angular.jpeg"}},"next":{"fields":{"slug":"/create-gatsby-wordpress-portfolio-website/"},"frontmatter":{"title":"Create Gatsby and Wordpress portfolio website step by step","date":"June 06, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/Gatsby.jpg"}}},"pageContext":{"id":"a723ff61-472b-5e27-8834-ad0318aeb460","previousPostId":"420f4ce5-7f37-5153-8b49-85d5231fdcc8","nextPostId":"01234bb6-dd89-55cf-9e13-d2f90c279338"}}, "staticQueryHashes": ["3860684146"]}