GatsbyJS

ホームページとブログを別々の技術スタックとプロジェクトで開発することは珍しいことではありません。サブディレクトリを実現するのに苦労しました。その方法を共有します。

自分のホームページもGatsbyJSからNext.jsに移行しました。GatsbyJSが元々Next.jsとやや互角だったが、昔と今を比較してみようと思います。

gatsby-plugin-mdxと違い、コンポーネントの入れ替えはできないため、コードブロックにコピーボタンの追加は簡単にできません。ただ、gatsby-transformers-remarkで生成されるMarkdownASTを解析すれば、難しくなくコピーボタンを作れます。今日この方法を紹介します。

ブログとドキュメントサイトといえば、GatsbyJSが有力な候補者となるでしょう。レンダリングのスピードがかなり早く、プラグインの数が多くSEO対策も簡単にできます。ドキュメントがかなりわかりやすく、学習コストが低いと言えるでしょう。ReactJSのオフィシャルサイト [https://reactjs.org/](https://reactjs.org/) がGatsbyJS　で作られていますね。ブログ、ドキュメントサイトなら検索体験が非常に重要なポイントとなります。最近世によく使われる全文検索マネージドサービスはAlgoliaとなります。Gatsby

ランディングページはユーザが最初にアクセスするページとなります。いつもトップページのことを指しています。 有意義なコンテンツをトップページに置くことで、アクセスしてきたユーザにアピールできるでしょう。 thundermiracle.comをリニューアルするとき、Netlify Formを使いました。ランディングページに[問い合わせフォームの設置](./2020-06-18-secure-gatsby-netlify-form)ができたものの、不可解な問題が生じ、結局問い合わせフォームを独立なページに移動しました。

Netlify Formを利用すれば、serverlessのGatsbyにも問い合わせフォームを簡単に作れるでしょう。

Gatsbyをバージョンアップした後developモード起動できない問題