
React 기반 Gatsby로 기술 블로그 개발하기 v2
주현도
Gatsby v5를 통해 직접 나만의 기술 블로그를 개발해보는 강의입니다.
中級以上
Gatsby, React, 블로그
Reactベースの静的サイト作成フレームワークであるGatsbyを介して独自のブログを作成するクラスです。
Gatsbyフレームワークを扱う方法
タイプスクリプトでリアクトコンポーネントを作成する方法
SEOとWebのアクセシビリティ向上対策
ブログ配信方法
このレッスンでは、ローンチ時点のバージョンであるGatsby v3を使用しています。
そのため、新たに講義を受講する方はバージョンにご注意ください!
現在、新しいバージョンを使った講義を準備中であり、
そのため、もはやコミュニティの管理は行われませんので、参考にしてください。
自分で作る独自の技術ブログ、
React Gatsbyで簡単で楽しいです🔧
開発者なら一度くらい聞いたことでしょう。技術ブログが開発のスキル向上に役立つということです。
私も実際に役立つと思います。自分が学んだ内容を整理する過程で知らない内容を発見することもでき、またこれを探してみる過程を通じて私の技術力を成長させることができるからです。
何でも初めてが一番難しい法です。技術ブログも同様です。すでに多くの開発者が技術ブログを運営していますが、気にしなければならない要素が多いので、少なくない方がどのようにブログの開発を始めるのか幕を閉じています。
しかし、このすべてのコースに従うように教えてくれるヘルパーがあるとしたらどうでしょうか。より簡単で快適に技術ブログを開発できないでしょうか?この講義はまさにこのような悩みから始まります。
Gatsby.js?
フロントエンドライブラリリアクト(React)ベースの
静的サイト生成フレームワークです。
このレッスンでは、最近フロントエンド市場で急速に成長しているJAM Stackベースのフレームワークの中で、静的サイト生成フレームワークであるGatsbyで技術ブログを開発してみます。
さらに、より多くのフロントエンド開発者が使用しているTypeScriptを使用してリアクトアプリケーションを作成する方法を学ぶことができます。
より良い開発者になるために努力するジュニア開発者です。
セクション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
全体
37件
全体
114件
4.9
114件の受講レビュー
受講レビュー 1
∙
平均評価 5.0
受講レビュー 13
∙
平均評価 4.3
受講レビュー 14
∙
平均評価 5.0
受講レビュー 1
∙
平均評価 5.0
受講レビュー 3
∙
平均評価 5.0
無料
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!