Astroでの記事の書き方

Astroは、ブログに表示記事の作成と管理をシンプルで効率的にする強力なコンテンツ管理システムを提供します。本ガイドでは、Astroプロジェクトで記事を作成して公開する方法を詳しく説明します。

記事ファイル構造

保存場所

すべての記事はsrc/content/blog/ディレクトリに保存する必要があります。Astroはこのディレクトリ内のMarkdownファイルを自動的にスキャンし、ブログ記事に変換します。

ファイル命名規則

  • ファイル名は小文字とハイフンを使う（例：my-first-post.md）
  • ファイル名が記事のURLパスになるので、意味があり簡潔にすること
  • スペースや特殊文字を避ける

Front Matter設定

各記事はFront Matterで始める必要があります。これは3つのダッシュで囲まれたYAML形式のメタデータです：

---
title: "記事のタイトル"
description: "記事の説明"
publishDate: 2025-12-26
tags: ["タグ1", "タグ2"]
image: "/path/to/image.jpg"
---

必須フィールド

title：記事のタイトル

  • 記事ページとブログに表示に表示される
  • HTMLエンティティと特殊文字をサポート

description：記事の説明

  • 記事の内容を要約，通常1〜2文
  • SEOとソーシャルメディア共有に使用

publishDate：公開日

  • 形式：YYYY-MM-DD
  • 記事の並べ替えとアーカイブに使用
  • 現在の日付より遅い公開日の記事は表示されない

オプションフィールド

tags：タグの配列

  • 記事の分類とタグクラウドに使用
  • 形式：[“タグ1”, “タグ2”, “タグ3”]
  • 省略可能，省略した場合はタグは表示されない

image：記事のカバー画像

  • 画像パスはpublic/ディレクトリからの相対パス
  • 推奨サイズ：1200x630ピクセル（ソーシャルメディア共有に最適化）
  • JPG、PNG、WebPなどのフォーマットをサポート

Markdownコンテンツの執筆

基本構文

# 見出し1
## 見出し2
### 見出し3

**太字テキスト** と __太字テキスト__
*斜体テキスト* と _斜体テキスト_
***太字斜体テキスト__

- 順序なしリスト項目1
- 順序なしリスト項目2
  - ネストされたリスト項目
  - 別のネストされた項目

1. 順序付きリスト項目1
2. 順序付きリスト項目2

[リンクテキスト](https://example.com)

![画像の説明](/path/to/image.jpg)

コードブロック

インラインコード：const variable = 'value';

コードブロック：

function greet(name) {
  console.log(`Hello, ${name}!`);
}

構文ハイライト付きのコードブロック：

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

引用とテーブル

これは引用テキストです 複数行にできます

列1列2列3
データ1データ2データ3
データ4データ5データ6

画像の処理

画像の保存場所

  • すべての静的アセットはpublic/ディレクトリに配置すること
  • public/内にサブディレクトリを作成することをお勧めします（例：public/images/blog/）

画像の参照方法

Front Matter内での場合：

image: "/images/blog/my-article-cover.jpg"

記事コンテンツ内での場合：

![画像の説明](/images/blog/my-article-image.jpg)

画像の最適化ヒント

  • よりよい圧縮率を得るためにWebPフォーマットを使用する
  • 異なるデバイスに対応するために複数の画像サイズを提供する
  • アクセシビリティ向上のため、画像に意味のあるaltテキストを追加する

記事公開プロセス

1. 記事ファイルの作成

src/content/blog/ディレクトリに新しい.mdファイルを作成する

2. Front Matterの執筆

必要なメタデータを入力する

3. 記事コンテンツの執筆

Markdown構文を使用して記事の本文を書く

4. プレビューとテスト

npm run devを実行して開発サーバーを起動し、ブラウザで記事をプレビューする

5. 記事の公開

記事はブログに表示ページに自動的に表示される、追加設定は不要

ベストプラクティス

コンテンツの整理

  • 適切な見出しレベルを含む明確な記事構造を使用する
  • 各段落は1つのポイントに焦点を当てる
  • 可読性を高めるためにリスト、テーブル、画像を使用する

SEO最適化

  • タイトルと説明に関連するキーワードを含める
  • H1、H2、H3見出しを適切に使用する
  • すべての画像に意味のあるaltテキストを追加する

コード例

  • コードの可読性を向上させるために構文ハイライトを使用する
  • 完全で実行可能なコード例を提供する
  • 複雑なコードには説明とコメントを追加する

よくある質問

Q: ブログに表示に記事が表示されません？ A: publishDateが未来の日付に設定されていないか確認してください。Astroは未来に公開予定の記事は表示しません。

Q: 画像が表示されません？ A: 画像パスが正しく、/で始まっているか確認し、画像ファイルが実際にpublic/ディレクトリに存在することを確認してください。

Q: タグをクリックしても反応がありません？ A: タグページ機能は追加の実装が必要になる場合があります。ルート設定を確認してください。

Q: 記事の作者を設定するには？ A: Front Matterにauthorフィールドを追加し、テンプレートで表示させることができます。

このガイドに従えば、Astroで専門的なブログに表示記事を簡単に作成できます。優れたコンテンツには、技術的な実装だけでなく、価値のある思考と表現が必要であることを忘れないでください。