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

Name: ReactベースのGatsbyで技術ブログを開発するv2
Price: 22000 KRW
Rating: 5 (6 reviews)

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

（5.0）受講レビュー 6件

受講生 60名

難易度 中級以上

受講期間 無制限

ji5485

Gatsby

React

Blog

TypeScript

Gatsby

React

Blog

TypeScript

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

5.0

totota

97% 受講後に作成

GatsbyでGitHubブログを運営していましたが、自分で作りたくなりました！！この講義のおかげで多くのことを学べそうです！！追加でブログ内検索機能とGoogle広告の配置に関する内容もあると嬉しいです！！

5.0

거니

30% 受講後に作成

以前の講義を聞いてブログ作りましたが、アップデートするためにすぐに受講！

5.0

장기철

24% 受講後に作成

ロジックボックスの上部にコンポーネント名を明記していただければ、はるかに速い学習が可能だと思います。

受講後に得られること

Gatsbyフレームワークの使い方
Reactを使用したフロントエンド開発
検索エンジン最適化
ブログ配信の自動化
CMS（コンテンツ管理システム）を活用したブログ投稿の管理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

こんな方に
おすすめです

学習対象は
誰でしょう？

独自の技術ブログを開発したい方
開発から配布、SEOまですべてのコースを直接体験したい方

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

TypeScript
React

こんにちは
です。

3,049

受講生

121

受講レビュー

回答

4.9

講座評価

講座

カリキュラム

全体

33件

セクション 1．Gatsby の基本および開発環境の構築

5件

セクション 2．GraphQL を使ってデータをクエリする

2件

6. メインページに投稿一覧を表示
7. 投稿ページにコンテンツデータを表示

セクション 3．プロジェクト構成およびレイアウト開発

4件

8. 成果物プレビューおよびコンポーネント構想
9. ページレイアウトの開発
10. SSR / Browser API を用いたレイアウト分離
11. レスポンシブレイアウト実装

セクション 4．記事一覧を表示するメインページ開発

4件

セクション 5．記事ページ実装

8件

セクション 6．404エラーページの実装

2件

セクション 7．検索エンジンを最適化する

4件

セクション 8．デプロイ自動化, Google アナリティクス設定および Google Search Console 登録

4件

講座掲載日:

最終更新日:

受講レビュー

全体

6件

5.0

6件の受講レビュー

ffff
受講レビュー 2
∙
平均評価 5.0
5
97% 受講後に作成
GatsbyでGitHubブログを運営していましたが、自分で作りたくなりました！！この講義のおかげで多くのことを学べそうです！！追加でブログ内検索機能とGoogle広告の配置に関する内容もあると嬉しいです！！
gunny6026
受講レビュー 21
∙
平均評価 5.0
5
30% 受講後に作成
以前の講義を聞いてブログ作りましたが、アップデートするためにすぐに受講！
dnfkwld125995
受講レビュー 1
∙
平均評価 5.0
5
24% 受講後に作成
ロジックボックスの上部にコンポーネント名を明記していただければ、はるかに速い学習が可能だと思います。
- ji5485
  知識共有者
  こんにちはチャン・ギチョル！まず、講義を受講していただきありがとうございます。すべてのコード領域の上部にファイル名と場所を明示しておきますが、もしこれとは違う内容でしょうか？
iqeq1226
受講レビュー 4
∙
平均評価 5.0
5
15% 受講後に作成
getsbyをすばやく適用して学習したい場合は、このレッスンをお勧めします！
hurima90
受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成

￥2,793

ji5485の他の講座

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

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

ji5485

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

Intermediate

Blog, Gatsby

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

ji5485

似ている講座

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

React Three Fiber(R3F)で学ぶインタラクティブ3Dウェブ開発

taejaehan

ReactとThree.jsを一度に！3Dの基礎から、実務で使用できるプロジェクト、そして最適化のヒントまで！

Basic

Interactive Web, react-three-fiber, Three.js

React Three Fiber(R3F)で学ぶインタラクティブ3Dウェブ開発

taejaehan

Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)

gymcoding

最新のNext.js v15 App Routerを学習しながら、Notion基盤の実用的な開発者ブログを一緒に構築する講義です。さらにCursor AI活用法など様々なインサイトも得ることができます。

Basic

React, Blog, Next.js

Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)

gymcoding

Webゲームを作成して学習するReactにTypeScriptを適用する

zerocho

リアクトで作ったウェブゲームとReact Router、Redux、MobXにタイプスクリプトを貼り付けてリアクトとタイプスクリプトを一緒に使ってみましょう。

Intermediate

React, TypeScript

Webゲームを作成して学習するReactにTypeScriptを適用する

zerocho

ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

aftercamp

Reactレンダリングの原則、最適化を習得し、実践的な活用とインタビューの準備をしましょう！

Intermediate

React, react-usememo, Tech Interview

ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

aftercamp

[コードファクトリー] [初級] 8時間で終わるコードファクトリのTypescript完全征服フルコース

codefactory

TypeScript(타입スクリプト)をまったく知らない人でも、この濃縮されたTypeScript文法講座で、TypeScript文法の達人になれる講座です。

Basic

TypeScript

[コードファクトリー] [初級] 8時間で終わるコードファクトリのTypescript完全征服フルコース

