「GatsbyJS」の記事 - Crieit

microCMS の X-API-KEY リニューアルに合わせて Vercel の設定と Gatsby のプロジェクトを更新する

2021-11-05T21:44:25+09:00

メール通知で microCMS の X-API-KEY がリニューアルされたという通知を受け取って対応することにしました。

APIキーをX-MICROCMS-API-KEYへとリニューアルしました。 | microCMSブログ

従来のX-API-KEY, X-WRITE-API-KEY, X-DRAFT-KEYは統合され、X-MICROCMS-API-KEYに変更となります。

APIキーをX-MICROCMS-API-KEYへとリニューアルしました。 | microCMSブログ

とのことなので、これに対応することにします。

microCMS

まずは microCMS 側の作業。新しいAPIキーを発行し直します。

「APIキー管理」のAPIキーの一覧で「旧X-API-KEY」があることを確認。

選択して詳細画面から「削除」を選択。

続いて新しいAPIキーを発行し直します。

X-MICROCMS-API-KEY を発行します。今回はAPI経由では参照しかしないので GET のみの権限とします。

発行されたAPIキーをコピーして控えます。

これで microCMS 側の作業は完了です。

Vercel

続いて Vercel にログインします。

プロジェクトの「Settings」から「Enviroment Variables」に進みます。

API_KEYの値を先ほど控えた値に変更します。

これでOKかと思ったのですが……。

00:03:22.489    error microCMS API ERROR:
00:03:22.489    statusCode: 401
00:03:22.489    message: X-MICROCMS-API-KEY header is invalid.
00:03:22.492    not finished source and transform nodes - 1.046s
00:03:23.631    Error: Command "npm run build" exited with 1

ビルドログを見ると 401エラーでコケていますね。認証に失敗しているようです。

microCMSの新しいX-MICROCMS-API-KEYに対応する | Vanilla note

検索すると、 Gatsby の microCMS 連携のパッケージも更新しないといけないとのこと。

Gatsby プロジェクト

そこで該当パッケージのバージョンをアップデートします。

  "dependencies": {
    // 略
    "gatsby-source-microcms": "^1.2.1",
    // 略
  }

gatsby-source-microcms を

  "dependencies": {
    // 略
    "gatsby-source-microcms": "^2.0.0",
    // 略
  }

2.0.0 にアップデート。

これでビルドを走らせ、正常に完了することを確認しました。

参考

Vercel に関しては自分の過去の記事も参考にして辿りつつ……。

Gatsby.js + Vercel + microCMS の JAMStack 環境を構築する – Ewig Leere(Lab2)

Gatsby.js + Vercel + microCMS の JAMStack 環境を構築する

2021-08-29T00:49:34+09:00

microCMS の設定が完了したので、次は microCMS からデータを取得するように Gatsby.js の方に手を入れます。また、 microCMS と Vercel に設定を加えて連携させ、 Gatsby.js + Vercel + microCMS の JAMStack 環境を構築します。

改修

今回はleonids: Gatsby Starter | Gatsbyを使用しているので、その前提で。

テーマが変わったり、 microCMS のスキーマが変われば諸々の調整が必要となります。

パッケージの追加

> yarn add yarn add gatsby-source-microcms

## 略

Done in 231.79s.

> yarn add marked

## 略

Done in 7.30s.

今回は microCMS を利用するので gatsby-source-microcms を追加します。また、本文コンテンツは Markdown で記述しているのですが Gatsby.js の自前の Markdownパーサまで手が届かなかったので安直に marked を使いました。

それから、内部的には dotenv も使用していますが yarn.lock を見たら既に入っていたので追加はしていません。

gatsby-config.js

さて、改修の最初は Gatsby.js の設定から。

module.exports = {

  // 略

  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },

    // 略

    },
      `gatsby-plugin-feed`,
    {

    // 略

  ],

  // 略

}

これを以下のように修正。

const activeEnv = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV
if(activeEnv === "development") {
  require("dotenv").config({
    path: `.env.${activeEnv}`,
  })
}

