Gatsbyでブログ構築

2021.06.01

以前もGatsbyをさわったことがあったが、そのときはGraphQLがいまひとつピンとこなくて結局やめてしまったので、チュートリアルから再挑戦したときのメモを再構成した。このブログが成果物となっている。

Part 0. Set Up Your Development Environment

https://www.gatsbyjs.com/docs/tutorial/part-0/

Gatsby CLIをインストールしてgatsbyコマンドでヘルプを表示できればOK。

% npm i -g gatsby-cli
% gatsby --help

Part 1. Create and Deploy Your First Gatsby Site

https://www.gatsbyjs.com/docs/tutorial/part-1/

Gatsbyサイトを作成するため、対話形式で初期設定を行う。

% gatsby new

ブログタイトルはチュートリアルに従う。

What would you like to call your site?
✔ · My First Gatsby Site

プロジェクトの場所はそのままEnter。

What would you like to name the folder where your site will be created?
✔ apps/ my-first-gatsby-site

✔ Will you be using a CMS?
· No (or I'll add it later)

✔ Would you like to install a styling system?
· No (or I'll add it later)

Build and host for free on Gatsby Cloudを選択してGatsby Cloudにデプロイする。Gatsby Cloudは結構気に入ったので、そのまま使うことにした。

✔ Would you like to install additional features with other plugins?

ローカルでサイトを実行

インストールディレクトリに移動。

% cd my-first-gatsby-site

% gatsby develop

しばらくBuilding development bundle。10分たっても動く様子がなかったのでプロセスを止めると、残りのメッセージが表示されて止まった。スピナー表示の不具合か何かで止まっていたのかも。http://localhost:8000/でサイトが表示できた。

GitHubリポジトリの設定

Gatsby Cloudに取得させるため、GitHubにリポジトリを作成して、チュートリアルをpushしておく。

Gatsby Cloudでサイトを構築する

Gatsby Cloud Dashboardにアクセス
GitHubアカウントでログイン
Select a Builds plan = Free / Select a Hosting plan = Free
“Add a site +” → “Import from a Git repository”
Git providerにGitHubを選択
pushしたリポジトリを選択
Integrationsをスキップ
“Create site”

ダッシュボード的な画面が表示され、新しいビルドが作成される。しばらくするとビルドが完了してデプロイされる。

Error 503 Max restarts limit reached
Max restarts limit reached

一時的にエラーが表示されたが、しばらくすると正常にチュートリアルサイトが表示された。

Part 2. Use and Style React Components

https://www.gatsbyjs.com/docs/tutorial/part-2/

ここから実際にReactコンポーネントを作成したりスタイルを変更したりする。

開発環境を立ち上げ、http://localhost:8000/にアクセスしてサイトを表示する。

% gatsby develop

トップページの内容を更新する

src/pages/index.jsを以下のように変更する。

// Step 1: Import React
import * as React from 'react'
// Step 2: Define your component
const IndexPage = () => {
  return (
    <main>
      <title>Home Page</title>
      <h1>Welcome to my Gatsby site!</h1>
      <p>I'm making this by following the Gatsby Tutorial.</p>
    </main>
  )
}
// Step 3: Export your component
export default IndexPage

ファイルの変更を検知して再ビルドが走る。http://localhost:8000/にアクセスすると、サイトが更新されている。

Aboutページを追加する

以下のようなsrc/pages/about.jsを追加する。 pagesディレクトリのファイル名はそのままルーティングになるので、kebab-caseにする。

// Step 1: Import your component
import * as React from 'react'
// Step 2: Define your component
const AboutPage = () => {
  return (
    <main>
      <title>About Me</title>
      <h1>About Me</h1>
      <p>Hi there! I'm the proud creator of this site, which I built with Gatsby.</p>
    </main>
  )
}
// Step 3: Export your component
export default AboutPage

ファイルの変更を検知して再ビルドが走る。http://localhost:8000/にアクセスすると、サイトが更新されている。

<Link>コンポーネントを使用する

トップページにリンクを追加する

  import * as React from 'react'
+ import { Link } from 'gatsby'
  const IndexPage = () => {
    return (
      <main>
        <title>Home Page</title>
        <h1>Welcome to my Gatsby site!</h1>
+       <Link to="/about">About</Link>
        <p>I'm making this by following the Gatsby Tutorial.</p>
      </main>
    )
  }
export default IndexPage

Aboutページにリンクを追加する

  import * as React from 'react'
+ import { Link } from 'gatsby'
  const AboutPage = () => {
    return (
      <main>
        <title>About Me</title>
        <h1>About Me</h1>
+       <Link to="/">Back to Home</Link>
        <p>Hi there! I'm the proud creator of this site, which I built with Gatsby.</p>
      </main>
    )
  }
  export default AboutPage

更新されないときは開発プロセスを止めてgatsby developしなおす。

再利用可能なレイアウトコンポーネントを作成する

componentsディレクトリを作成しlayout.jsを追加。Reactの開発では通常パスカルケースにするので、少し違和感があるが、Gatsby wayですすめることにする。

import * as React from 'react'
import { Link } from 'gatsby'
const Layout = ({ pageTitle, children }) => {
  return (
    <main>
      <title>{pageTitle}</title>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
      </nav>
      <h1>{pageTitle}</h1>
      {children}
    </main>
  )
}
export default Layout

追加したレイアウトコンポーネントを使うようにホームページとAboutページを変更。

  import * as React from 'react'
+ import Layout from '../components/layout'
  const IndexPage = () => {
    return (
+     <Layout pageTitle="Home Page">
        <p>I'm making this by following the Gatsby Tutorial.</p>
+     </Layout>
    )
  }
  export default IndexPage

  import * as React from 'react'
+ import Layout from '../components/layout'
  const AboutPage = () => {
    return (
+     <Layout pageTitle="About Me">
        <p>Hi there! I'm the proud creator of this site, which I built with Gatsby.</p>
+     </Layout>
    )
  }
  export default AboutPage

CSS modulesでコンポーネントの外観を整える

componentsディレクトリにCSS moduleを追加。

.container {
  margin: auto;
  max-width: 500px;
  font-family: sans-serif;
}
.heading {
  color: rebeccapurple;
}
.nav-links {
  display: flex;
  list-style: none;
  padding-left: 0;
}
.nav-link-item {
  padding-right: 2rem;
}
.nav-link-text {
  color: black;
}

レイアウトコンポーネントにスタイルを読み込んで使用する。

  import * as React from 'react'
  import { Link } from 'gatsby'
+ import {
+   container,
+   heading,
+   navLinks,
+   navLinkItem,
+   navLinkText
+ } from './layout.module.css'
  const Layout = ({ pageTitle, children }) => {
    return (
+     <main className={container}>
        <title>{pageTitle}</title>
+       <nav>
+         <ul className={navLinks}>
+           <li className={navLinkItem}>
+             <Link to="/" className={navLinkText}>
+               Home
+             </Link>
+           </li>
+           <li className={navLinkItem}>
+             <Link to="/about" className={navLinkText}>
+               About
+             </Link>
+           </li>
+         </ul>
+       </nav>
+       <h1 className={heading}>{pageTitle}</h1>
        {children}
      </main>
    )
  }
  export default Layout

変更をcommitしてGitHubにpushすると、新しいデプロイが開始される。

% git add .
% git commit -m "Finished Gatsby Tutorial Part 2"
% git push

次はデータまわり。MarkdownファイルとGraphQLでデータソースを構築する。

次:Gatsbyでブログ構築(2)

Gatsbyでブログ構築 2021.06.01