コンテンツにスキップ
v5-beta

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

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

ここで学ぶことは…

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

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

セクションタイトル： 最初の.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コンテンツを書く

セクションタイトル： Markdownコンテンツを書く

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

    src/pages/posts/post-1.md
    ---
    title: '私の最初のブログ記事'
    pubDate: 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チュートリアルを終え、さらに記事を追加していきます。これからもこの場所をご覧ください。

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

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

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

セクションタイトル： ブログ記事へのリンクを作成する

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

    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つのファイルを追加します。以下はコピー＆ペースト可能なサンプルコードですが、独自の内容を作成しても構いません。

    src/pages/posts/post-2.md
    ---
    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週間が上手くいったので、もう少し試してみることにしました。小さなコンポーネントを書いてメモリーからインポートしました！
    src/pages/posts/post-3.md
    ---
    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. 新しい記事へのリンクを追加します。

    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>
          <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）ファイル内のコンテンツが変換されるのはどれですか？

チェックリスト

セクションタイトル： チェックリスト

参考

セクションタイトル： 参考
貢献する

どんなことを？

GitHub Issueを作成

チームに素早く問題を報告できます。

コミュニティ