GatsbyでWebサイトを作るときに参考になるページ

2021.05.08

Gatsbyには公式ページにチュートリアルがある

Gatsby公式ページにはチュートリアルがある。

開発環境の準備から具体的なページの作成まで丁寧に書かれてはいるが、 英語であるため多少慣れていないと読みづらいという難点が。 （割と読みやすい英語ではありますが）

日本語で分かりやすいページを探す

どれもQiitaではあるが、以下のページは順を追ってWebページを作成している過程が説明されており分かりやすかった。

各投稿に「最近の投稿」のパートを追加してみる

「GatsbyjsでWordPress風の簡易ブログを作って勉強してみた」 を参考に、各投稿のページに「最近の投稿」欄を設けてみた。

src/componets/に直近3回の投稿のリストを表示させるためのrecent-post.jsを作成。

src/componets/recent-posts.js 
import * as React from "react"
import { useStaticQuery, graphql, Link } from "gatsby"

const RecentPosts = () => {
  const { 
    recentlyAllMarkdownRemark: { edges: recentlyBlogs }
  } = useStaticQuery(
    graphql`
      query {
        recentlyAllMarkdownRemark: allMarkdownRemark(
            sort: { fields: [frontmatter___date], order: DESC }
            limit: 3
          ) {
            edges {
             node {
               id
               frontmatter {
                 title
               }
               fields {
                slug
               }
             }
            }
          }
      } 
    `
  )

  return (
    <div>
        <h3>Recent Posts</h3>
        <ul>
          {recentlyBlogs.map(
            ({
              node: {
                id,
                frontmatter: { title },
                fields: { slug },
              },
            }) => (
              <li key={id}>
                <Link to={slug}>{title}</Link>
              </li>
            )
          )}
        </ul>
      </div>
  )
}

export default RecentPosts

あとはこのコンポーネントをsrc/templates/blog-post.jsの中で表示させたい箇所に

src/templates/blog-post.js 
import RecentPosts from "../components/recent-posts"

<RecentPosts />

のコードを加える。

Recent Posts