宇宙CMSで燃える速い鉄腕ブログを構築する方法

このチュートリアルでは、簡単なブログアプリケーションを作成する方法を示しますAstro , and Cosmic CMS . さらに離れて、いくつかのコーヒーをつかむ＆クールなアプリを構築しよう!

TLドクター

Astro Cosmic Blog Demo

Download Source Code

Install the Astro Cosmic Blog

必要条件
最新の安定版をインストールする必要がありますNode JS とnpm基本的な理解があれば、チュートリアルの問題はありません.

HTML、CSS、およびJavaScript

インポートとエクスポートの構文( ES 6モジュール)

コンポーネントのようなコンセプト

フェッチAPI

我々のテクノロジースタックから始めましょう.

何Astro ?
Astroはもう一つの新しい静的サイト発生器(SSG)であり、出力のように静的なページを生成することを意味する.そのウェブサイトを構築するための新しいフレームワーク.アストロは、任意のJavaScriptフレームワーク/ライブラリを使用する柔軟性を与える.Astroを使用するという大きな利点は、デフォルトでJavaScript 0 %を出荷することです.

Note: Astro is still an early beta state.

アバウトCosmic ?
宇宙は、我々は驚くほど迅速に我々のアプリケーションを構築し、瞬間にNetliflyにそれを展開できるようになりますヘッドレスCMSです.伝統的なCMSとは異なり、宇宙は、開発者として我々は、このアプリケーションを開発するための柔軟性の多くはどのように私たちを喜ばせると、任意のホスティングプラットフォームにそれを取る願っています.また、それはこのようなアプリケーションを構築するための完璧なデータを格納し、取得することは非常に簡単です.

あなたのブログを作成する
我々はデータを必要とするブログのアプリを作成します.このデータを管理し、操作するために、我々は宇宙のバケツとオブジェクトの力を使用するでしょう.始める

クリエイトアfree account on Cosmic . これが宇宙を使用してあなたの初めての場合は、私たちが使用されるデータ型のいくつかを紹介する短いチュートリアルが表示されます-バケット、オブジェクト、およびメタフィールド.

新しい空のバケツと名前のコーヒーのブログを作成します.各ブログ記事には三つのオブジェクトタイプがあります.

タイトル

内容

イメージ

だから、先に行くと、これらのオブジェクトのいくつかのデータと一緒にバケットにこれらのプロパティを追加します.If you're having trouble with Buckets, Objects, or Metafields, go ahead and read the Getting Started page really quickly for some startup instructions , それから戻ってくる
本稿では
今、我々は我々の宇宙的なCMSとAstrooプロジェクトをつくって、それに宇宙CMSを統合するその取得時間をつくりました.

アストロアプリケーション
Astroプロジェクトを作成するには、まずフォルダを作成して移動しなければなりません.

> mkdir astro-cosmic-app && cd astro-cosmic-app

以下のコマンドを実行してアトムをインストールします.

> npm init astro

次のように、「スターターキット( generic )」テンプレートを選択します.

選択したフレームワークを使用したいので、次のように選択します.

今すぐプロジェクトの作成を終了する分を待ちます.
その後、以下のコマンドを実行してすべてのパッケージをインストールします.

> npm install

コマンドを以下のコマンドで実行するには、次の手順に従います.

> npm run dev

現在オープンhttp://localhost:3000/ 出力を見てください.

したがって、VSコードエディタにアプリケーションを開き、フォルダ構造を確認します

/パブリック:任意の静的資産は、画像のように、パブリック/ディレクトリに配置することができます

src/コンポーネント:コンポーネントは再利用可能なコードの一部です.任意のアストロ/反応/Vue/svelte/preactコンポーネントを置きます.

このフォルダは、あなたのウェブサイトのすべてのページを含みます.MDまたは.アストロファイル.各ページは、そのファイル名に基づいてルートとして公開されます.

このブログのアプリケーションのために、我々はスタートbootstarpクリーンなブログテンプレートを使用しています.テンプレートをダウンロードhere .
ダウンロード後、ファイルを展開し、スタイルをコピーします.CSSファイルの下のCSSファイルをプロジェクトのパブリックフォルダーにします.
また、私たちのプロジェクトの資産フォルダーにテンプレートから/資産のデータをコピーします.