module.exports = {

  // 略

  plugins: [
    {
      resolve: 'gatsby-source-microcms',
      options: {
        apiKey: process.env.API_KEY,
        serviceId: process.env.SERVICE_ID,
        apis: [{
          endpoint: process.env.APIS_ENDPOINT,
        }],
      },
    },

    // 略

    {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
              }
            }
          }
        `,
        feeds: [
          {
            serialize: ({ query: { site, allMicrocmsHogeHogeBlog } }) => {
              return allMicrocmsHogeHogeBlog.edges.map(edge => {
                return Object.assign({}, edge.node, {
                  description: edge.node.keywords,
                  date: edge.node.date,
                  url: site.siteMetadata.siteUrl + edge.node.slug,
                  guid: site.siteMetadata.siteUrl + edge.node.slug,
                  custom_elements: [{ "content:encoded": edge.node.body }],
                })
              })
            },
            query: `
              {
                allMicrocmsHogeHogeBlog(sort: {fields: [date], order: DESC}) {
                  totalCount
                  pageInfo {
                    perPage
                    pageCount
                  }
                  edges {
                    node {
                      body
                      createdAt
                      date
                      id
                      keywords
                      publishedAt
                      revisedAt
                      slug
                      title
                      updatedAt
                    }
                  }
                }
              }
            `,
            output: "/rss.xml",
            title: "HogeHoge Blog's RSS Feed",
          },
        ],
      },
    },

    // 略

  ],

  // 略

}

変更点は以下。

ローカルのファイルをコンテンツのリソース参照先としていたのを microCMS をリソースとするように修正
gatsby develop 時は問題なかったのですが、 gatsby build 時に RSSフィードを生成する gatsby-plugin-feedプラグインが通常の Markdown の構成をデフォルトにしており、 microCMS に置き換えたことでデータスキーマが異なるとエラーになってしまいました (本番ビルド時に気付いた)。
- そこで、 gatsby-plugin-feedプラグインの GraphQL も今回定義した microCMS のスキーマに沿って変更しました。併せて serializeメソッドの中身もスキーマに合わせて調整。
gatsby-source-microcms | Gatsbyのサンプルコードでは Git 管理下になる gatsby-config.js に APIキー等の情報がそのままベタ書きになってしまうので、 dotenv で外部ファイルに取り出すことで隠蔽しました
- 後述しますが、 Vercel の環境変数も process.env で渡ってくるので、development の場合は dotenv 経由の外部ファイルをパラメータのリソースに、 production の場合は Vercel の環境変数をリソースとするように書き分けました

gatby-node.js

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const blogPost = path.resolve(`./src/templates/blog-post.js`)
  const result = await graphql(
    `
      {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 1000
        ) {
          edges {
            node {
              fields {
                slug
              }
              frontmatter {
                title
              }
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    throw result.errors
  }

  // Create blog posts pages.
  const posts = result.data.allMarkdownRemark.edges

  posts.forEach((post, index) => {
    const previous = index === posts.length - 1 ? null : posts[index + 1].node
    const next = index === 0 ? null : posts[index - 1].node

    createPage({
      path: post.node.fields.slug,
      component: blogPost,
      context: {
        slug: post.node.fields.slug,
        previous,
        next,
      },
    })
  })

  // Create blog post list pages
  const postsPerPage = 5
  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.tsx"),
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    })
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

