콘텐츠로 이동

첫 번째 Astro 페이지 만들기

이제 .astro 파일이 웹 사이트의 페이지를 담당한다는 것을 알았으므로 파일을 만들 차례입니다!

이번에 배울 내용

  • 웹사이트에 두 개의 새 페이지 (정보 및 블로그)를 만듭니다.
  • 페이지에 탐색 링크를 추가합니다.
  • 업데이트된 버전의 웹사이트를 웹에 배포합니다.

새로운 .astro 파일 생성

  1. 코드 편집기의 파일 창에서 기존 파일 index.astro가 있는 src/pages/ 폴더로 이동합니다.

  2. 동일한 폴더에 about.astro라는 새 파일을 만듭니다.

  3. index.astro의 내용을 새 about.astro 파일에 복사하거나 다시 입력하세요.

    :::tip편집기에서는 이 파일의 탭 레이블에 흰색의 단색 원이 표시될 수 있습니다. 이는 파일이 아직 저장되지 않았음을 의미합니다. VS Code의 파일 메뉴에서 "Auto Save"를 활성화하면 더 이상 파일을 수동으로 저장할 필요가 없습니다.:::

  4. 주소 표시줄의 웹사이트 미리보기 URL 끝에 /about을 추가하고 페이지 로드가 보이는지 확인하세요. (예: http://localhost:4321/about)

지금은 "About" 페이지가 첫 번째 페이지와 정확히 동일하게 표시되어야 하지만 이를 변경할 예정입니다!

페이지 편집

여러분에 관한 페이지를 만들려면 HTML 콘텐츠를 편집하세요.

정보 페이지에 더 많은 콘텐츠를 변경하거나 추가하려면 콘텐츠가 포함된 HTML 요소 태그를 더 추가하세요. 기존 <body></body> 태그 사이에 아래 HTML 코드를 복사하여 붙여넣거나 직접 만들 수 있습니다.

<body>
  <h1>My Astro Site</h1>
  <h1>About Me</h1>
  <h2>... and my new Astro site!</h2>

  <p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>

  <p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
</body>

이제 브라우저 탭의 /about 페이지를 다시 방문하면 업데이트된 콘텐츠를 볼 수 있습니다.

탐색 링크 추가

모든 페이지를 더 쉽게 미리 보려면 두 페이지 (index.astro 및 about.astro) 상단의 <h1> 앞에 HTML 페이지 탐색 링크를 추가하세요.

<a href="/">Home</a>
<a href="/about/">About</a>

<h1>About Me</h1>
<h2>... and my new Astro site!</h2>

이 링크를 클릭하여 사이트의 페이지 간 앞뒤로 이동할 수 있는지 확인하세요.

:::note많은 프레임워크와 달리 Astro는 표준 HTML <a> 요소를 사용하여 전통적인 페이지 새로 고침을 통해 페이지 (routes 라고도 함) 간을 탐색합니다.:::

직접 시도해 보기 - 블로그 페이지 추가

위와 동일한 단계에 따라 세 번째 페이지인 blog.astro를 사이트에 추가하세요.

(모든 페이지에 세 번째 탐색 링크를 추가하는 것을 잊지 마세요.)

단계 표시

  1. src/pages/blog.astro에 새 파일을 만듭니다.
  2. index.astro의 전체 내용을 복사하여 blog.astro에 붙여넣습니다.
  3. 모든 페이지 상단에 세 번째 탐색 링크를 추가하세요.
<body>
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>

  <h1>My Astro Site</h1>
</body>

이제 서로 연결되는 세 개의 페이지가 있는 웹사이트가 생겼을 것입니다. 이제 블로그 페이지에 일부 콘텐츠를 추가할 차례입니다.

blog.astro의 페이지 콘텐츠를 다음과 같이 업데이트하세요.

<body>
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>

  <h1>My Astro Site</h1>
  <h1>My Astro Learning Blog</h1>
  <p>This is where I will post about my journey learning Astro.</p>
</body>

브라우저 미리보기에서 세 페이지를 모두 방문하여 전체 사이트를 미리보고 다음 사항을 확인하세요.

  • 모든 페이지는 세 페이지 모두에 올바르게 연결됩니다.
  • 두 개의 새 페이지에는 각각 고유한 제목이 있습니다.
  • 두 개의 새 페이지에는 각각 고유한 단락 텍스트가 있습니다.

변경사항을 웹에 게시

1단계의 설정을 따랐다면 Netlify를 통해 라이브 웹사이트에 변경 사항을 게시할 수 있습니다.

미리 보기 모양이 만족스러우면 GitHub의 온라인 저장소에 변경 사항을 커밋하세요.

  1. VS Code에서 GitHub에 대한 마지막 커밋 이후 변경된 파일을 미리 봅니다.

    • 왼쪽 메뉴의 Source Control 탭으로 이동합니다. 작은 "3"이 표시되어야 합니다.

    • index.astro, about.astro, blog.astro가 변경된 파일로 나열되어 있는 것을 볼 수 있습니다.

  2. 텍스트 상자에 커밋 메시지 (예: "두 개의 새 페이지 추가 - 정보 및 블로그")를 입력하고 Ctrl + Enter (macOS: Cmd ⌘ + Enter)를 눌러 변경 사항을 현재 작업 공간에 커밋합니다.

  3. GitHub의 Sync Changes 버튼을 클릭하세요.

  4. 몇 분 정도 기다린 후 Netlify URL을 방문하여 변경 사항이 실시간으로 게시되었는지 확인하세요.

:::tip[정기적으로 커밋 및 배포]작업을 일시 중지할 때마다 다음 단계를 따르세요! 변경 사항은 GitHub 저장소에 업데이트됩니다. Netlify 웹사이트에 배포한 경우 재빌드되어 다시 게시됩니다.:::

체크리스트

추가 자료

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