enable pagination

gatsby-config.js

@@ -3,6 +3,7 @@ module.exports = {
     title: `xdays`,
     author: `xdays`,
     description: `记录着我技术的成长，生活的点滴和感悟，能对你有所帮助那更好。`,
+    keywords: [`blog`, `gatsby`, `devops`, `fullstack`, `indie hacker`],
     siteUrl: `https://xdays.me/`,
     social: {
       github: `xdays`,

gatsby-node.js

@@ -51,6 +51,22 @@ exports.createPages = ({ graphql, actions }) => {
             },
           })
         })
+        // Create blog post list pages
+        const postsPerPage = 20
+        const numPages = Math.ceil(posts.length / postsPerPage)
+
+        Array.from({ length: numPages }).forEach((_, i) => {
+          createPage({
+            path: i === 0 ? `/` : `/${i + 1}`,
+            component: path.resolve('./src/templates/blog-list.js'),
+            context: {
+              limit: postsPerPage,
+              skip: i * postsPerPage,
+              numPages,
+              currentPage: i + 1,
+            },
+          })
+        })
       })
     )
   })

src/templates/blog-list.js

@@ -0,0 +1,117 @@
+import React from 'react'
+import { Link, graphql } from 'gatsby'
+
+import Bio from '../components/Bio'
+import Layout from '../components/Layout'
+import SEO from '../components/seo'
+import { rhythm } from '../utils/typography'
+
+class BlogIndex extends React.Component {
+  render() {
+    const { data } = this.props
+    const siteTitle = data.site.siteMetadata.title
+    const siteKeywords = data.site.siteMetadata.keywords
+    const posts = data.allMarkdownRemark.edges
+    const { currentPage, numPages } = this.props.pageContext
+    const isFirst = currentPage === 1
+    const isLast = currentPage === numPages
+    const prevPage = currentPage - 1 === 1 ? '/' : (currentPage - 1).toString()
+    const nextPage = (currentPage + 1).toString()
+
+    return (
+      <Layout location={this.props.location} title={siteTitle}>
+        <SEO title={siteTitle} keywords={siteKeywords} />
+        <Bio />
+        {posts.map(({ node }) => {
+          const title = node.frontmatter.title || node.fields.slug
+          return (
+            <div key={node.fields.slug}>
+              <h3
+                style={{
+                  marginBottom: rhythm(1 / 4),
+                }}
+              >
+                <Link style={{ boxShadow: `none` }} to={node.fields.slug}>
+                  {title}
+                </Link>
+              </h3>
+              <small>{node.frontmatter.date}</small>
+              <p dangerouslySetInnerHTML={{ __html: node.excerpt }} />
+            </div>
+          )
+        })}
+        <ul
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            listStyle: 'none',
+            padding: 0,
+          }}
+        >
+          {!isFirst && (
+            <Link to={prevPage} rel="prev">
+              ← Previous Page
+            </Link>
+          )}
+          {Array.from({ length: numPages }, (_, i) => (
+            <li
+              key={`pagination-number${i + 1}`}
+              style={{
+                margin: 0,
+              }}
+            >
+              <Link
+                to={`/${i === 0 ? '' : i + 1}`}
+                style={{
+                  padding: rhythm(1 / 4),
+                  textDecoration: 'none',
+                  color: i + 1 === currentPage ? '#ffffff' : '',
+                  background: i + 1 === currentPage ? '#007acc' : '',
+                }}
+              >
+                {i + 1}
+              </Link>
+            </li>
+          ))}
+          {!isLast && (
+            <Link to={nextPage} rel="next">
+              Next Page →
+            </Link>
+          )}
+        </ul>
+      </Layout>
+    )
+  }
+}
+
+export default BlogIndex
+
+export const pageQuery = graphql`
+  query blogPageQuery($skip: Int!, $limit: Int!) {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+    allMarkdownRemark(
+      sort: { fields: [frontmatter___date], order: DESC }
+      limit: $limit
+      skip: $skip
+    ) {
+      edges {
+        node {
+          excerpt
+          fields {
+            slug
+          }
+          frontmatter {
+            date(formatString: "MMMM DD, YYYY")
+            title
+          }
+        }
+      }
+    }
+  }
+`