첫 번째 Astro 페이지 만들기
이제 .astro 파일이 웹 사이트의 페이지를 담당한다는 것을 알았으므로 파일을 만들 차례입니다!
요구 사항
- 웹사이트에 두 개의 새 페이지 (정보 및 블로그)를 만듭니다.
- 페이지에 탐색 링크를 추가합니다.
- 업데이트된 버전의 웹사이트를 웹에 배포합니다.
새로운 .astro 파일 생성
섹션 제목: 새로운 .astro 파일 생성-
코드 편집기의 파일 창에서 기존 파일
index.astro가 있는src/pages/폴더로 이동합니다. -
동일한 폴더에
about.astro라는 새 파일을 만듭니다. -
index.astro의 내용을 새about.astro파일에 복사하거나 다시 입력하세요. -
주소 표시줄의 웹사이트 미리보기 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>이 링크를 클릭하여 사이트의 페이지 간 앞뒤로 이동할 수 있는지 확인하세요.
직접 시도해 보기 - 블로그 페이지 추가
섹션 제목: 직접 시도해 보기 - 블로그 페이지 추가위와 동일한 단계에 따라 세 번째 페이지인 blog.astro를 사이트에 추가하세요.
(모든 페이지에 세 번째 탐색 링크를 추가하는 것을 잊지 마세요.)
단계 표시
src/pages/blog.astro에 새 파일을 만듭니다.index.astro의 전체 내용을 복사하여blog.astro에 붙여넣습니다.- 모든 페이지 상단에 세 번째 탐색 링크를 추가하세요.
<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의 온라인 저장소에 변경 사항을 커밋하세요.
-
VS Code에서 GitHub에 대한 마지막 커밋 이후 변경된 파일을 미리 봅니다.
-
왼쪽 메뉴의 Source Control 탭으로 이동합니다. 작은 “3”이 표시되어야 합니다.
-
index.astro,about.astro,blog.astro가 변경된 파일로 나열되어 있는 것을 볼 수 있습니다.
-
-
텍스트 상자에 커밋 메시지 (예: “두 개의 새 페이지 추가 - 정보 및 블로그”)를 입력하고 Ctrl + Enter (macOS: Cmd ⌘ + Enter)를 눌러 변경 사항을 현재 작업 공간에 커밋합니다.
-
GitHub의 Sync Changes 버튼을 클릭하세요.
-
몇 분 정도 기다린 후 Netlify URL을 방문하여 변경 사항이 실시간으로 게시되었는지 확인하세요.