なにかお手伝いできることがあればご連絡ください。
お問い合わせはこちらから
※Googleフォームが表示されます
Astro.js覚書
2023/08/02
Astro.jsは、コアコンセプトがNo JavaScriptの静的サイトジェネレーターとして使われるJavaScriptフレームワークです。
Astro.jsは、ReactやVueなどのフロントエンドライブラリをサポートし、コンポーネントベースのアプローチを採用しています。
コーポレートサイトや、ポートフォリオページ、個人サイトなどに適しています。
ただし、SSR（サーバーサイドレンダリング)、CSR(クライアントサイトレンダリング)、SSG(静的ファイルジェネレーター)を、ページによって使い分け得ることも可能です。
準備
VSCodeを利用する場合は、公式のプラグインが便利。
プロジェクトを作成する
npm create astro@latestプロジェクトを起動。
// もし依存関係ファイルをインストールしてなければ
npm i
// ローカルサーバーを起動
npm run devhttp://localhost:3000/でローカルサーバーが起動される。
AstroサイトをVercelにデプロイする
Vercelを利用して、静的サイトまたは、SSR(サーバーサイドレンダリング)されるサイトとしてデプロイできる。
◎静的サイト
Astroプロジェクトはデフォルトで静的サイトです。静的なAstroサイトをVercelにデプロイするために追加の設定は必要ありません。
◎SSR
SSRを有効にする為に、Vercelアダプターを追加します。
以下のコマンドを実行すると、astro.config.mjsファイルへの適切な変更が1ステップで行われます。
npx astro add vercel
Astro will run the following command:
If you skip this step, you can always run it yourself later
╭──────────────────────────────╮
│ npm install @astrojs/vercel │
╰──────────────────────────────╯
✔ Continue? … yes
✔ Installing dependencies...
Astro will make the following changes to your config file:
╭ astro.config.mjs ─────────────────────────────────╮
│ import { defineConfig } from 'astro/config'; │
│ │
│ import vercel from "@astrojs/vercel/serverless"; │
│ │
│ // https://astro.build/config │
│ export default defineConfig({ │
│ output: "server", │
│ adapter: vercel() │
│ }); │
╰───────────────────────────────────────────────────╯
For complete deployment options, visit
https://docs.astro.build/en/guides/deploy/
✔ Continue? … yes
success Added the following integration to your project:
- @astrojs/vercelデプロイ方法
Vercelへのデプロイは、ウェブサイトのUIまたはVercelのCLI（コマンドラインインターフェイス）が利用できます。静的サイト、SSRサイトともに手順は同じです。
CLIを使ったデプロイ方法
// vercel cli をインストール
npm install -g vercel
// デプロイ
vercel好みでライブラリをインストール
// Reactを入れる
npx astro add react
// prettierを入れる
npm install --save-dev prettier prettier-plugin-astroastroのコンポーネントについて
astroはコンポーネントスクリプトとコンポーネントテンプレートという２つの主要な要素で構成されています。
Astroコンポーネント内のコンポーネントスクリプトを識別するためにコードフェンス（---）を使用します。
// sample.astro
---
// コンポーネントスクリプト (JavaScript)
---
<!-- コンポーネントテンプレート (HTML + JS Expressions) -->Markdownでブログを作る
Astroは、/src/pages/ディレクトリ内の.md（または対応する別の拡張子）または.mdxファイルをページとして扱います。
src/pagesにposts(任意)ディレクトリを作成する。post-1.mdファイルを作成
◎pages/posts/post-1.md
---
title: "私の最初のブログ記事"
createAt: 2022-07-01
description: "これは私の新しいAstroブログの最初の記事です。"
author: "Astro学習者"
image:
url: "https://docs.astro.build/assets/full-logo-light.png"
alt: "Astroのロゴ。"
tags: ["Astro", "ブログ", "公開学習"]
---
# 私の最初のブログ記事
投稿日: 2022-07-01
Astroの学習についての私の _新しいブログ_ へようこそ！ここでは、新しいウェブサイトを作りながら、私の学習過程を共有します。
## 達成したこと
1. **Astroのインストール**: まず、新しいAstroプロジェクトを作成し、オンラインアカウントを設定しました。
2. **ページの作成**: 次に、新しい`.astro`ファイルを作成し、それを`src/pages/`フォルダに配置することで、ページを作成する方法を学びました。
3. **ブログ記事の作成**: これが私の最初のブログ記事です！AstroページとMarkdownの記事があります！
## 次の目標
Astroチュートリアルを終え、さらに記事を追加していきます。これからもこの場所をご覧ください。http://localhost/3000/posts/post-1を開くとページが表示される。
下書きページ
draft: trueはオプションのフロントマターの値で、個々のMarkdownまたはMDXページや投稿を「非公開」としてマークできます。デフォルトでは、マークされたページは次の動作になります。
- サイトのビルド対象から外す（ページはビルドされない）
[Astro.glob()](https://docs.astro.build/ja/reference/api-reference/#astroglob)によって返される (投稿の一覧で表示されます)
---
title: ブログ記事
draft: true
---
これは、作成中のブログ記事です。
この記事のためにページは作成されません。
この記事をビルドして公開するには
- フロントマターを`draft: false`に更新する。
- または、`draft`プロパティ全体を削除してください。
しかし、このページは `Astro.glob()` にマッチするすべてのリクエストで返されます。レイアウト
レイアウトコンポーネントへの相対パスを指定できるプロパティがあります。
◎pages/posts/post-1.md
---
layout: ../../layouts/BlogDetailLayout.astro
title: Astroの概要
author: Himanshu
description: Astroの凄さを知ってください！
---
これはMarkdownで書かれた記事です。markdownの定義したプロパティはAstro.propsを通してレイアウトコンポーネントで利用できます。
◎layouts/BlogDetailLayout.astro
---
const { frontmatter } = Astro.props;
---
<html>
<head>
<title>{frontmatter.title}</title>
<meta name="description" content={frontmatter.description} />
</head><body>
<!-- ... -->
<slot />
<!-- Markdownコンテンツはここに挿入されます -->
<!-- ... -->
</body>
</html>mdxを利用する
Markdownの拡張言語である MDX を有効にすることで、コンポーネントを利用できるようになります。
npx astro add mdxコマンドを実行すると、astro.config.mjsファイルへの適切な変更が1ステップで行われます。
npx astro add mdx
✔ Resolving packages...
Astro will run the following command:
If you skip this step, you can always run it yourself later
╭───────────────────────────╮
│ npm install @astrojs/mdx │
╰───────────────────────────╯
✔ Continue? … yes
⠦ Installing dependencies...
✔ Installing dependencies...
Astro will make the following changes to your config file:
╭ astro.config.mjs ─────────────────────────────────╮
│ import { defineConfig } from 'astro/config'; │
│ import vercel from "@astrojs/vercel/serverless"; │
│ import react from "@astrojs/react"; │
│ │
│ import mdx from "@astrojs/mdx"; │
│ │
│ // https://astro.build/config │
│ export default defineConfig({ │
│ output: "server", │
│ adapter: vercel(), │
│ integrations: [react(), mdx()] │
│ }); │
╰───────────────────────────────────────────────────╯
✔ Continue? … yes
success Added the following integration to your project:
- @astrojs/mdxfrontmatterを通してプロパティのアクセスすることもできます。
---
layout: ../../layouts/BlogDetailLayout.astro
title: "私の最初のブログ記事"
createAt: 2022-07-01
description: "これは私の新しいAstroブログの最初の記事です。"
author: "Astro学習者"
image:
url: "https://docs.astro.build/assets/full-logo-light.png"
alt: "Astroのロゴ。"
tags: ["Astro", "ブログ", "公開学習"]
---
# {frontmatter.title}記事一覧を取得する
Markdownで追加した記事一覧はAstro.glob()で取得することができます。
---
const allPosts = await Astro.glob("../pages/posts/**/*.mdx");
// draft: trueは除外する
const nonDraftPosts = allPosts.filter((post) => !post.frontmatter.draft);
---
<ul>
{nonDraftPosts.map((post) => <li>{post.frontmatter.title}</li>)}
</ul>Markdown内での画像
保存先
画像の保存先がsrc配下の場合は、.astro、.mdx、その他のフレームワークのコンポーネントからの参照は可能です。
---
// `src/images/`内の画像へアクセスします。
import logo from '../images/logo.png';
---
<img src={logo} width="40" alt="Astro" />.mdファイル内ではpublicフォルダ配下に配置する必要があります。
<!-- public/assets/stars.png に保存されたローカル画像 -->
<img src="/assets/stars.png" alt="A starry night sky.">参照方法
画像を相対ファイルパスまたはimportエイリアスを利用してコンポーネントファイル内でインポートして利用します。
Astro画像インテグレーション
Astro公式の画像のインテグレーションは、最適化された画像をレンダリングするためのAstroコンポーネント<Image />と<Picture />を提供しています。
.astroと.mdxで利用できます。
npx astro add imageコマンドを実行すると、astro.config.mjsファイルへの適切な変更が1ステップで行われます。
npx astro add image---
import { Image } from '@astrojs/image/components';
import localImage from "../assets/logo.png";
const localAlt = "The Astro Logo";
---
<Image src={localImage} width={300} aspectRatio="1:1" format="png" alt={localAlt} />