codefactory

フォローして学ぶタイプスクリプトA-Z

John Ahn

この講義を通じてタイプスクリプトについて学ぶことができます。

Basic

TypeScript, JavaScript

フォローして学ぶタイプスクリプトA-Z

John Ahn

フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

John Ahn

このレッスンを通して、Reddit Webサイトを最初から1つ1つ作成することができます。

Basic

Clone Coding, Node.js, React

フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

John Ahn

コロナマップ開発者が教えるReact + Expressで地図サービスを作る (Typescript)

donghunee

MERN stack (feat. TypeScript) を活用して、地図サービスを最初から最後まで作成する講義です。API 公式ドキュメントを見ながら、一つずつ順を追って作成してみましょう。

Basic

MongoDB, Express, React

コロナマップ開発者が教えるReact + Expressで地図サービスを作る (Typescript)

donghunee

[Code Factory] [初級] NestJS REST API バックエンド完全征服マスタークラス - NestJS Core

codefactory

JavaScript、TypeScriptに続いて、次はバックエンド開発です。NestJSを使用してREST APIバックエンド開発、Socket IO開発および配布を行うことができます。

Basic

NestJS, REST API, backend

[Code Factory] [初級] NestJS REST API バックエンド完全征服マスタークラス - NestJS Core

codefactory

入門鋼のタイプスクリプトからionic6（アンギュラベース）

nodeep777

簡単にAndroidアプリ、Windowsアプリ、iosアプリを作成して配布する方法まで知りたい方におすすめです。 JavaScriptやアンギュラーではなく、タイプスクリプトの基礎からお知らせします！

Beginner

TypeScript, IONIC, Hybrid App

入門鋼のタイプスクリプトからionic6（アンギュラベース）

nodeep777

一口サイズで学ぶTypeScript（タイプスクリプト）

winterlood

文法を超えて動作原理と概念の理解まで学んでも学んでも混乱するTypeScript 今こそしっかり学びましょう！あなたをTypeScriptの魔法使い🧙🏻‍♀️にします。

Basic

TypeScript

一口サイズで学ぶTypeScript（タイプスクリプト）

winterlood

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

codecamp

10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

Intermediate

React, Next.js, cursor

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

codecamp

1時間でChat GPTクローンをCursorで作成（ワンデークラス）

dodocoding

Next.js + Cursor IDE でチャットプログラムを1時間で実装できる能力が身につきます。

Beginner

nextjs, ChatGPT, React

1時間でChat GPTクローンをCursorで作成（ワンデークラス）

dodocoding

誰よりも速く学ぶSpringboot + NextJS RestAPI掲示板作り

Neo

誰よりも早く学ぶSpringboot + NextJS RestAPI掲示板作り! SpringbootでCRUDサーバーを開発し、NextJSで自分だけの掲示板を作ってみましょう!

Beginner

React, Kotlin, TypeScript

誰よりも速く学ぶSpringboot + NextJS RestAPI掲示板作り

Neo

SpringAI + Reactで作る自分だけの感情日記サービス

Neo

SpringAI + Reactで作る私だけの感情日記サービス Neo + Essentialと一緒に作る4番目のプロジェクトの時間です!

Basic

React, Kotlin, Spring Boot

SpringAI + Reactで作る自分だけの感情日記サービス

Neo

iOS/Androidアプリ開発のための本番 React Native - Basic

Wintho

Mobile App Front-End開発のためのReact Nativeの基礎知識の習得を目指しています。進入障壁の低い言語/APIの活用により、非専門家も簡単にNative Mobile Appを開発できるように作られた講義です。

Basic

React Native, React, ES6

iOS/Androidアプリ開発のための本番 React Native - Basic

Wintho

Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

ludgi

Next.jsフルコースをディップして食べよう！ GraphQL、Redis、RabbitMQ、Prisma、TailwindCSS、Docker Compose、Cypress、Prometheus、Grafanaなど、最新技術で実践プロジェクトを完成させ、App RouterとPage Routerの両方を経験できます。

Intermediate

Next.js, React, GraphQL

Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

ludgi

次世代Node.jsバックエンドサーバーの開発（Fastify＆Prisma＆Typescriptと共に）

Indie Coder

速いスピードを誇るNode.jsフレームワークfastify、orm Prisma、およびTypescirptを活用した最新のNode.jsバックエンドREST APIを学習するコース

Basic

Node.js, TypeScript, Prisma

次世代Node.jsバックエンドサーバーの開発（Fastify＆Prisma＆Typescriptと共に）

Indie Coder

Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

codecamp

Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

Basic

React, Next.js, expo

Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

codecamp

# [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

dakgangjung123

React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

Basic

React, Electron, GUI

# [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

dakgangjung123

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

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

5.0

受講後に得られること

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

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

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

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

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

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

受講前の注意

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

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

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

こんな方に
おすすめです

こんにちは
です。

カリキュラム

受講レビュー

ji5485の他の講座

似ている講座

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

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

5.0

受講後に得られること

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

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

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

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

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

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

受講前の注意

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

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

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

こんな方に おすすめです

こんにちは .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}です。

カリキュラム

受講レビュー

ji5485の他の講座

似ている講座

こんな方に
おすすめです

こんにちは
です。