강의

멘토링

로드맵

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,037

受講生

120

受講レビュー

94

回答

4.9

講座評価

2

講座

カリキュラム

全体

33件

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

受講レビュー

全体

5件

5.0

5件の受講レビュー

  • totota님의 프로필 이미지
    totota

    受講レビュー 2

    平均評価 5.0

    5

    97% 受講後に作成

    개츠비로 깃허브 블로그를 운영중이였는데 직접 만들고 싶었습니다!! 이강의 덕분에 많이 알아 가는것 같습니다!! 추가적으로 블로그 내 검색기능이랑 구글광고 배치에 대한 내용도 있으면 좋을것 같습니다!!

    • 거니님의 프로필 이미지
      거니

      受講レビュー 21

      平均評価 5.0

      5

      30% 受講後に作成

      이전 강의 듣고 블로그 만들었는데, 업데이트 하기 위해 바로 수강!

      • 장기철님의 프로필 이미지
        장기철

        受講レビュー 1

        平均評価 5.0

        5

        24% 受講後に作成

        로직박스 상단에 컴포넌트 이름을 명시해주시면 훨씬 빠른 학습이 가능할것같습니다.

        • 주현도
          知識共有者

          안녕하세요 장기철님! 먼저 강의 수강해주셔서 감사드린다는 말씀부터 드리고 싶습니다 :) 모든 코드 영역 상단에 파일명과 위치를 명시해놨는데 혹시 이거랑은 다른 내용일까요??

      • zzz님의 프로필 이미지
        zzz

        受講レビュー 3

        平均評価 5.0

        5

        15% 受講後に作成

        getsby를 빠르게 적용하며 배우고 싶다면 이 강의를 추천합니다!

        • hj rr님의 프로필 이미지
          hj rr

          受講レビュー 16

          平均評価 5.0

          修正済み

          5

          100% 受講後に作成

          텍스트 강의이지만 아주 명쾌한 강의입니다. 덕분에 쉽고 빠르게 개츠비를 사용하여 블로그를 만들었습니다. 다만 강의에서 스타일드컴포넌트를 다루는데, 이 라이브러리가 depreciated된 만큼 강의를 보면서 다른 스타일 도구로 변경할 수 있는 수강생의 역량과 의지가 필요합니다. (저는 vanilla-extract로 하였습니다.)

          ¥2,773

          ji5485の他の講座

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

          似ている講座

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