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

/

Front-end

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

Reactベースの静的サイト作成フレームワークであるGatsbyを介して独自のブログを作成するクラスです。

  • ji5485
Blog
Gatsby

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

こんなことが学べます

  • Gatsbyフレームワークを扱う方法

  • タイプスクリプトでリアクトコンポーネントを作成する方法

  • SEOとWebのアクセシビリティ向上対策

  • ブログ配信方法

このレッスンでは、ローンチ時点のバージョンであるGatsby v3を使用しています。
そのため、新たに講義を受講する方はバージョンにご注意ください!
現在、新しいバージョンを使った講義を準備中であり、
そのため、もはやコミュニティの管理は行われませんので、参考にしてください。


自分で作る独自の技術ブログ、
React Gatsbyで簡単で楽しいです🔧

開発能力を高める
技術ブログの力。

開発者なら一度くらい聞いたことでしょう。技術ブログが開発のスキル向上に役立つということです。
私も実際に役立つと思います。自分が学んだ内容を整理する過程で知らない内容を発見することもでき、またこれを探してみる過程を通じて私の技術力を成長させることができるからです。


技術ブログ開発を取り巻く
数多くの悩み!

  • 開発スタックの選択はどのように?
  • 検索エンジン最適化(SEO)はどのように解決しますか?
  • どの開発プロセスを経るべきですか?

何でも初めてが一番難しい法です。技術ブログも同様です。すでに多くの開発者が技術ブログを運営していますが、気にしなければならない要素が多いので、少なくない方がどのようにブログの開発を始めるのか幕を閉じています。

しかし、このすべてのコースに従うように教えてくれるヘルパーがあるとしたらどうでしょうか。より簡単で快適に技術ブログを開発できないでしょうか?この講義はまさにこのような悩みから始まります。


最近、
リアクトギャツビーで作る
簡単で迅速なブログ開発。

Gatsby.js?

ギャツビーは現在最も人気があります
フロントエンドライブラリリアクト(React)ベースの
静的サイト生成フレームワークです。

このレッスンでは、最近フロントエンド市場で急速に成長しているJAM Stackベースのフレームワークの中で、静的サイト生成フレームワークであるGatsbyで技術ブログを開発してみます。

さらに、より多くのフロントエンド開発者が使用しているTypeScriptを使用してリアクトアプリケーションを作成する方法を学ぶことができます。


自分で作ってみてください、
独自の技術ブログ!

この講義で作ってみるブログをあらかじめ確認できますよ。 (ショートカット)


この講義を作った
知識共有者を紹介します。

ジュヒョンド

より良い開発者になるために努力するジュニア開発者です。

  • 韓国デジタルメディア高校卒業
  • ソウル市立大学数学科在学中
  • スタートアップ「クナル開発」ウェブフロントエンド開発者(2019)
  • ソウル市立大学のおしゃれなライオンのような講義者(2019)
  • スタートアップ「ハイプロトコル」Webフロントエンド開発者(2022〜)

順番に学習してみてください!

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

セクション 1 - 簡単にページを表示する
Gatsbyで作成したプロジェクトを実行してWebサイトを表示しましょう。

セクション2 - 投稿リストを表示するメインページの実装
ブログコンテンツのリストが表示されるメインページの枠組みを設定しましょう。

セクション3 - メインページに実際のデータを表示する
GraphQLでインポートしたデータをメインページに表示しましょう。

セクション4 - ポストアイテムリンクを作成して適切な投稿ページにリンクする
メインページに表示されるコンテンツをクリックすると、ページが移動するようにリンクをリンクしましょう。

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

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

セクション7 - 検索エンジンの最適化とWebアクセシビリティの向上対策
誰でも利用できるようにWebアクセシビリティ標準を合わせてみて、検索結果の上に浮かぶようにSEO作業を進めてみましょう。

セクション 8 - サイトのデプロイとウェブマスター ツールにサイトを登録する
開発したブログを配布し、検索エンジンが検索できるようにウェブマスターツールにブログを登録してみましょう。

受講前にご確認ください!

  • 本講義はテキスト形式の講義で、別途映像を提供しません😀

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Reactでブログを開発したい人

  • TypeScriptでReactアプリを開発したい人

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

  • JavaScript

  • CSS

  • React

こんにちは
です。

3,029

受講生

119

受講レビュー

94

回答

4.9

講座評価

2

講座

カリキュラム

全体

37件

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

受講レビュー

全体

114件

4.9

114件の受講レビュー

  • JIHUN YANG님의 프로필 이미지
    JIHUN YANG

    受講レビュー 1

    平均評価 5.0

    5

    32% 受講後に作成

    • lgs4002님의 프로필 이미지
      lgs4002

      受講レビュー 13

      平均評価 4.3

      4

      68% 受講後に作成

      • 장윤형님의 프로필 이미지
        장윤형

        受講レビュー 14

        平均評価 5.0

        5

        100% 受講後に作成

        • toa님의 프로필 이미지
          toa

          受講レビュー 1

          平均評価 5.0

          5

          100% 受講後に作成

          타입스크립트가 처음인 분들이 보면서 익히기 좋은 것 같습니다.

          • sthgml님의 프로필 이미지
            sthgml

            受講レビュー 3

            平均評価 5.0

            5

            100% 受講後に作成

            글로만 이루어졌는데도 따라가기 쉽고, 이해가 잘 됐어요!

            無料

            ji5485の他の講座

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