コピー2021.02.22Over40WebClub主催の勉強会でとりあげたテーマです。管理者のピータンさんの提案で講師をさせていただいたので、その過程を残そうと思います。その時にできたブログがこれー>ぼちぼちブログ@Gatsby。ここに至るまでにはpitangさんにメンターのごとく伴奏していただきました。ありがとうございました!今後、勉強会で作ったブログをカスタマイズして、いずれ、このWordPressをヘッドレスにして、GatsbyJSのブログをメインにしていきたいと思います。Gatsbyか新しいプラグインの発表。ヘッドレスWordPressとは?WordPressは「このページ表示して」という要求に応じて、サーバー側でデータベースから必要なデータをとってきます。これが首から下の部分です。それを表示できるデータにしてブラウザに渡して表示します。これ頭(ヘッド)今回は、WordPressから事前にデータだけをもらって(ヘッドレスWordPress)、ヘッドの部分を別の技術を用いて(今回は静的サイトジェネレーターGatsby)つくるということです。今回はこの「ヘッドレスWordPress」に対して、WordPressだけで運用しているサイトのことを「バニラWordPress」と呼ぶことにします。GraphQLでデータを取得することができます。今回は最近注目されているクエリ言語であるGraphQLを使います。クエリ言語:問い合わせ言語。データに対して問い合わせて必要なデータを抽出したり、並べ替えたりするための言語。WPプラグインのインストール検索してインストールします。WPGraphQLWordPressサイトにGraphQLのスキーマ及びAPIを提供すWPGatsbyWordPressサイトをGatsbyへのデータ源として最適化する。.コマンドはMacの場合、事前の設定が必要な場合があります。検索シェルコマンド:PATH内に’code’コマンドをインストールします。PATHVSCode内でターミナルを開いておきましょう。^環境変数WPGRAPHQL_URLの設定gatsby-config.jsを開きます。WPGRAPHQL_URLの初期値を設定する。GitHubCLIを使ってみます。各種設定Gatbyサイトならビルドするブランチやディレクトの設定はおおむね自動でやってくれます。nameなんやかやとしているうちにデプロイ終了します。どのサイトのフックか分かる名前を設定します。WordPressでかんたんな記事を投稿するか、更新すれば、ウェブフックがきいて自動でデプロイされます。vol.2では、アメリカではGatsby人気で、これから日本でも徐々に浸透し始めてる、いや、すでに火が付き始めているといました。WordPress一択の今の日本のウェブ業界の課題にこたえるGatsbyJSは、今まさに勉強する価値のあるテーマです。その1回目のデザイン案をいただきました。そのときに、トップページにアニメーション指定があったので、あらかじめ、実装してみたので、CSSアニメーションについてまとめます。graphqlで画像データが渡ってこず、URLだけ渡ってくる仕様。DOM操作のときに子要素を一度クリアして、そこに要素を追加したいと思って、削除の方法を調べたメモです。これが起きるのはMacOSをアップデートしxた後です。エラーメッ...プログラミングnotion初心者のとき、初めてやったことちまたで流行っているnotion。噂に違わぬ高機能で、すばらしいアプリです。すぎて、複雑😅」って思ったことはありませんか?ぼくも、最初、何から手をつけていいのかわからずでした。今も効率的に使えているかどうか???です...プログラミングGatsbyでヘッドレスWordPress|Netlifyへデプロイ&Webフック設定Gatsbyの持っている強みとWordPressの持っている強みをかけ合わせてのブログ構築に挑戦中。GatsbyCloudでのWebhook設定はとてもかんたんにできたのですが、他のホスティングサービスでもできるのか、やってみました。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コーディング案件納品、ふりかえり学校体育は何をめざすところなのか。それがずれているから、起きてしまった事故。労働組合プログラミングその他もろもろお問い合わせこのブログについてプライバシーポリシーホーム検索トップサイドバータイトルとURLをコピーしました。