Astroでブログを設定する

11521 ワード
javascript webdev astro テキストリンク
私は、他の静的サイトジェネレータの代わりにAstroを使うモチベーションに行きました.ここでは、最小限の手順でアストロでブログを設定するガイドを提供します.私は重要な基礎をカバーし、次の手順をガイドします.

最速の方法


開始する最速の方法はAstro New ページと“ブログ”テンプレートをそこに選択します.テンプレートをWebサンドボックス内で実行するか、Gitテンプレートをクローン化することでテンプレートを実行できます.
アストロがフードの下でどのように働くかをよりよく理解するために、我々は現在、ゼロからプロジェクトを作成します.

空のプロジェクトを作成する


Note: before we start, I will introduce a few Astro concepts that will be used across this guide. First, there are Markdown pages, pages that have an .md extension and usually contain the blog post text. Second, there are Astro pages, pages that have an .astro extension and usually serve for unique pages (like index page). Finally, there are Astro layouts, pages that also have an .astro extension which defines how pages with similar structure (e.g. blog posts) should look like.


まず、空のディレクトリを作成し、NPMプロジェクトを初期化し、依存関係としてアトムをインストールします.
mkdir astro-blog
cd astro-blog
npm init -y
npm i -D astro
あなたのパッケージで.JSON , ADDbuild and dev スクリプト
"scripts": {
    "dev": "astro dev",
    "build": "astro build"
},
次に、インデックスページを作成します.
mkdir src
mkdir src/pages
touch src/pages/index.astro
オープンindex.astro テキストエディタで裸のページを作成します.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Blog</title>
    </head>
    <body>
        <main>
            <h1>Hello, Astro!</h1>
        </main>
    </body>
</html>
最後に、devサーバーを起動してページを表示します.
npm run dev
移動するhttp://localhost:3000 レンダリングされたページを見るには!

ポストレイアウトの作成


最初のポストに入る前に、レイアウトを作成する必要があります.SSGの仕事は、同様の構造(例えばブログ記事)を持つページに対して、そのリスト内の各ページに適用されるテンプレートを提供することです.アストロでは、レイアウトは、その目標に役立ちます.レイアウトを作ろう
mkdir src/layouts
touch src/layouts/post.astro
オープンpost.astro ポストレイアウトを作成するファイル
---
const { content } = Astro.props;
const { title } = content;
---

<html lang="en">
    <head>
        <title>{title}</title>
    </head>
    <body>
        <slot />
    </body>
</html>
これは通常のHTMLのようには見えません.アトムレイアウト構文を1つずつアントワープしましょう.

Note: the syntax described below is similar for Astro components, layouts, and regular Astro pages (all files ending with .astro). The frontmatter part (---) is optional, and what's below that is a normal HTML with the addition of templating ({ JS_CODE_HERE }) and component slots (<slot />).


まず、レイアウトの上部にFrontMatterスクリプトと呼ばれるものがあります.これは、両方のJSとTSをサポートし、またAstro.props コンポーネントの小道具を提供するオブジェクトです.レイアウトの場合、それはMarkdownページFrontMatterで定義された値を提供します.以下に例を示します:
title: My Astro Post
date: 2022-06-01T13:00:00

const { content } = Astro.props;
const { title, date } = content;
console.log(title); // "My Astro Post"
console.log(date); // "2022-06-01T13:00:00"
フロントエンドスクリプト内で定義された変数は、レイアウトテンプレートで使用できます.
第二に、ある<title> 定数の代わりに式を含むタグ.内部レイアウトでは、任意のJSを実行することができます.この例では、フロントエンドで定義された変数の値を「印刷」しますtitle ), それで、Astroは効果的にページタイトルを与えます.
最後に<slot /> タグ.レイアウトのコンテキストでは、スロットが基になるマークダウンページのコンテンツへのアクセスを提供します.簡単に言えば、レイアウトのどの部分にもスロットタグを挿入すると、その場所にMarkdownページがHTMLとして表示されます.

最初の投稿


今私たちのポストのレイアウトを持って、我々はそれらを作成を開始することができます.まず最初に作りましょう.
mkdir src/pages/post
touch src/pages/post/first-post.md
内部first-post.md 投稿内容になります.
---
title: My first post
layout: ../../layouts/post.astro
---

# My first post

