Astro로 초음속으로 웹사이트를 구축하는 방법.

4365 단어 javascriptwebdevtutorialbeginners
Astro은 블로그, 포트폴리오 또는 문서 사이트와 같은 콘텐츠 중심 웹 사이트를 구축하기 위한 새롭고 인기 있는 프레임워크입니다.

Hugo , Gatsby 또는 11ty 과 같은 도구와 유사한 틈새를 채우지만 몇 가지 고유한 기능으로 차별화됩니다.
  • Astro Islands: 정적인 페이지의 대화형 UI 구성 요소
  • 프런트엔드 프레임워크 선택: React, Vue, Svelte 등 사용

    • WSL을 사용하여 Windows에서 설정해 봅시다!

    This tutorial assumes you have WSL, npm, and VSCode set up.



    설정


    WSL 환경에 들어가서 다음 명령을 실행하여 Astro 프로젝트의 디렉터리를 초기화합니다.

    npm create astro@latest




    먼저 프로젝트 디렉터리의 이름을 지정해야 합니다. 이 자습서에서는 기본값을 사용합니다.

    그런 다음 템플릿을 선택합니다. 권장되는 선택인 "기본 사항만"을 선택하겠습니다.

    종속성을 설치하라는 메시지가 표시되면 Enter를 눌러 기본값인 예를 선택합니다.



    종속성 설치가 완료되면 Enter 키를 다시 눌러 프로젝트를 git 저장소로 만듭니다.

    마지막으로 TypeScript 설정 방법을 선택합니다. 권장 사항인 "Strict"를 선택합시다.



    개발 서버를 실행하여 모든 것이 의도한 대로 작동하는지 테스트해 봅시다.

    프로젝트의 디렉터리로 변경한 후 다음 명령을 실행합니다.

    npm run dev




    서버가 시작될 때까지 기다렸다가 브라우저에서 로컬 주소를 엽니다.



    dev 서버의 홈 페이지가 보이면 Astro가 완전히 설정되고 작동하는 것입니다. 이제 자체 사이트를 구축할 준비가 되었습니다.

    사이트 구축



    사이트 편집의 기본 사항을 보여주기 위해 홈페이지를 일부 변경해 보겠습니다.
    astro.index가 포함된 디렉토리로 이동합니다.

    cd src/pages


    이제 선택한 편집기에서 이 파일을 엽니다. 여기서는 WSL VSCode 과 함께 support 을 사용하고 있습니다.



    이 파일에는 많은 일이 있습니다. 내용을 최소한으로 바꾸자.

    ---
---

<html lang="en">
  <head>
    <title>My Homepage</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>


    새 사이트의 빈 캔버스를 보려면 브라우저를 Astro의 로컬 서버로 이동하십시오.



    무궁무진한 가능성, 아스트로와 함께 달을 향해 쏴보자!
    Cloud Firestore orderBy 제한: 범위에서 얻은 값과 다른 항목으로 정렬할 수 없음
    수정자 및 캡슐화 - [Java OOP #3]

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage