inflearn logo
inflearn logo

1時間でAstroを使ってブログを完成させる(Markdown・SSG・デプロイまで一気に)

この講座は、Astroを初めて触る方でも1時間以内に実際にデプロイされたブログを完成させることを目標としています。 理論の説明は最小限に抑え、コピーしてすぐに実行できるコードとステップバイステップのチェックポイントを中心に進めていきます。 講座が終わる頃には、 👉 「Astroを使ったことがある」ではなく 👉 「Astroで作ったブログを一つ持っている」という状態になります。

3名 が受講中です。

難易度 初級

受講期間 無制限

TypeScript
TypeScript
Blog
Blog
TailwindCSS
TailwindCSS
TypeScript
TypeScript
Blog
Blog
TailwindCSS
TailwindCSS
날개 달린 동전

講座 を紹介して、成長と収益を得ましょう!

날개 달린 동전

マーケティングパートナーズ

講座 を紹介して、成長と収益を得ましょう!

受講後に得られること

  • Astroプロジェクトの作成から実行までの全体的な流れの理解

  • Markdownベースのコンテンツシステム構成

  • 記事一覧ページ & 記事詳細ページの実装

  • Astro SSG方式によるページ生成の経験

  • 最小限のSEO設定 (title / description / canonical / og 基本値)

  • Vercelを利用した実際のデプロイ経験


Astroでブログを1時間で?

Astroは単なるフレームワークではありません。複雑な設定なしですぐにコードを実行し、自分だけのブログを1時間以内に完成させ、実際のデプロイまで経験できる近道です。理論は最小限に抑え、実践を通じてAstroの強力さを直接体感してください。


公式ドキュメントが難しすぎて、Astroを始めるのをためらっていませんでしたか?

ReactやVueの経験はあるけれど、Astroは初めてで感覚が掴めませんでしたか?

理論だけでは不十分だと感じ、まずは何かを「完成」させてみたいと思いませんでしたか?

Astroを使ったことがなくても、この講座を通じて完成した自分だけのブログを持つことができます。


Astroプロジェクトの生成から
Markdownベースのブログ構築、
TypeScriptとTailwind CSSの活用法まで
実践中心に学んでみましょう。

理論はひとまず置いておき、
Astroで自作したブログをデプロイする経験へ

「Astroでブログを完成させた開発者」になりましょう。


この講義が終わる頃、あなたは


Astroプロジェクトの作成からデプロイまで、一つのブログを完成させる経験を身につけます。

  • 概念だけをなぞるのではなく、Astroプロジェクトを直接作成し、Markdownで記事を執筆し、動的ルーティングを通じて記事一覧と詳細ページを実装する全過程を経験します。理論学習に負担を感じる方でも、コピー&ペーストで実行可能なコードを通じて、1時間以内に最初にデプロイされたブログを完成させることができます。

Markdownベースのコンテンツ管理および動的ページの実装能力を養います。

  • AstroのContent Collections機能を活用して投稿データを体系的に管理し、それに基づいた動的な記事一覧ページと詳細ページを実装する方法を学びます。これにより、個人ブログだけでなく、さまざまなコンテンツベースのWebサイトを構築するために必要な核心技術を習得します。

実際のサービスに適用可能な基本的なSEOやデプロイまで、自力で解決します。

  • 単にブログを作るだけでなく、検索エンジン最適化(SEO)のための基本設定(title、description、canonical、ogタグ)を適用し、Vercelを利用した実際のデプロイ経験を通じて、作成したブログを世に公開する全過程を自ら完結できるようになります。


✔️

1時間でAstroを使って自分だけのブログを完成させる

Astroでブログを
自作する
1時間で完成させる

この講座は、Astroプロジェクトの作成から実際のVercelデプロイまで、1時間以内にブログを完成させるプロセスを詳細に案内します。理論は最小限に抑え、すぐに実行可能なコードとステップバイステップのチェックポイントを通じて、「Astroで作ったブログ」という成果物を即座に得ることができます。

Astroブログ
完成およびデプロイ

最小限のSEO設定から、Vercelを利用した実際のデプロイ体験まで、すべてを提供します。講義で提供されるコードを活用すれば、1時間以内にあなただけのデプロイ済みブログを完成させることができます。

Astroプロジェクトで自分だけのブログを構築

Astroプロジェクトの生成、TailwindCSSの連携、ブログレイアウトおよびヘッダー/フッターの実装、Markdown/MDXベースの記事作成、動的ルーティング、記事一覧ページまでを実際に作りながら、Astroベースのブログ開発の全過程を実習します。

※ 実際にAstroで構築したブログの成果物

このような方々の悩みを
解決できます!

📌

Astro入門開発者

Astroという新しい技術スタックを学びたいが、どこから始めればいいか分からず途方に暮れている方
公式ドキュメントを読んでも理解が難しく、実際にプロジェクトを作ってみることに困難を感じている方

📌

React/Vue 開発経験者

すでにReactやVueなどのフレームワークの経験はあるが、Astroならではのメリットを活かして
より速く効率的なウェブサイトを構築したい方

📌

個人ブログ制作希望者

自分だけの個性を込めた個人ブログを直接作ってみたいけれど、
複雑な設定やデプロイプロセスのせいでためらっていた方

受講前のご注意事項


実習環境

  • OS:Windows、macOS、Linuxのすべてに対応しています。

  • 必須インストールプログラム:Node.js(最新のLTSバージョンを推奨)

  • 個人PCのスペック:ウェブブラウザおよびコードエディタの実行に支障がない程度であれば十分です。

前提知識および注意事項

  • Astroの経験がなくても大丈夫です。

  • HTML/CSSの経験があれば、理解の助けになります。

  • React、Vueなどの他のフレームワークの経験があれば、理解の助けになります。

  • Markdownの文法に慣れていると、学習がよりスムーズになります。

学習資料

  • 講義で提供されるコード例をそのままコピーして使用できます。

  • 各ステップごとのチェックリストを通じて、学習の進捗状況を確認することができます。

  • Astro公式サイトのリンクを提供し、追加学習をサポートします。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • 🔰 Astroが初めての方や、公式ドキュメントが少し難しく感じる方へ

  • ⚛️ React / Vue の経験はあるが、Astro は使ったことがない方

  • ✍️ 個人ブログを自分で作ってみたい開発者

  • 🚀「理論ではなく、まずは一つ完成させてみたい」という方

  • ⏱️ 短時間で成果物が必要な方

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

  • Node.js / npm の基本的な使用経験

  • ターミナルでコマンド実行可能

  • JavaScript文法に関するごく基本的な理解

こんにちは
woongsnoteです。

カリキュラム

全体

26件

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

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

似ている講座

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

期間限定セール

¥15

30%

¥3,488