これを以下のように修正。

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const result = await graphql(
    `
      {
        allMicrocmsHogeHogeBlog(sort: {fields: [date], order: DESC}) {
          totalCount
          pageInfo {
            perPage
            pageCount
          }
          edges {
            node {
              body
              createdAt
              date
              id
              keywords
              publishedAt
              revisedAt
              slug
              title
              updatedAt
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    throw result.errors
  }

  // Create blog posts pages.
  const posts = result.data.allMicrocmsHogeHogeBlog.edges

  result.data.allMicrocmsHogeHogeBlog.edges.forEach((post, index) => {
    const previous = index === posts.length - 1 ? null : posts[index + 1].node
    const next = index === 0 ? null : posts[index - 1].node

    createPage({
      path: post.node.slug,
      component: path.resolve('./src/templates/blog-post.js'),
      context: {
        slug: post.node.slug,
        previous,
        next,
      },
    });
  });

  // Create blog post list pages
  const postsPerPage = result.data.allMicrocmsHogeHogeBlog.pageInfo.limit || 10
  const numPages = Math.ceil(result.data.allMicrocmsHogeHogeBlog.totalCount / postsPerPage)
  console.log(result.data.allMicrocmsHogeHogeBlog.totalCount, postsPerPage)

  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: i === 0 ? `/` : `/${i + 1}`,
      component: path.resolve("./src/templates/blog-list.tsx"),
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    })
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `microcmsHogeHogeBlog`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

gatsby-source-microcms | Gatsbyのサンプルコードはシンプル過ぎて GraphQL初心者には分かりづらかったので、 gatsby develop で起動した http://localhost:8000/___graphql の GraphQL を試すGUIでひたすらAPIを叩いてパラメータを変えたりしてどういう GraphQL を作れば望んだレスポンスを得られるか確認しながら地道に調整していきました
ベースのコードをなるべく変えないように調整して、各種プロパティの階層等を調整しました
MarkdownRemark や allMarkdownRemark が Markdownファイルをリソースとする場合のキーのような働きをしているのが分かったので、それを http://localhost:8000/___graphql で表示された microCMS のキーに変更したり

GraphQL の構造やレスポンスに慣れるまで時間がかかりましたが、最終的には http://localhost:8000/___graphql であれこれ試したのが一番効果がありました。

blog-list.tsx

記事一覧ページ。トップページもこのテンプレートから生成されています。

// Gatsby supports TypeScript natively!
import React from "react"
import { PageProps, Link, graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm } from "../utils/typography"

type PageContext = {
  currentPage: number
  numPages: number
}
type Data = {
  site: {
    siteMetadata: {
      title: string
    }
  }
  allMarkdownRemark: {
    edges: {
      node: {
        excerpt: string
        frontmatter: {
          title: string
          date: string
          description: string
        }
        fields: {
          slug: string
        }
      }
    }[]
  }
}

const BlogIndex = ({
  data,
  location,
  pageContext,
}: PageProps) => {
  const siteTitle = data.site.siteMetadata.title
  const posts = data.allMarkdownRemark.edges
  const { currentPage, numPages } = pageContext

  const isFirst = currentPage === 1
  const isLast = currentPage === numPages
  const prevPage = currentPage - 1 === 1 ? "/" : `/${currentPage - 1}`
  const nextPage = `/${currentPage + 1}`

  return (
    
      
      {posts.map(({ node }) => {
        const title = node.frontmatter.title || node.fields.slug
        return (
          
            
              {{
                  marginBottom: rhythm(1 / 4),
                }}
              >
                {{ boxShadow: `none` }} to={node.fields.slug}>
                  {title}
                
              
              {node.frontmatter.date}
            
            
              {{
                  __html: node.frontmatter.description || node.excerpt,
                }}
              />
            
          
        )
      })}

      
        {{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          
            {!isFirst && (
              
                ← Previous Page
              
            )}
          
          
            {!isLast && (
              
                Next Page →
              
            )}
          
        
      
    
  )
}

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
            description
          }
        }
      }
    }
  }
`

これを以下のように改修。

// Gatsby supports TypeScript natively!
import React from "react"
import { PageProps, Link, graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm } from "../utils/typography"

type PageContext = {
  currentPage: number
  numPages: number
}
type Data = {
  site: {
    siteMetadata: {
      title: string
    }
  }
  allMicrocmsHogeHogeBlog: {
    edges: {
      node: {
        id: string
        keywords: string
        title: string
        updatedAt: string
        slug: string
        revisedAt: string
        publishedAt: string
        date: string
        createdAt: string
        body: string
      }
    }[]
  }
}

const BlogIndex = ({
  data,
  location,
  pageContext,
}: PageProps) => {
  const siteTitle = data.site.siteMetadata.title
  const posts = data.allMicrocmsHogeHogeBlog.edges
  const { currentPage, numPages } = pageContext

  const isFirst = currentPage === 1
  const isLast = currentPage === numPages
  const prevPage = currentPage - 1 === 1 ? "/" : `/${currentPage - 1}`
  const nextPage = `/${currentPage + 1}`

  return (
    
      
      {posts.map(({ node }) => {
        const title = node.title || node.slug
        return (
          
            
              {{
                  marginBottom: rhythm(1 / 4),
                }}
              >
                {{ boxShadow: `none` }} to={node.slug}>
                  {title}
                
              
              {node.date}
            
            
              {{
                  __html: node.keywords,
                }}
              />
            
          
        )
      })}

      
        {{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          
            {!isFirst && (
              
                ← Previous Page
              
            )}
          
          
            {!isLast && (
              
                Next Page →
              
            )}
          
        
      
    
  )
}

export default BlogIndex

export const pageQuery = graphql`
  query blogPageQuery($skip: Int!, $limit: Int!) {
    site {
      siteMetadata {
        title
      }
    }
    allMicrocmsHogeHogeBlog(
        sort: {fields: [date], order: DESC}
        limit: $limit
        skip: $skip
    ) {
      edges {
        node {
          body
          createdAt
          date(formatString: "YYYY/MM/DD")
          id
          keywords
          publishedAt
          revisedAt
          slug
          title
          updatedAt
        }
      }
    }
  }
`

ここは大々的な改修というよりは、 GraphQL の変更と、それに併せて変化したデータ構造に合わせてプロパティ名やチェーンを調整した感じです。

blog-post.js

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, scale } from "../utils/typography"

const BlogPostTemplate = ({ data, pageContext, location }) => {
  const post = data.markdownRemark
  // const siteTitle = data.site.siteMetadata.title
  const { previous, next } = pageContext

  return (
    
      
      
        
          {{
              marginBottom: 0,
            }}
          >
            {post.frontmatter.title}
          
          {{
              ...scale(-1 / 5),
              display: `block`,
              marginBottom: rhythm(1),
            }}
          >
            {post.frontmatter.date}
          
        
        {{ __html: post.html }} />
        
{{
            marginBottom: rhythm(1),
          }}
        />
        
          
        
      

      
        {{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          
            {previous && (
              
                ← {previous.frontmatter.title}
              
            )}
          
          
            {next && (
              
                {next.frontmatter.title} →
              
            )}
          
        
      
    
  )
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
      }
    }
  }
`

これを以下のように改修。

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, scale } from "../utils/typography"
import marked from "marked"

const BlogPostTemplate = ({ data, pageContext, location }) => {
  const post = data.microcmsHogeHogeBlog
  // const siteTitle = data.site.siteMetadata.title
  const { previous, next } = pageContext

  return (
    
      
      
        
          {{
              marginBottom: 0,
            }}
          >
            {post.title}
          
          {{
              ...scale(-1 / 5),
              display: `block`,
              marginBottom: rhythm(1),
            }}
          >
            {post.date}
          
        
        {{ __html: marked(post.body) }} />
        
{{
            marginBottom: rhythm(1),
          }}
        />
        
          
        
      

      
        {{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          
            {previous && (
              
                ← {previous.title}
              
            )}
          
          
            {next && (
              
                {next.title} →
              
            )}
          
        
      
    
  )
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
      }
    }
    microcmsHogeHogeBlog(slug: { eq: $slug }) {
      id
      keywords
      title
      updatedAt
      slug
      revisedAt
      publishedAt
      date(formatString: "YYYY/MM/DD")
      createdAt
      body
    }
  }
`

こちらも blog-list.tsx と同様 GraphQL の変更とそれに伴うプロパティ名やチェーンの調整がメインです。本文の Markdown は冒頭の通り時短のため marked を使いました。

こうして見てみると、 GraphQL に慣れるまでかなり紆余曲折した気がするのですが、 blog-list.tsx や blog-post.js は特に出来上がったコードがあまり元から変化していませんね……。

microCMS で APIキーを参照

microCMS で APIキーを控えます。

「サービス設定」→「APIキー」と進みます。今回必要なのは「X-API-KEY」。これを控えておきます。

Vercel の設定

続いて Vercel の設定へ。

環境変数の設定

まずは環境変数の設定。

プロジェクトを選択後、「Settings」から「Enviroment Variables」へ。

「NAME」にコードに記載したキーの名前を付けて、実際の値を入力します。画面では APIキーなので上述の microCMS の管理画面で控えた APIキーを入力。

他、必要な変数をセットします。

Deploy Hooks を登録

次に Deploy Hooks をひっかけます。

プロジェクトの「Settings」から今度は「Git」へ。

Deploy Hooks に名前を入力、ブランチは通常は main になるかと。

登録されたら Hook の URL を控えます。

microCMS の設定

お次は microCMS の画面へ。

サービスの管理画面から「API設定」→「Webhook」へ。

Vercel は一覧にはないので「カスタム通知」を選択。

名前は任意の名前を。

Hook の URL に先ほど控えた URL を入力します。

権限はこのような感じ。基本的に公開されているデータに変更が加わったら Hook が通知を行うものとします。

テスト投稿

ここまで設定できたら、試しに記事を新しく追加してみます。

すると、 Vercel 側でプロジェクトが反応してビルドが走り始めました。

microCMS に記事を追加すると、 Github のリポジトリに push することなく勝手にビルドが走ってサイトが更新されることが確認できました。

これで Gatsby.js + Vercel + microCMS で JAMStack なブログの仕組みが構築できました。実験成功です。

参考

Vercel の環境変数

環境変数の分かち書き

GatsbyJSで開発環境にのみページを存在させる方法 ++ Gaji-Laboブログ

gatsby-plugin-feed

gatsby-plugin-feed | Gatsby

基本 Gatsby.js のプラグインのページはシンプルなサンプルなので http://localhost:8000/___graphql で GraphQL を試して感覚をつかむ方が早かった気がします。

Gatsby.js + Vercel でブログを作ってみる

2021-08-25T22:14:35+09:00

兼ねてより試してみたかった Gatsby.js + Vercel の組み合わせに着手してみました。

1. Gatsby.js のインストールと Gitリポジトリの準備

まずは Gatsby.js のプロジェクトを作って Gitホスティングサービスに push します。

> yarn init

## 略

success Saved package.json
Done in 2.33s.

適当なディレクトリで package.json を生成。

> yarn add gatsby-cli

## 略

Done in 26.05s.

続いて gatsby-cli をインストールします。一応グローバルではなくローカルで。

: Gatsby Starter | Gatsby

今回のテーマはこれにします。

> gatsby new mptotkb https://github.com/renyuanz/leonids
╔════════════════════════════════════════════════════════════════════════╗
║                                                                        ║
║   Gatsby collects anonymous usage analytics                            ║
║   to help improve Gatsby for all users.                                ║
║                                                                        ║
║   If you'd like to opt-out, you can use `gatsby telemetry --disable`   ║
║   To learn more, checkout https://gatsby.dev/telemetry                 ║
║                                                                        ║
╚════════════════════════════════════════════════════════════════════════╝
info Creating new site from git: https://github.com/renyuanz/leonids.git

Cloning into 'mptotkb'...
remote: Enumerating objects: 60, done.
remote: Counting objects: 100% (60/60), done.
remote: Compressing objects: 100% (44/44), done.
Receiving objects: 100% (60/60), 542.69 KiB | 5.32 MiB/s, done.eceiving objects: 100% (60/60)

success Created starter directory layout
info Installing packages...
info Preferred package manager set to "npm"

## 略

Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd mptotkb
  gatsby develop

プロジェクト作成完了。

> cd mptotkb
> gatsby develop

## 略

info
Hi from the Gatsby maintainers! Based on what we see in your site, these coming
features may help you. All of these can be enabled within gatsby-config.js via
flags (samples below)

Preserve webpack's Cache (https://github.com/gatsbyjs/gatsby/discussions/28331), which changes Gatsby's cache clearing behavior to not clear webpack's
cache unless you run "gatsby clean" or delete the .cache folder manually.
Here's how to try it:

module.exports = {
  flags: { PRESERVE_WEBPACK_CACHE: true },
  plugins: [...]
}

⠀
You can now view gatsby-starter-leonids in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 48.261s

OK。完了しました。

最初は手始めということでこの状態でいったん push しておきたいと思います。 Gitリポジトリに登録するのは親ディレクトリではなく作成したプロジェクト (今回は mptotkb 下) です。

GitHub でリポジトリを作成して、このリポジトリに先ほどのプロジェクトを push 。ちなみにリポジトリは public である必要があります。

2. Vercel と Gitホスティングサービスの連携

次に Vercel でアカウントを作ります。

今回は GitHub を使用しているので「Continue with GitHub」を選択。

「Authorize Vercel」で Vercel のアクセスを認証します。

ログインできました。

3. リポジトリのインポート

一度中断してしまったのでダッシュボードから。ここからであれば「New Project」で次へ進みます。

Import Git Repository から「Add GitHub Org or Account」。

インポートするリポジトリを選択します。今回は1つのリポジトリだけに Vercel に連携させます。

リポジトリの確認です。使用しているフレームワークが自動判別されるのはありがたいですね。

次の画面でフローに沿って設定を進めていきます。最初に Vercel のチームを作成する画面が有効になっていますが、今回は個人なので「Skip」。

プロジェクトの設定。出力の設定や環境変数を設定できますが、今回はそのままで。

デプロイ中。

少し待つとデプロイが完了します。そこでURLから実際の画面を表示させると……きちんとデプロイされていました！

ここまでで Gatsby.js + Vercel でブログを作成することができました。

今後の課題としては以下の通り。

サイト名や著者情報といった基本情報のカスタマイズ
どうやらブログ記事の Markdown ファイルを生成する CLI やユーティリティはなさそうで、手作業で記事をちまちま作っていくのは手間なので記事リソースを別の場所 (Headless CMS とか) で管理して JAMStack にする

あとは折角なので GraphQL にも少しは触ってみたいところですね。

参考

Gatsby.js + Vercel

【ZEIT Now】Gatsbyサイトを無料サーバーVercelで公開する方法を徹底解説 | WebCraftLog
Gatsby + microcms + Vercel でブログを作って公開したい
Vercel – Git - Vercel Documentation
- 参考記事とは画面構成が変わっていたため、最終的には Vercel のドキュメントが頼りでした

Vercel

NetlifyキラーのVercelでウェブサイトをホストしたら簡単すぎて笑顔になった | DevelopersIO

GatsbyJSで次の記事、前の記事へのリンクを生成する方法

2019-10-08T08:41:01+09:00

オリジナルの記事はこちら

こんにちは。mono（@mono7555e）です。

記事ページで他の記事へ行く術がなく直帰率が高くなっていたので他の記事への遷移を追加することにしました。

ちょっとひと手間かかりますがGatsbyJSでも実現できましたのでご紹介したいと思います。

ページ生成時に前後の記事情報を渡す

exports.createPages = async ({ actions, graphql }) => {
  const { createPage } = actions
  const template = path.resolve(`src/templates/blog.tsx`)
  await graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___published_at] }
        limit: 2000
      ) {
        edges {
          node {
            fields {
              slug
            }
            frontmatter {
              title
              image
            }
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      return Promise.reject(result.errors)
    }
    const pages = result.data.allMarkdownRemark.edges
    pages.forEach(({ node }, index) => {
      const prev = index === 0 ? null : pages[index - 1].node
      const next = index === pages.length - 1 ? null : pages[index + 1].node
      createPage({
        path: node.fields.slug,
        component: template,
        context: {
          slug: node.fields.slug,
          prev,
          next,
        },
      })
    })
  })
}

