かちのぶろぐ

gatsby-starter-blogで生成されるブログポストのURLを変更する

February 09, 2019

はじめに

gatsby-starter-blogで生成されるブログポストはルート直下にできます。 しかし、ブログポスト以外のページ（例えば自己紹介ページ）を作る予定がある場合、少々不便です。 また、デフォルトではすべてのマークダウンファイルをホームに表示するように書かれているため、ブログポスト以外のページをマークダウンで書くことはできません。（ブログポスト一覧に表示されてしまうから）

そこで、ブログポストは/blog/下に作られるようにし、ホームでは/blog/以下にあるページのみを表示させるようにしてみます。

URLの変更

content/blog内にある場合だけURLを変更。

   const { createNodeField } = actions
 
   if (node.internal.type === `MarkdownRemark`) {
-    const value = createFilePath({ node, getNode })
+    let value = createFilePath({ node, getNode })
+    if (node.fileAbsolutePath.indexOf(`content/blog`) > -1) {
+      value = `/blog${value}`
+    }
     createNodeField({
       name: `slug`,
       node,

URLが変更されていることを確認しましょう。

gatsby deploy

ブログポスト以外のページをマークダウンで書く

まずGatsbyにsrc/pagesの中も見るように指示。

     siteUrl: `https://n.k-kachi.net/`,
   },
   plugins: [
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/src/pages`,
+        name: `src`,
+      },
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {

つづいてsrc/pagesにマークダウンファイルを置く。

---
title: About Me
---

Hello!!

この状態で一旦ホームにどう表示されるか見てみましょう。

gatsby deploy

一覧リストにAbout Meも表示されてしまっていますね。

/blog/以下にあるページのみを表示

node.fields.slugにルート以下のパスが格納されているため、これが/blog/で始まる場合のみ表示されるようにします。

           keywords={[`blog`, `gatsby`, `javascript`, `react`]}
         />
         <Bio />
-        {posts.map(({ node }) => {
+        {posts
+        .filter(({ node }) => node.fields.slug.startsWith("/blog/"))
+        .map(({ node }) => {
           const title = node.frontmatter.title || node.fields.slug
           return (
             <div key={node.fields.slug}>

これでAbout Meのページが一覧からなくなったと思います。 一応About Meのページが存在することをhttp://localhost:8000/about/にアクセスして確認しましょう

かち

吾輩はかちである。知識はまだない。