강의

멘토링

로드맵

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

受講生

120

受講レビュー

94

回答

4.9

講座評価

2

講座

カリキュラム

全体

33件

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

受講レビュー

全体

5件

5.0

5件の受講レビュー

  • ffff님의 프로필 이미지
    ffff

    受講レビュー 2

    平均評価 5.0

    5

    97% 受講後に作成

    Tôi đã vận hành blog GitHub bằng Gatsby nhưng tôi muốn tự mình tạo nó!! Tôi nghĩ rằng tôi đang học được rất nhiều nhờ bài giảng này!! Ngoài ra, sẽ rất tốt nếu có nội dung về chức năng tìm kiếm trong blog và vị trí quảng cáo của Google!!

    • gunny6026님의 프로필 이미지
      gunny6026

      受講レビュー 21

      平均評価 5.0

      5

      30% 受講後に作成

      Tôi đã tạo một blog sau khi nghe bài giảng trước đó và tôi đã lấy nó ngay để cập nhật!

      • dnfkwld125995님의 프로필 이미지
        dnfkwld125995

        受講レビュー 1

        平均評価 5.0

        5

        24% 受講後に作成

        Tôi nghĩ việc học sẽ nhanh hơn nhiều nếu bạn chỉ định tên thành phần ở đầu hộp logic.

        • ji5485
          知識共有者

          Xin chào, Jang Ki Cheol! Trước hết mình xin cảm ơn bạn đã tham gia khóa học :) Tên tệp và vị trí được chỉ định ở đầu mỗi vùng mã. Điều này có thể khác không?

      • iqeq1226님의 프로필 이미지
        iqeq1226

        受講レビュー 3

        平均評価 5.0

        5

        15% 受講後に作成

        Nếu bạn muốn nhanh chóng đăng ký và học Getby, tôi khuyên bạn nên tham gia khóa học này!

        • jdy8739님의 프로필 이미지
          jdy8739

          受講レビュー 14

          平均評価 5.0

          修正済み

          5

          100% 受講後に作成

          Đây là một bài giảng bằng văn bản nhưng rất rõ ràng. Nhờ đó, tôi đã tạo một blog bằng Gatsby một cách dễ dàng và nhanh chóng. Tuy nhiên, bài giảng có đề cập đến styled-components, và vì thư viện này đã lỗi thời, người học cần có năng lực và ý chí để thay đổi sang một công cụ tạo kiểu khác trong khi xem bài giảng. (Tôi đã sử dụng vanilla-extract.)

          期間限定セール、あと2日日で終了

          ¥358,119

          25%

          ¥2,750

          ji5485の他の講座

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

          似ている講座

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