コンテンツにスキップ

初めてのMarkdownによるブログ記事

.astroファイルを使ってページを作成したので、続いて.mdファイルを使ってブログ記事を作成しましょう！

ここで学ぶことは...

  • 新しいフォルダを作成し、新しい記事を作成する
  • Markdownコンテンツを書く
  • ブログページにブログ記事へのリンクを作成する

最初の.mdファイルを作成する

  1. src/pages/posts/に新しいディレクトリを作成します。

  2. post-1.mdという新しい（空の）ファイルを/posts/フォルダに追加します。

  3. プレビュー用URLの末尾に/posts/post-1を追加して、このページをブラウザで確認します。（たとえばhttp://localhost:4321/posts/post-1）

  4. ブラウザのプレビュー用URLを変更して、代わりに/posts/post-2を表示します。（これはまだ作成していないページです。）

    「空の」ページと存在しないページのプレビューにおいて、出力が異なることに注意してください。これは将来のトラブルシューティングに役立ちます。

Markdownコンテンツを書く

  1. post-1.mdに以下のコードをコピーまたは入力します。

    ---
title: '私の最初のブログ記事'
pubDate: 2022-07-01
description: 'これは私の新しいAstroブログの最初の記事です。'
author: 'Astro学習者'
image:
    url: 'https://docs.astro.build/assets/rose.webp'
    alt: 'ピンク色に輝く暗い背景に浮かぶAstroのロゴ。'
tags: ["astro", "ブログ", "公開学習"]
---
# 私の最初のブログ記事

投稿日: 2022-07-01

Astroの学習についての私の _新しいブログ_ へようこそ！ここでは、新しいウェブサイトを作りながら、私の学習過程を共有します。

## 達成したこと

1. **Astroのインストール**: まず、新しいAstroプロジェクトを作成し、オンラインアカウントを設定しました。

2. **ページの作成**: 次に、新しい`.astro`ファイルを作成し、それを`src/pages/`フォルダに配置することで、ページを作成する方法を学びました。

3. **ブログ記事の作成**: これが私の最初のブログ記事です！AstroページとMarkdownの記事があります！

## 次の目標

Astroチュートリアルを終え、さらに記事を追加していきます。これからもこの場所をご覧ください。

  2. http://localhost:4321/posts/post-1でブラウザのプレビューを再度確認します。今度はこのページにコンテンツが表示されるはずです。まだ適切な書式になっていないかもしれませんが、ご心配なく。このチュートリアルの後半で更新します！

  3. ブラウザの開発者ツールを使用して、このページを検査します。HTML要素を何も入力していないにもかかわらず、MarkdownがHTMLに変換されていることに注意してください。見出し、段落、リスト項目などの要素が表示されます。

:::noteファイルの上部、コードフェンスの内側にある情報は、フロントマターと呼ばれます。タグや記事画像などを含むこのデータは、Astroが使用可能な記事に関する情報です。自動的にページに表示されるわけではありませんが、チュートリアルの後半でサイトを改良するために使用します。:::

ブログ記事へのリンクを作成する

  1. src/pages/blog.astroにアンカータグを追加して、最初の記事にリンクします。

    ---
---
<html lang="ja">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">ホーム</a>
    <a href="/about/">概要</a>
    <a href="/blog/">ブログ</a>

    <h1>私のAstro学習ブログ</h1>
    <p>ここには、私がAstroを学んでいく旅の様子を投稿します。</p>
    <ul>
      <li><a href="/posts/post-1/">記事1</a></li>
    </ul>
  </body>
</html>

  2. src/pages/posts/に、post-2.mdとpost-3.mdという2つのファイルを追加します。以下はコピー＆ペースト可能なサンプルコードですが、独自の内容を作成しても構いません。

    ---
title: 私の2番目のブログ記事
author: Astro学習者
description: "Astroを少し学んだら、止まらなくなりました！"
image: 
    url: "https://docs.astro.build/assets/arc.webp"
    alt: "紫色のグラデーションの弧が描かれた暗い背景に浮かぶAstroのロゴ。"
pubDate: 2022-07-08
tags: ["astro", "ブログ", "公開学習", "成功"]
---
Astroを学習し始めて最初の1週間が上手くいったので、もう少し試してみることにしました。小さなコンポーネントを書いてメモリーからインポートしました！
    ---
title: 私の3番目のブログ記事
author: Astro学習者
description: "上手くいかないことがありましたが、コミュニティに質問して助けてもらいました！"
image: 
    url: "https://docs.astro.build/assets/rays.webp"
    alt: "虹色の光線が描かれた暗い背景に浮かぶAstroのロゴ。"
pubDate: 2022-07-15
tags: ["astro", "公開学習", "後退", "コミュニティ"]
---
すべてがスムーズにいくわけではありませんでしたが、Astroで何かを作るのは楽しいです。そして、[Discordコミュニティ](https://astro.build/chat)は本当にフレンドリーで助けになります！

  3. 新しい記事へのリンクを追加します。

    ---
---
<html lang="ja">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">ホーム</a>
    <a href="/about/">概要</a>
    <a href="/blog/">ブログ</a>

    <h1>私のAstro学習ブログ</h1>
    <p>ここには、私がAstroを学んでいく旅の様子を投稿します。</p>
    <ul>
      <li><a href="/posts/post-1/">記事1</a></li>
      <li><a href="/posts/post-2/">記事2</a></li>
      <li><a href="/posts/post-3/">記事3</a></li>
    </ul>
  </body>
</html>

  4. ブラウザのプレビューを確認して、以下のことを確認します。

    記事1、記事2、記事3へのすべてのリンクが、サイト上の動作するページへとつながっている。（もし間違いを見つけたら、blog.astroのリンクかMarkdownファイル名を確認してください。）

確認テスト

  1. Markdown（.md）ファイル内のコンテンツが変換されるのはどれですか？

チェックリスト

参考

貢献する コミュニティ スポンサー