重要なのはconst prev = ～とconst next ～の部分と、contextでそれを設定している部分です。
それ以外のところは自由です。

設定された前後の記事情報を元にリンクを生成

ちょっとごちゃごちゃしてしまったので前後の記事用のコンポーネントに分割しました。

import React from "react"
import { Box, Card, CardActionArea, CardContent, Typography } from "@material-ui/core"

import Image from "../atoms/image"

const PrevNext = ({ prev, next }) => {
  return(
    
      { prev == null ? null : _link(prev, `prev`)}
      { next == null ? null : _link(next, `next`)}
    
  )
}
export default PrevNext

const _link = ({ fields, frontmatter }, direction) =>{
  return(
    {{ width: `40%` }}>
      
        { direction == 'prev' ? '前の記事' : '次の記事'}
      
      {{ width: `100%`, height: `100%`}}>
        {{ display: 'flex', alignItems: `stretch`, height: `100%` }}>
          {{ width: `35%` }}>
            {{ height: `100%` }} />
          
          {{ flex: `1` }}>
            
              {frontmatter.title}
            
          
        
      
    
  )
}

このブログはMaterial-UIを使っているのでちょっとややこしい感じになりますが、単純にリンクをするだけであればもう少し簡単に書けると思います。

あとは作った前後の記事用のコンポーネントをテンプレートから呼び出すだけです。