This is my first Astro post.
第一に、フロントエンドのポストメタデータを定義します.ここでページレイアウトも指定します.
次に、投稿コンテンツ自体をMarkdownを使用して説明します.
あなたが開くならば‌http://localhost:3000/post/first-post , あなたのページライブを見ることができます!あなたのページには、あなたのレイアウトがうまく適用されたことを意味する(ブラウザタブに示すように)タイトルがあります.
あなたは少し練習することができますし、最初の1つをコピーしていくつかの変更を追加することにより、2番目と3番目のページを作成します.一度保存すると、彼らはあなたのブラウザで利用可能になります.

Note: Astro has file-based routing. What that means is that the way that your pages are organized inside the pages directory will translate into relative URL paths of the generated site. For example, a page that is located at src/pages/post/first-post.md will have a /post/first-post URL.


すべてのポストのリストを加える


現在、我々のサイトのページを開く唯一の方法は、その正確なURLをペーストすることです.ありがたいことに、我々はそれを修正することができます.我々は、我々のインデックスページにすべてのポストのリストを加えます.
内部index.astro , フロントエンドスクリプトを次のコンテンツで作成します.
const posts = Astro.fetchContent('./post/*.md');
次に、テンプレートの内側に次のように追加します<h1> タグ
<ul>
    {posts.map((post) => (
        <li>
            <a href={post.url}>{post.title}</a>
        </li>
    ))}
</ul>
ここでは、我々は使用しているJSX templating 対応するブログ記事を指すリンクのリストを作成する.
今すぐあなたindex.astro 以下のようになります.
---
const posts = Astro.fetchContent('./post/*.md');
---

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Blog</title>
    </head>
    <body>
        <main>
            <h1>Hello, Astro!</h1>
            <ul>
                {posts.map((post) => (
                    <li>
                        <a href={post.url}>{post.title}</a>
                    </li>
                ))}
            </ul>
        </main>
    </body>
</html>
あなたが開くならばhttp://localhost:3000 今、あなたの最初の投稿を指すリンクを参照してください.として、より多くの投稿を作成すると、自動的にリストに追加されます.

敷地の建設


これまでのところ、DEVモードでは、コンテンツを動的に提供しています.これは開発に適していますが、生産に当社のサイトを使用するには、我々はそれを構築する必要があります.リポジトリの中でnpm run build あなたのサイトとnpx http-server dist 仕える.これは、展開する直前にサイトをプレビューするのに役立ちますが、一般的に、あなたのサイトで作業中にDevモードを使用します.

展開


展開はあなたのサイトをインターネット上で公開するプロセスです.ホスティングプロバイダを使用する方が便利ですが、自分のサイトをセルフホストできます.
展開のプロセスが多くの人気の静的なサイトホスティングサービスに類似しているので、私はNetLifyを例として使います.
NetLifyであなたのサイトを展開する最も簡単な方法はDrop . 単にあなたのサイトを構築し、ドラッグアンドドロップで出力フォルダを更新します.Netlifyあなたに公共のリンクを与える.おめでとう、あなたはちょうどあなたのサイトを展開しました!
ドロップは有用ですが、それは非常に制限されます.たとえば、あなたのサイトを更新する場合は変更を行うたびにビルドアーティファクトをアップロードする必要があります.また、カスタムドメイン、HTTPS、prerendering、および他の多くの機能をサポートしていません.すべてを使用するには、NetLifyサイトを作成する必要があります.
まず、Gitプロバイダを使ってリポジトリを作成する必要があります.サイトのソースコードを公開したくない場合は、プライベートリポジトリを作成できます.
次に、NetLifyサイトを作成し、Gitリポジトリを接続する必要があります.セットアップ中npm run build ビルドコマンドとdist 発行ディレクトリとして.
一旦Netlifyが構築を終えるならば、あなたはあなたのサイトにアクセスすることができなければなりません.リンクを持つ誰でも今それを見ることができます!そこから、カスタムドメインを追加するには、SSLを有効にするリダイレクトルールを作成し、はるかに.
そしてそれです.私たちは何もないからAstroによって構築されたブログとNetlify(または他のホスティング)によって展開された.私たちはここにシンプルさの側面に不可欠な宇宙の概念に焦点を当てた.将来のポストでは、我々はより高度なものを見ていきます.
MFCデュアルバッファによる画像フリッカの解決
React フック: useContext()