콘텐츠로 이동

첫 번째 Markdown 블로그 게시물 작성

이제 .astro 파일을 사용하여 페이지를 만들었으므로 .md 파일을 사용하여 블로그 게시물을 작성할 차례입니다!

이번에 배울 내용

  • 새 폴더를 만들고 새 게시물 작성
  • Markdown 콘텐츠 작성
  • 블로그 페이지의 블로그 게시물에 대한 링크

첫 번째 .md 파일 만들기

  1. src/pages/posts/에 새 디렉터리를 만듭니다.

  2. 새 /posts/ 폴더 안에 새 (빈) post-1.md 파일을 추가하세요.

  3. 기존 미리보기 URL 끝에 /posts/post-1을 추가하여 브라우저 미리보기에서 이 페이지를 찾으세요. (예: http://localhost:4321/posts/post-1)

  4. 대신 /posts/post-2를 보려면 브라우저 미리보기 URL을 변경하세요. (아직 생성하지 않은 페이지입니다.)

    "빈" 페이지를 미리 볼 때와 존재하지 않는 페이지를 미리 볼 때 다른 출력이 표시됩니다. 이는 향후 문제를 해결하는 데 도움이 될 것입니다.

Markdown 콘텐츠 작성

  1. post-1.md에 다음 코드를 복사하거나 입력하세요.

    ---
title: 'My First Blog Post'
pubDate: 2022-07-01
description: 'This is the first post of my new Astro blog.'
author: 'Astro Learner'
image:
    url: 'https://docs.astro.build/assets/rose.webp'
    alt: 'The Astro logo on a dark background with a pink glow.'
tags: ["astro", "blogging", "learning in public"]
---
# My First Blog Post

Published on: 2022-07-01

Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.

## What I've accomplished

1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.

2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.

3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!

## What's next

I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.

  2. http://localhost:4321/posts/post-1에서 브라우저 미리보기를 다시 확인하세요. 이제 이 페이지의 콘텐츠를 볼 수 있습니다. 아직 형식이 제대로 지정되지 않았을 수 있지만 걱정하지 마세요. 나중에 튜토리얼에서 업데이트할 예정입니다!

  3. 브라우저의 개발자 도구를 사용하여 이 페이지를 검사하세요. HTML 요소를 입력하지 않았더라도 Markdown이 HTML로 변환되었습니다. 제목, 단락, 목록 항목 등의 요소를 볼 수 있습니다.

:::note코드 펜스 내부의 파일 상단에 있는 정보를 프런트매터라고 합니다. 태그와 게시물 이미지를 포함한 이 데이터는 Astro가 사용할 수 있는 게시물 에 관한 정보입니다. 페이지에 자동으로 표시되지는 않지만 나중에 사이트를 개선하기 위해 튜토리얼에서 액세스하게 됩니다.:::

게시물 링크

  1. src/pages/blog.astro에 앵커 태그가 있는 첫 번째 게시물에 링크하세요.

    ---
---
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>

    <h1>My Astro Learning Blog</h1>
    <p>This is where I will post about my journey learning Astro.</p>
    <ul>
      <li><a href="/posts/post-1/">Post 1</a></li>
    </ul>
  </body>
</html>

  2. 이제 src/pages/posts/에 post-2.md와 post-3.md라는 두 개의 파일을 더 추가합니다. 다음은 파일에 복사하여 붙여넣거나 직접 만들 수 있는 몇 가지 샘플 코드입니다!

    ---
title: My Second Blog Post
author: Astro Learner
description: "After learning some Astro, I couldn't stop!"
image: 
    url: "https://docs.astro.build/assets/arc.webp"
    alt: "The Astro logo on a dark background with a purple gradient arc."
pubDate: 2022-07-08
tags: ["astro", "blogging", "learning in public", "successes"]
---
After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory!
    ---
title: My Third Blog Post
author: Astro Learner
description: "I had some challenges, but asking in the community really helped!"
image: 
    url: "https://docs.astro.build/assets/rays.webp"
    alt: "The Astro logo on a dark background with rainbow rays."
pubDate: 2022-07-15
tags: ["astro", "learning in public", "setbacks", "community"]
---
It wasn't always smooth sailing, but I'm enjoying building with Astro. And, the [Discord community](https://astro.build/chat) is really friendly and helpful!

  3. 다음 새 게시물에 대한 링크를 추가하세요.

    ---
---
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>

    <h1>My Astro Learning Blog</h1>
    <p>This is where I will post about my journey learning Astro.</p>
    <ul>
      <li><a href="/posts/post-1/">Post 1</a></li>
      <li><a href="/posts/post-2/">Post 2</a></li>
      <li><a href="/posts/post-3/">Post 3</a></li>
    </ul>
  </body>
</html>

  4. 브라우저 미리보기를 확인하고 다음 사항을 확인하세요.

    게시물 1, 게시물 2, 게시물 3에 대한 모든 링크는 사이트에서 작동하는 페이지로 연결됩니다. (실수를 발견했다면 blog.astro에 있는 링크나 Markdown 파일 이름을 확인하세요.)

지식을 테스트해보세요

  1. Markdown (.md) 파일의 콘텐츠는 다음으로 변환됩니다.

체크리스트

참고 자료

기여하기 커뮤니티 후원하기