新卒プログラマーがGatsbyで個人サイト兼ブログを作ってみた

18403 ワード
gatsby 新人エンジニア contentful フロントエンド フロントエンド テキストリンク

はじめに

今年の4月から新卒でWebアプリケーション開発者として就職し、働き始めてから約１ヶ月が経過しました。

開発者としてより成長するために日々の勉強をアウトプットできる場を設けたいなと思い、Gatsby + Contentful + Github Pagesを使って個人サイト兼技術ブログを立ち上げてみました。

Qiitaがフロントエンド強化月間というイベントを開催しているというのもあり、ど素人で恐縮ですがせっかくなのでGatsbyでサイトを構築した時の知見を共有させて頂ければと思います。

https://poteboy.com


このサイトを作る前はReactもGatsbyも未経験だったので作法などは全く分かっていませんが、Gatsbyのフレームワーク単体の強さのお陰でLighthouseでもそこそこ高得点が出せました。


なぜGatsby

公式サイトの謳い文句を借りると、blazing-fast (爆速)だからです。

GatsbyはReact製のSSG(静的サイト生成)フレームワークで、ビルド時に予めレンダリングを行っておく事でユーザーからのリクエスト時には既に生成されたHTMLを返す、という仕組みを採用しています。

そのため、初回ロード時間以外はほぼゼロ秒で画面を推移する事ができます。

また、Gatsbyはドキュメントが充実していたり豊富なプラグインが提供されていて学習コストがかなり低いので、React未経験の私でも爆速でブログを立ち上げる事できました。

画像の最適化やMarkdownのHTML変換など様々な機能がプラグインを使えば一瞬で実装することができます。


ヘッドレスCMSにはContentfulを採用

ヘッドレスCMSというのは一言でいうと管理画面だけのWordPressのようなもので、書いた記事をAPIとして取得して自前で用意したフロントに引っ張ってくる事ができます。

昔少しだけWordPressを触ったことがあったのですが、とにかくサイトが遅いのとフロントの自由度が低い事が不満でした。

GatsbyとContentfulを使えばSSG化によって爆速かつ完全に自分好みのサイトを構築することができます。加えて、無料プランでも5000レコードまで用意されているので、ドメイン代以外は実質ほぼ無料でブログを運営することができます。

また、Contentfulは記事をMarkdownで書くこともできるので、数式やコードも気軽に挿入できます。


学習リソース

学習の際に使用した教材ですが、私はほぼ↑の動画のみで勉強しました。

４時間超えの動画に加えて全編英語なので少しハードルは高めですが、とても聞き取りやすい英語かつReactとGraphQL初心者の私でも全く躓かなかったほど解説が丁寧なので、初学者の方にはとてもおすすめです。

また、なんと言っても無料です。


Markdownで書いた記事をいい感じにする

シンタックスハイライトで記事中にコードを書く

gatsby-remark-prismjsというプラグインをインストールします。

terminal
npm install gatsby-transformer-remark gatsby-remark-prismjs prismjs


gatsby-config.jsファイルに、以下のように記述します。

gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-prismjs`,
        },
      ],
    },
  },
]


gatsby-browser.jsに以下を付け加えてスタイルを適用します。

gatsby-browser.js
require("prismjs/themes/prism-solarizedlight.css");


すると、マークダウン内に書いたコードがブラウザ上で以下のようにシンタックスハイライトが効いた状態で表示することができます。

PrismJSでは他にも色々なテーマが公開されており、私はprism-vsc-dark-plus.cssというテーマをベースに、少し自分好みにアレンジして使っています。

コードブロックにタイトルを付ける

gatsby-remark-code-titlesというプラグインをインストールします。

terminal
npm install gatsby-remark-code-titles --save-dev


先ほど編集したgatsby-config.jsファイルに、インストールしたプラグインを追加して適用させます。

gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-prismjs`,
        },
        {
          resolve: 'gatsby-remark-code-titles',
        },
      ],
    },
  },
]


cssで、.gatsby-code-titleというクラス名を指定して各自適当にスタイルを適用させます。

index.css

.gatsby-code-title {
  margin-bottom: -0.6rem;
  font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
    'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier,
    monospace;

  background-color: rgb(214, 164, 164);
  color: white;
  z-index: 0;

  border-top-left-radius: 0.3em;
  border-top-right-radius: 0.3em;
}


すると、以下のようにコードブロックにタイトルをつけることができます。

数式を表示する

gatsby-remark-katexというプラグインをインストールします。

terminal
npm install gatsby-remark-katex katex


gatsby-config.jsファイルに、インストールしたプラグインを追加します。

gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-prismjs`,
        },
        {
          resolve: 'gatsby-remark-code-titles',
        },          
        {
            resolve: `gatsby-remark-katex`,
        },
      ],
    },
  },
]


gatsby-browser.jsに以下を付け加えてスタイルを適用します。

gatsby-browser.js
require(`katex/dist/katex.min.css`);


v5.0.0での注意点

GitHubのIssueによると、gatsby-remark-katexのバージョンがv5.0.0以上、もしくはgatsby-transformer-remarkのバージョンがv4.0.0以上の場合は上記の方法ではうまくいきません。

その場合は自作プラグインを作成し、gatsby-remark-katexを以下のように書き換える必要があります。自作プラグインは、srcと同ディレクトリにpluginsというフォルダを作ることで定義できます。

plugins/gatsby-remark-katex/index.js
const visit = require(`unist-util-visit`)
const katex = require(`katex`)
const math = require(`remark-math`)
const unified = require(`unified`)
const parse = require(`rehype-parse`)

module.exports = ({ markdownAST }, pluginOptions = {}) => {
  visit(markdownAST, `inlineMath`, (node) => {
    node.data.hChildren = unified()
      .use(parse, { fragment: true, position: false })
      .parse(
        katex.renderToString(node.value, {
          displayMode: false,
          ...pluginOptions,
        })
      ).children
  })

  visit(markdownAST, `math`, (node) => {
    node.data.hChildren = unified()
      .use(parse, { fragment: true, position: false })
      .parse(
        katex.renderToString(node.value, {
          displayMode: true,
          ...pluginOptions,
        })
      ).children
  })
}

module.exports.setParserPlugins = () => [math]

引用元:https://github.com/gatsbyjs/gatsby/issues/30865#issuecomment-820876541

すると、以下のようにブログ内に数式を載せることができるようになります。

Gatsbyでは便利なプラグインが大量に提供されていますが、体感的には3割くらいがバージョン違いによる影響などで動かなくなっているので、定期的に公式ドキュメントやGitHubのIssueなどを見て確認する必要があります。


最後に

Gatsbyを使えば、Reactやフロントエンド未経験の方でも爆速で爆速な(?)サイトを構築することができます。

私もWeb開発者としてキャリアを歩み始めたばかりのど素人なので、これからもGatsbyで構築した自身のサイトに技術記事をたくさんアップロードして技術の勉強をできればと思っておりますので、よろしければ是非遊びに来てみてください。

また、この記事を読んで少しでも興味が湧いたという方がいらっしゃいましたら是非Gatsbyでサイトを立ち上げてみてください。

最後まで読んで頂き誠に有り難うございました。

参考