Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

ReactベースのGatsbyで技術ブログを開発するv2

Gatsby v5を通じて直接自分だけの技術ブログを開発してみる講義です。

  • ji5485
텍스트 강의
블로그
Gatsby
React
Blog
TypeScript

学習した受講者のレビュー

こんなことが学べます

  • Gatsbyフレームワークの使い方

  • Reactを使用したフロントエンド開発

  • 検索エンジン最適化

  • ブログ配信の自動化

  • CMS(コンテンツ管理システム)を活用したブログ投稿の管理

多くの方々が訪ねてくださっただけに、

より豊かな内容に戻ってきました!



本当に感謝して、多くの受講生が私の以前の講義である「ReactベースのGatsbyで技術ブログを開発する」に良い評価を残しました。

しかし、時間が経つにつれて、講義の内容が旧バージョンになり、受講生の方々が進行するのに多くの困難を経験しました。

これらの点を反映して、今回の講義では、最新バージョンのより豊富な内容を含め、再び戻ってきました。

皆様の大切なご意見を反映し、さらに完成度の高い講義をご用意いたしましたので、多くの関心をお願いいたします。

今回の講義で新たに追加された内容


📌より簡単な投稿管理のためのコンテンツ管理システムであるContentfulを導入しました。

📌より簡単に投稿ページをレンダリングするために、GatsbyのCollection Routes機能を使用します。

📌 Gatsby Head API / Server Side Rendering API / Browser APIを積極的に使用します。

📌 Masonryレイアウト/目次など、さまざまな要素を追加しました。

📌今後のブログのパフォーマンス分析と改善のためにGoogle Analyticsを追加しました。

💡 開発、配布、SEOまですべてのコースを直接体験できるというメリットはそのまま持ってきました。

  • ブログ配布後の管理をさらに容易にするためのさまざまなコンテンツを追加しました。

  • 簡単にブログの機能を拡張できるように、より簡単にコードベースを設定しました。

自分だけの差別化されたブログを開発してみてください!


この世界で唯一存在する自分だけの技術ブログをしたくないですか?

しかし、技術ブログを開発する際、開発スタックの選定から始めて、どのように開発して配布するか、検索エンジン最適化はどうすべきかについての多くの悩みと困難に従います。

特にフロントエンドに慣れていない場合や、開発過程を最初から最後まで経験してみたことのない方には、より一層気になることがあります。

このような方々のために、このレッスンでは、皆さんがより簡単かつ快適に自分だけの差別化されたブログを開発できるようにすべてのコースを体系的にご案内いたします。

私たちが作るブログはこんな感じです。

メインページ(デスクトップ画面)

投稿ページ(デスクトップ画面)

タブレット画面とモバイル画面はデスクトップ画面と同様に含まれていません。

講義内容はこんな感じです。

セクション0 - Gatsbyの学習と開発環境の設定
Gatsbyフレームワークとは何かを調べて、ブログ開発環境を整理しましょう。

セクション1 - GraphQLによるデータの照会
ブログの投稿データをGraphQLでどのようにインポートできるかを見てみましょう。

セクション2 -プロジェクトの構成とレイアウトの開発
プロジェクト構造を設計し、すべてのページに共通に使用するレイアウトを作成しましょう。

セクション3 -記事のリストを表示するメインページの開発
投稿リストが表示されるメインページを開発しましょう。

セクション4 -投稿ページの実装
実際のブログコンテンツが表示されるページを整理しましょう。

セクション5 - 404エラーページの実装
非常に重要な要素ですが、簡単に通過できる部分である404ページを追加しましょう。

セクション6 -検索エンジンの最適化
私のブログが検索結果の上に浮かぶようにSEO(検索エンジン最適化)作業を進めてみましょう。

セクション 7 -デプロイの自動化、Google アナリティクスの設定、Google 検索コンソールの登録
ソースコードや投稿を編集するときに自動的に変更が反映されるように、展開プロセスを自動化しましょう。
ブログを管理するためにアナリティクスをリンクし、ウェブマスターツールにブログを登録しましょう。

受講前の注意


Q. 無料講義を代わりに受講しても構いませんか?

ReactベースのGatsbyで技術ブログを開発する

無料講義ですが、旧バージョンのGatsby v3を使用します。
それほど相対的にAPIの使用が便利ではなく、難易度が思ったより高くなることがあり、進行中にエラーが多く発生することがあります。

Q. 必要な選手の知識がありますか?

✔TypeScriptとReact

基本的なHTML、CSSコンテンツ


Q. 別途映像を提供しませんか?

本講義は以前の講義と同様にテキスト形式の講義で、別途映像を提供しておりませんのでご参考ください!

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 独自の技術ブログを開発したい方

  • 開発から配布、SEOまですべてのコースを直接体験したい方

前提知識、
必要でしょうか?

  • TypeScript

  • React

こんにちは
です。

3,028

受講生

119

受講レビュー

94

回答

4.9

講座評価

2

講座

カリキュラム

全体

33件

講座掲載日: 
最終更新日: 

受講レビュー

全体

5件

5.0

5件の受講レビュー

  • ffff님의 프로필 이미지
    ffff

    受講レビュー 2

    平均評価 5.0

    5

    97% 受講後に作成

    I was running a GitHub blog with Gatsby, but I wanted to create one myself!! Thanks to this lecture, I feel like I'm learning a lot!! Additionally, it would be great if there were content about blog search functionality and Google Ad placement!!

    • gunny6026님의 프로필 이미지
      gunny6026

      受講レビュー 21

      平均評価 5.0

      5

      30% 受講後に作成

      I created a blog after taking the previous lecture, so I'm taking this class right away to update it!

      • dnfkwld125995님의 프로필 이미지
        dnfkwld125995

        受講レビュー 1

        平均評価 5.0

        5

        24% 受講後に作成

        I think it would be much faster to learn if you specify the component name at the top of the logic box.

        • ji5485
          知識共有者

          Hello Jang Gi-cheol! First of all, I would like to thank you for taking the class :) I have specified the file name and location at the top of every code area, but is this different??

      • iqeq1226님의 프로필 이미지
        iqeq1226

        受講レビュー 3

        平均評価 5.0

        5

        15% 受講後に作成

        If you want to learn and apply getsby quickly, I recommend this course!

        • jdy8739님의 프로필 이미지
          jdy8739

          受講レビュー 13

          平均評価 5.0

          修正済み

          5

          100% 受講後に作成

          Although it's a text-based lecture, it's very clear. Thanks to this, I was able to create a blog using Gatsby easily and quickly. However, the lecture deals with styled-components, and since this library is deprecated, students need the ability and willingness to switch to other styling tools while watching the lecture. (I used vanilla-extract.)

          ¥2,689

          ji5485の他の講座

          知識共有者の他の講座を見てみましょう!

          似ている講座

          同じ分野の他の講座を見てみましょう!