// importなどなど
export default function Template({ data, pageContext }) {
  // 中略
  return (
    
      
        {/* その他コンポーネント読み込み */}
        
      
    
  )
}

まとめ

やってみると結構かんたんでした。

今はイメージとタイトルだけですが、タグや日付など各記事が持っている情報を利用できるのでよりリッチな前後の記事へのリンクが設置できると思います。

gatsby-transformer-remarkで出力されるコンポーネントをカスタマイズする方法

2019-10-08T08:32:43+09:00

オリジナルの記事はこちら

こんにちは。mono（@mono7555e）です。

このブログがGatsbyJSで作られていること、gatsby-transformer-remarkを使ってMakrdownを読み込んでいることは以前にもご紹介しましたが、今回はそこで出力されるHTML（コンポーネント）をカスタマイズする方法をご紹介したいと思います。

かなり簡単で、ずばりrehype-reactを使うとやりたいことが出来ます。

独自コンポーネントを読み込む

前述の例では、既存コンポーネントを独自コンポーネントに置き換える方法でしたが、独自コンポーネントを追加することも出来ます。

まずは読み込みたいコンポーネントを作ります。

```jsx:title=src/components/atoms/custom.tsx
import React from 'react'

const Custom = () => {
return(

独自コンポーネント

)
}
export default Custom


Markdownファイルのコンポーネントを読み込みたい場所にタグを追加します。

```md
↓コンポーネント読み込み↓



