19
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

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

はじめに

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

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

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

https://poteboy.com
ぽてログ


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

Lighthouse


なぜGatsby

gatsby

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

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

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

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

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


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

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

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

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

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


学習リソース

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

4時間超えの動画に加えて全編英語なので少しハードルは高めですが、とても聞き取りやすい英語かつ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というテーマをベースに、少し自分好みにアレンジして使っています。
スクリーンショット 2021-05-07 1.17.51.png

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

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;
}



すると、以下のようにコードブロックにタイトルをつけることができます。
スクリーンショット 2021-05-07 1.23.21.png

数式を表示する

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

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

スクリーンショット 2021-05-06 20.29.00.png

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


最後に

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

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

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

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

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
19
Help us understand the problem. What are the problem?