Footer bottom in GastbyJS

I have been building my portfolio website and choose Gatsby. One problem that I encountered early on was making my footer stick at the bottom of the page. In this article, I'll be sharing how I overcame it.

Note: I used the starter kit Gatsby-starter-default as a starting point.

<div className="site-content">
   <Header siteTitle={data.site.siteMetadata.title} />
   <main>{children}</main>
   <footer>
      © {new Date().getFullYear()}, Built with
     {` `}
     <a href="https://www.gatsbyjs.org">Gatsby</a>
   </footer>
 </div>

First, in the layout.js file found in the component folder, wrap the header, main, and footer element in a div and give it a class. The class name doesn't matter.

.site-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

Then in the layout.css file found in the same folder, write the following code. This will make your footer stick to the bottom of your page.