コンテンツにスキップ

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

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

ここで学ぶことは…

  • 新しいフォルダを作成し、新しい記事を作成する
  • Markdownコンテンツを書く
  • ブログページにブログ記事へのリンクを作成する
  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を表示します。(これはまだ作成していないページです。)

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

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