ITエンジニアの種籾(たねもみ)

IT技術とか株式投資とか。

Gatsby.js で自分のブログサイトを作ってみよう

2020年 07月 20日

目次

Gatsby.js でブログサイトを立ち上げるために、必要最低限のブログサイトプロジェクトを作成しました。 その過程を記録したので参考になればと思います。

本記事の目的は、ブログサイトを作っていくためのまっさらなプロジェクトを作ることです。 デザインや機能のカスタマイズの説明はしません。

本記事の流れは、Gatsby.js のオフィシャルのテンプレートからプロジェクトを作り、 不要なスタイルや記事を削除し、まっさらなブログサイトを立ち上げます。

準備

0から設定ファイルやコンポーネントを作っていくのは大変なので、テンプレートからブログサイトのプロジェクトを作ります。

ちょうどいい公式のスターターテンプレート(gatsby-starter-blog)があるので、それを使います。

このテンプレートではチュートリアルをひと通りやった程度のサイトが実装されています。

テンプレートからプロジェクトを作ってみます。

[~/workspace] $ gatsby new crz33-gatsby https://github.com/gatsbyjs/gatsby-starter-blog

起動してみます。

[~/workspace] $ cd crz33-gatsby
[~/workspace/crz33-gatsby] $ gatsby develop

gatsby-starter-blog のサンプルと同じ結果になれば成功で、準備 OK です。

不要なもファイルやコード、スタイル、設定を削除

最初に目につくのは「マシュー」さんの画像付きのプロフィール。 いろんなところに埋め込まれています。

他にもスターターのテンプレートとして、スタイルや記事が作られているので不要なものを削除していきます。

ページコンポーネント(src/pages/と src/templates/)

まず、どんなページコンポーネントがあるか見てみます。

  • src/pages/index.js : サイトトップページで記事を一覧。スターターの HTML や CSS の実装があるので、不要なコードやスタイルは削除
  • src/pages/404.js : 「HTTP 404 (Not Found)」のページ。Web サーバで 404 が発生したら表示させるためのページで、とりあえず放置
  • src/pages/using-typescript.ts : 「TypeScript もサポートしているよ」というサンプル。JavaScript で作っていくので、削除
  • src/templates/blog-post.js : 各記事のページ。スターターの HTML や CSS の実装があるので、不要なコードやスタイルは削除

using-typescript.tsはファイルごと不要なので削除。

src/pages/index.jsの初期化

src/pages/index.jsをきれいにしていきます。

無駄なのは、

  • プロフィール<Bio/>の埋め込み。これは削除。
  • Typography.jsが使われているので、使っているスタイを削除。

結果、index.jsのページコンポーネントの実装はこうなります。

const BlogIndex = ({ data }) => {
  const siteTitle = data.site.siteMetadata.title;
  const posts = data.allMarkdownRemark.edges;

  return (
    <Layout title={siteTitle}>
      <SEO title="All posts" />
      {posts.map(({ node }) => {
        const title = node.frontmatter.title || node.fields.slug;
        return (
          <article key={node.fields.slug}>
            <header>
              <h3>
                <Link to={node.fields.slug}>{title}</Link>
              </h3>
              <small>{node.frontmatter.date}</small>
            </header>
            <section>
              <p
                dangerouslySetInnerHTML={{
                  __html: node.frontmatter.description || node.excerpt,
                }}
              />
            </section>
          </article>
        );
      })}
    </Layout>
  );
};

src/templates/blog-post.jsの初期化

同様に、src/templates/blog-post.jsをきれいにしていきます。

無駄なのは、src/pages/index.js と同じです。

結果、blog-post.jsのページコンポーネントの実装はこうなります。

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

  return (
    <Layout title={siteTitle}>
      <SEO
        title={post.frontmatter.title}
        description={post.frontmatter.description || post.excerpt}
      />
      <article>
        <header>
          <h1>{post.frontmatter.title}</h1>
          <p>{post.frontmatter.date}</p>
        </header>
        <section dangerouslySetInnerHTML={{ __html: post.html }} />
        <hr />
        <footer></footer>
      </article>

      <nav>
        <ul
          style={{
            display: `flex`,
            flexWrap: `wrap`,
            justifyContent: `space-between`,
            listStyle: `none`,
            padding: 0,
          }}
        >
          <li>
            {previous && (
              <Link to={previous.fields.slug} rel="prev">{previous.frontmatter.title}
              </Link>
            )}
          </li>
          <li>
            {next && (
              <Link to={next.fields.slug} rel="next">
                {next.frontmatter.title}</Link>
            )}
          </li>
        </ul>
      </nav>
    </Layout>
  );
};

共通コンポーネント(src/components)

