컨텐츠로 건너뛰기

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

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

요구 사항

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

첫 번째 .md 파일 만들기

섹션 제목: 첫 번째 .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 콘텐츠 작성

섹션 제목: Markdown 콘텐츠 작성

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

    src/pages/posts/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/full-logo-light.png'
        alt: 'The full Astro logo.'
    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로 변환되었습니다. 제목, 단락, 목록 항목 등의 요소를 볼 수 있습니다.

게시물 링크

섹션 제목: 게시물 링크

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

    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라는 두 개의 파일을 더 추가합니다. 다음은 파일에 복사하여 붙여넣거나 직접 만들 수 있는 몇 가지 샘플 코드입니다!

    src/pages/posts/post-2.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: "Thumbnail of Astro arcs."
    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!
    src/pages/posts/post-3.md
    ---
    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: "Thumbnail of Astro 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. 다음 새 게시물에 대한 링크를 추가하세요.

    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>
          <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) 파일의 콘텐츠는 다음으로 변환됩니다.

체크리스트

섹션 제목: 체크리스트

참고 자료

섹션 제목: 참고 자료