Using GatsbyJS

2020/09/08 — Tutorial, GatsbyJS — 3 min read

Blog をいかに作るか

についていろいろ考えたのだけれども，

Blog サービス使うのはかんたんだし高機能だけどつまらない * あまり凝ったものを作るとメンテがしんどい
- あまり面倒なことはしたくない
- ふだんは，さくっと更新できるくらいがちょうどよい
たまに凝ったものが書けるようにしたい
勉強も含めたいので，最低限なにかしら手が動かせるものがよい

2020 年くらいのフロントエンドの潮流を考えるとあれだけ流行った Vue.js よりも React が復権しつつあることやここ最近，Vue.js には社の仕事や大学院の作業で使って辟易していたこともあって React ベースの静的サイトジェネレータ GatsbyJS で作ってみるか，と思ったのでした．

適当にやれば，人さまに馬鹿にされなさそうでいてイージーにサイトが作れそうなので，
Gatsby + GitHub + AWS
で組むことにした．
連携方法は以下を参考にしました．
https://tech-blog.s-yoshiki.com/entry/197

Gatsby の始め方はすでにいろんなところで書かれてると思うので，差分ぽいことだけ書くと．
以下のテーマを使わせてもらっています．
https://github.com/LekoArts/gatsby-starter-minimal-blog

Plugins

gatsby-plugin-twitter

Twitter 貼るためのプラグイン
https://www.gatsbyjs.com/plugins/gatsby-plugin-twitter/#gatsby-plugin-twitter

plugin いれて(npm install してるけど，yarn add でも入る)，gatsby-config.js の plugins に追記してやれば入る．
ただ，動かすときに Twitter の組込みスニペットだとエラーになって， <br> → <br /> に手直しが必要っぽい．

gatsby-plugin-mdx， gatsby-remark-embed-video

youtube 動画を埋め込むために gatsby-remark-embed-video の導入しようと思ったが，本プラグインは gatsby-transformer-remark プラグインのプラグインとして導入する必要がある．
で，この gatsby-transformer-remark は (Remark)[https://remark.js.org/] という Markdown エンジンに依存している．
しかし，今回のテーマでは (MDX)[https://mdxjs.com/] を使用している．MDX は gatsby-plugin-mdx プラグインをとおして扱う．

公式ドキュメントによると，本プラグインは Remark 対応のプラグインも読み込めるので，これを使って gatsby-remark-embed-video を導入する https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/?=mdx#gatsby-remark-plugins

つまり， gatsby-config.js は以下のようになる．

plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
          {
            resolve: `gatsby-remark-embed-video`,
            options: {
              width: 800,
            }
          }

※ 機能拡張するごとに本記事を Update していきます．

おまけ

随分前に書いて放置していたものを note に公開した．

補遺――マインドフレア
https://note.com/youknowcast/n/n614ff3f6f2b2