共通コンポーネントを見てみます。

  • src/components/bio.js : 例のプロフィールのコンポーネント。useStaticQuery のサンプルにもなってるけど、とりあえず削除
  • src/components/layout.js : ヘッダやフッタなどのサイト全体のレイアウト。スターターの HTML や CSS の実装があるので、不要なコードやスタイルは削除
  • src/components/seo.js : SEO 対策で主に Helmet の設定をしている。カスタマイズするかもしれないけど、とりあえず放置

bio.jsはファイルごと不要なので削除。

src/components/layout.jsの初期化

次に、src/components/layout.jsをきれいにしていきます。

無駄なのは、

  • 「トップページ」と「記事のページ」でヘッダのデザイン変えているが、変える必要ないので記事のページを採用する。
  • Typography.jsが使われているので削除

結果、layout.jsのページコンポーネントの実装はこうなります。

const Layout = ({ title, children }) => {
  return (
    <div>
      <header>
        <h3>
          <Link to={`/`}>{title}</Link>
        </h3>
      </header>
      <main>{children}</main>
      <footer>
        © {new Date().getFullYear()}, Built with
        {` `}
        <a href="https://www.gatsbyjs.org">Gatsby</a>
      </footer>
    </div>
  );
};

画像などのリソース(content/assets/)の初期化

画像などのリソースを見てみます。

  • content/assets/gatsby-icon.png : RSS フィードのプラグインgatsby-plugin-manifestに設定されているアイコン画像。画像は変えたいが、とりあえず放置
  • content/assets/profile-pic.png : 「マシュー」さんの画像でプロフィールに使っている画像。不要になったので、削除

マシューさんのプロフィール画像であるprofile-pic.pngを削除。

gatsby-browser.jsの初期化

gatsby-browser.jsはサイトをラップしているコードです。 ここに、「Web フォント」と remark で使っている「prismjs」の CSS が読み込まれています。

Web フォントはとりあえず不要なので削除し、「prismjs」は使う予定なので放置します。

gatsby-configの初期化

gatsby-configは Gatsby.js の全体の設定です。 サイトのメタデータと各種プラグインの設定が書かれています。

サイトのメタデータ

ここまでの初期化で使っているのは

  • title : サイトタイトル
  • description : サイトの説明
  • siteUrl : サイトの URL。gatsby-plugin-feed が使っている。
  • social/twitter : Helmet の twitter:creator

これら以外は消しました。

gatsby-source-filesystem

ファイルシステムのソースプラグインです。

content/blog/content/assets/の2つのディレクトリをファイルのソースとして設定されています。 プロフィール<Bio/>を消したことで、content/assets/は不要になったので削除します。

gatsby-transformer-remark

Markdown 用のトランスフォーマープラグインです。

記事のカスタマイズをするときに見直すので、とりあえず放置

gatsby-plugin-sharp

Sharp Image 処理ライブラリをベースにした画像処理機能のプラグインです。 他の Gatsby プラグインで使われている低レベルのヘルパーなので、一般的には直接使わないものです。

ですが他のプラグインが依存しているので、そのままにします。

gatsby-transformer-sharp

Sharp Image 処理ライブラリでサポートされている画像タイプから ImageSharp ノードを作成し、 リサイズ、トリミング、レスポンシブ画像の作成を含む様々な方法で画像を処理するためのフィールドを追加します。

使う予定がないので、削除します。

gatsby-plugin-google-analytics

サイトに Google Analytics を簡単に追加できます。

使う予定があるので、そのままにします。

gatsby-plugin-feed

RSS フィード(または複数のフィード)を作成します。

RSS フィードは使われなくなりつつありますが、ブログサイトとして機能は持っていても害はないのでそのままにします。

gatsby-plugin-react-helmet

SEO 対策のメタデータのプラグインです。

SEO コンポーネントで使っているので、そのままにします。

gatsby-plugin-typography

typography.jsのプラグインです。

使わないので、削除します。 ついでに、使用しているsrc/utils/typography.jsもファイルごと削除します。

記事(content/blog/)の初期化

テンプレートであるgatsby-starter-blogでサンプルとして用意されている記事を削除します。

  • content/blog/hello-world
  • content/blog/my-second-post
  • content/blog/new-beginnings

これら3つの記事を削除

git リポジトリから切り離す

最初の準備でgatsby newで作成したプロジェクトは、gatsby-starter-blog の GitHubから clone されています。

将来は自分のリポジトリで管理しますが、ここまでの修正の差分を確認して git リポジトリからいったん切り離します。

[~/workspace/crz33-gatsby] $ rm -rf .git

まとめ

Gatsby.js でブログサイトを立ち上げるために、必要最低限のブログサイトプロジェクトを作成しました。 これで、自分のブログサイトを作っていける準備できました。

やったことは、スタイルや使わないプロフィールなどのコンポーネントを削除です。 まっさらなブログサイトになったので、下のようにスタイルがほとんど適用されていないページになりました。

初期化した画面

広告