↑コンポーネント読み込み↑

※ちなみにと書きたくなりますがこれだとダメでした

それが置き換えられるようにrehypeReactを設定します。

import rehypeReact from "rehype-react"
import Custom from "../components/custom"
// 中略
export const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: {
    'custom': Custom,
  },
}).Compiler

これでと書かれたところCustomコンポーネントになって出力されるようになります。

まとめ

gatsby-transformer-remarkを使っている際にカスタマイズをしたい場合rehype-reactを使えば簡単なことであれば大体のことは出来ると思います。

もし、さらにより細かいカスタマイズを行いたい場合は今回のように置き換えるのではなくて、コンポーネント自体を読み込めるようになるMDXを使うと良さそうです。

いまブログを始めるならGatsbyJS+Netlifyがオススメ！

2019-10-08T08:07:21+09:00

オリジナルの記事はこちら

こんにちは。mono（@mono7555e）です。

今回は新しくブログを立ち上げた際に使ったGatsbyJSとNetlifyのご紹介です。
新しくブログを立ち上げようとしている方やWordPressに疲れた方には参考になるんじゃないかと思います。

GatsbyJSとは

https://www.gatsbyjs.org/

GatsbyJSはReactで作られた静的サイトジェネレーターです。
JSONやYAML、XMLなど扱うデータを全て一回GraphQLで取り出せるように変換してくれるので、様々なデータが扱いやすく、コンポーネント化がしやすいという特長があります。