クリエイト.envファイル
私たちは使っています.Envファイルは、宇宙バケットを格納し、キーデータを読み取ります.パッケージの下にインストールします.

npm install --D dotenv

その後、作成.プロジェクトのルートレベルでenvファイルを追加し、詳細を更新します.

COSMIC_BUCKET_SLUG=<replace your bucket name>
COSMIC_READ_KEY=<replace your read key>

コンポーネントの作成

コンポーネントフォルダ内のすべてのファイルを削除します.最初に私たちは' BlogPostPreviewと呼ばれるコンポーネントを作成します.は、単一のポストデータとして入力を受け取り、それを表示します.したがって、「コンポーネント」フォルダで「BlogPostPreview」として新しいコンポーネントを作成します.アストロ

< div >
<ウル>

すべてのメタデータURL、外部CSS/JSファイルへのリンクを含む“basehead . astro”と呼ばれる別のコンポーネントを作成します.

< ull >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/sumitkharche/d6daf74368ce28e6023158b2512326b3.js//>
< div >
<ウル>

すべてのページにフッターを表示するには、「footer . astro」というコンポーネントを作成します.

< ull >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/sumitkharche/1cb3938a415f7b588b8ff5e2337f0586.js//>
< div >
<ウル>

すべてのページにフッターを表示するには「ナビゲーション. astro」というコンポーネントを作成します.

< ull >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/sumitkharche/5acc85dc7d85167dca5efdd2933270cf.js//>
< div >
< H 4 >

ランディングページ内のすべての投稿を表示
<高橋潤子>
<ウル>

まず最初にsrcと呼ばれるフォルダを作成しますlib そして、その中で' configと呼ばれるファイルを作成します.私たちのENV変数をbelowsとしてエクスポートします

< ull >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/sumitkharche/c6eecbdd859878a4d7863a9e8bdcc8a6.js//>
< div >
<ウル>

インデックスを開きます.アストラルファイルとコードの下に置き換え、着陸ページ内のすべての記事を表示します.

< ull >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/sumitkharche/164d00b725ddf1b01a32a99d22814af8.js//>
< div >
を使用してアプリケーションを実行するnpm run dev で出力を見るhttp://localhost:3000/ .

< P >

<ウル>

次のように「about . astro」というページフォルダ内に別のページを作成します.

< ull >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/sumitkharche/9aef0d3d6767ec84dc27bb3708b61f1e.js//>
< div >
<ウル>

ナビゲーションバーのオプションをクリックして出力を確認します.

< ull >
< P >

<ウル>

今、我々はすべてのポストのために別々の静的ページを作成するページを作成しなければなりません、そして、ユーザーが一つのポストをクリックするとき、それはそのページを表示します.それを達成するために、「ポスト」と呼ばれているページの中のフォルダーを作成してください、そして、内部では、「スラッグ」

< ull >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/sumitkharche/fec5790bdf0185793cfe383d95247dd5.js//>
< div >
<ウル>

では、再度アプリケーションを実行し、POSTをクリックしてポスト詳細を参照してください.

< ull >
< P >

<市川>生産モードでアプリケーションをビルドするには、< br/>を実行するだけです.
<> P >
クラスをハイライト表示する

> npm run build

< div >
< H >>

展開する
<高橋潤子>
我々は現在、任意のホスティングプラットフォームに我々のアプリケーションを展開することができます.私はそれを展開することをお勧めしますNetlify このようなプロジェクト構造をサポートしており、すぐに展開を作成できますbr/>
チェックアウトarticle netlifyにアストロアプリケーションを配備するにはp >
< H >>

結論
<高橋潤子>
この記事では、私はどのようにアストロと宇宙を使用してブログのアプリケーションを作成する方法を示している.宇宙コミュニティは、電子メール機能、ダウンロード機能、サードパーティ製プラットフォームとの統合を扱う方法について多くの例を持っています.このような独自のアプリケーションを構築することに興味があります.get started by setting up your free account .

私は本当にあなたがこの小さなアプリを楽しんでほしいと願っていますし、私はあなたが私により良い行ったことができるかについてのあなたの考えやコメントを送信することを躊躇しないでくださいp >
< br/>アプリケーションのビルドに関するコメントや質問がある場合は
コズミックアンドjoin the conversation on Slack .

あなたはTwitterや< p >で私についてくることができます