
ReactベースのGatsbyで技術ブログを開発する
ji5485
無料
中級以上 / Blog, Gatsby
4.9
(118)
3,000+
Reactベースの静的サイト作成フレームワークであるGatsbyを介して独自のブログを作成するクラスです。
中級以上
Blog, Gatsby


学習した受講者のレビュー
5.0
totota
GatsbyでGitHubブログを運営していましたが、自分で作りたくなりました!!この講義のおかげで多くのことを学べそうです!! 追加でブログ内検索機能とGoogle広告の配置に関する内容もあると嬉しいです!!
5.0
거니
以前の講義を聞いてブログ作りましたが、アップデートするためにすぐに受講!
5.0
장기철
ロジックボックスの上部にコンポーネント名を明記していただければ、はるかに速い学習が可能だと思います。
Gatsbyフレームワークの使い方
Reactを使用したフロントエンド開発
検索エンジン最適化
ブログ配信の自動化
CMS(コンテンツ管理システム)を活用したブログ投稿の管理

本当に感謝して、多くの受講生が私の以前の講義である「ReactベースのGatsbyで技術ブログを開発する」に良い評価を残しました。
しかし、時間が経つにつれて、講義の内容が旧バージョンになり、受講生の方々が進行するのに多くの困難を経験しました。
これらの点を反映して、今回の講義では、最新バージョンのより豊富な内容を含め、再び戻ってきました。
皆様の大切なご意見を反映し、さらに完成度の高い講義をご用意いたしましたので、多くの関心をお願いいたします。
📌より簡単な投稿管理のためのコンテンツ管理システムであるContentfulを導入しました。
📌より簡単に投稿ページをレンダリングするために、GatsbyのCollection Routes機能を使用します。
📌 Gatsby Head API / Server Side Rendering API / Browser APIを積極的に使用します。
📌 Masonryレイアウト/目次など、さまざまな要素を追加しました。
📌今後のブログのパフォーマンス分析と改善のためにGoogle Analyticsを追加しました。
💡 開発、配布、SEOまですべてのコースを直接体験できるというメリットはそのまま持ってきました。
ブログ配布後の管理をさらに容易にするためのさまざまなコンテンツを追加しました。
簡単にブログの機能を拡張できるように、より簡単にコードベースを設定しました。
この世界で唯一存在する自分だけの技術ブログをしたくないですか?
しかし、技術ブログを開発する際、開発スタックの選定から始めて、どのように開発して配布するか、検索エンジン最適化はどうすべきかについての多くの悩みと困難に従います。
特にフロントエンドに慣れていない場合や、開発過程を最初から最後まで経験してみたことのない方には、より一層気になることがあります。
このような方々のために、このレッスンでは、皆さんがより簡単かつ快適に自分だけの差別化されたブログを開発できるようにすべてのコースを体系的にご案内いたします。
.png?w=960)
メインページ(デスクトップ画面)
.png?w=960)
投稿ページ(デスクトップ画面)
❗タブレット画面とモバイル画面はデスクトップ画面と同様に含まれていません。
セクション0 - Gatsbyの学習と開発環境の設定
Gatsbyフレームワークとは何かを調べて、ブログ開発環境を整理しましょう。
セクション1 - GraphQLによるデータの照会
ブログの投稿データをGraphQLでどのようにインポートできるかを見てみましょう。
セクション2 -プロジェクトの構成とレイアウトの開発
プロジェクト構造を設計し、すべてのページに共通に使用するレイアウトを作成しましょう。
セクション3 -記事のリストを表示するメインページの開発
投稿リストが表示されるメインページを開発しましょう。
セクション4 -投稿ページの実装
実際のブログコンテンツが表示されるページを整理しましょう。
セクション5 - 404エラーページの実装
非常に重要な要素ですが、簡単に通過できる部分である404ページを追加しましょう。
セクション6 -検索エンジンの最適化
私のブログが検索結果の上に浮かぶようにSEO(検索エンジン最適化)作業を進めてみましょう。
セクション 7 -デプロイの自動化、Google アナリティクスの設定、Google 検索コンソールの登録
ソースコードや投稿を編集するときに自動的に変更が反映されるように、展開プロセスを自動化しましょう。
ブログを管理するためにアナリティクスをリンクし、ウェブマスターツールにブログを登録しましょう。

ReactベースのGatsbyで技術ブログを開発する
無料講義ですが、旧バージョンのGatsby v3を使用します。
それほど相対的にAPIの使用が便利ではなく、難易度が思ったより高くなることがあり、進行中にエラーが多く発生することがあります。
✔TypeScriptとReact
✔基本的なHTML、CSSコンテンツ
本講義は以前の講義と同様にテキスト形式の講義で、別途映像を提供しておりませんのでご参考ください!
学習対象は
誰でしょう?
独自の技術ブログを開発したい方
開発から配布、SEOまですべてのコースを直接体験したい方
前提知識、
必要でしょうか?
TypeScript
React
全体
33件
全体
6件
5.0
6件の受講レビュー
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!
新規会員登録で25%OFF
¥2,149
25%
¥2,859