また、プラグインも豊富で大抵の場合、既にプラグインがあるのでそれを使うように設定してあげればOKです。

今回のブログ立ち上げの際にもMarkdownで記事が書けるというのを必須事項にあげていたのでgatsby-transformer-remarkというプラグインを利用してMakrdownファイルをGraphQLで扱えるようにしました。

他にもsitemap.xmlを生成してくれるgatsby-plugin-sitemap、Google Tag Managerのタグを入れてくれるgatsby-plugin-google-tagmanagerなど利用しています。

なぜWordPressを使わなかったのか

ブログを立ち上げるとなると真っ先に思い浮かぶのがWordPressだと思います。
ですが、今回は使うのをやめました。
WordPressを使った経験はある方なら分かると思うのですが色々つらみを感じているからです。

セキュリティが不安

WordPressはかなり使われているので様々な方面から狙われやすいです。
セキュリティパッチ等のアップデートを忘れているとすぐに狙われて乗っ取られたり、悪意のあるコードを埋め込められたりする恐れがあります。

前述の通りセキュリティが不安なのでセキュリティパッチが降ってきたらすぐに適用したいのですがカスタマイズをバリバリやっていたりプラグインを使っている場合、それらが邪魔をしてアップデートが出来ないことがままあります。
また、WordPressだけでなくPHPやWebサーバーの管理等も必要なのでその辺りも大変です（レンタルサーバーの場合はその辺り任せられるので楽ですが、カスタマイズがしづらい場合もあります。）

PHP書くの辛い

最後はかなり個人的な理由です。
WordPressはPHPで作られているので、ある程度カスタマイズをしようと思うとPHPでコードを書く必要があるのですが、PHPは書いててあまり楽しい言語ではないので出来れば避けたいと思っています。

なぜブログサービスを使わなかったのか

WordPress以外にもブログをはじめるのに使えるサービスがいくつかありますが、Markdown、アフィリエイト、カスタマイズ性の辺りがマッチせず使うのを諦めました。

有名なところだとAmebaブログ、ライブドアブログ、fc2ブログなどがありますが、それらのブログサービスはMarkdownで記事が書けないので除外しました。

Markdownが使えるのは、調べた限りだとMedium、note、Qiita、はてなブログぐらいですが、それらも他の部分がネックになりました。

Medium

使ったことがないので何とも言えないところですが、日本で使っている人が少ない印象で、検索に引っかかることもないのでSEOにも強くなさそうな印象です。
2017年に日本から撤退しているのも気になりました。

note

アフィリエイトが貼れなかったり、カスタマイズも出来ないのがちょっと辛いかなと。
ただ、有料記事が販売できたりするのでブログとは別に利用しようと思っています。

https://note.mu/mono7555e

Qiita

noteと同様にアフィリエイト、カスタマイズが出来ないのと、プログラミングに関するものしか投稿できないというのがネックです。
もしかしたらめちゃくちゃコードを見せるような記事はQiitaに書くかもしれません。

一応登録だけはしました。

https://qiita.com/mono7555e

WordPress以外
独自ドメインが使える
Markdownで書ける
カスタマイズしやすい

これらを満たすのがGatsbyJSとNetlifyの組み合わせだったので使用しています。

同じような条件で検討されている方はGatsbyJSとNetlifyの組み合わせがオススメなので是非試してみてください。