Static Site With Tailwind

정적 사이트(Tailwind 포함)

스택

• HTML
• 순풍

달리는 방법

개발

• yarn serve:dev 실행하면 index.html 진입점으로 사용하여 src 제공 됩니다.

• 두 번째 터미널에서 yarn watch 실행합니다. 그러면 src/ 내부의 모든 파일을 감시하고 그 과정에서 추가된 새로운 tailwind 스타일로 app.css 다시 컴파일하는 방법을 알게 됩니다.

참고: 새로 고침을 누르기 전에 약간의 지연이 있습니다... "이봐, 이건 멋진 React 앱 KISS가 아니고 그냥 새로 고침 버튼을 누르기만 하면 됩니다."

• yarn compile:css:dev 실행을 확인하지 않고 dev 용 Tailwind CSS를 수동으로 컴파일하려면

생산을 위한 건물

그래서 당신은 실제로 이것을 배포하고 싶습니다 ...

• "모든 작업"을 수행하려면 yarn build:all 실행하세요. 그러면 모든 *.html 파일이 /build 디렉터리에 복사되고 NODE_ENV=production 으로 app.css 컴파일됩니다. 이는 Tailwind가 tailwind.config.js의 사전 설정된 purge 옵션을 사용하도록 지시합니다.

• 이 /build 디렉토리를 정적 호스팅 사이트에 복사하세요. 또는 정적 호스팅 사이트에 /build/index.html 진입점으로 사용하도록 지시하세요.

참고: 빌드 후에는 이 빌드를 로컬로 제공하여 "prod"가 어떤 모습인지 확인하기 위해 yarn serve:prod 실행하면 됩니다. 그러면 새로 컴파일된 코드를 보기 위해 src 대신 build 디렉터리가 제공됩니다.

라우팅

새 페이지에 대한 깨끗한 URL을 어떻게 만듭니까? routes 정의된 vercel.json 파일을 추가하고 나머지는 Vercel이 처리하도록 하세요.

 {
  "version": 2,
  "routes": [
    {"src": "/about", "dest": "/about.html"}
  ]
}

자세한 내용은 여기에서 해당 문서를 확인하세요.

그게 다야

그게 다입니다... 정적 HTML을 삽입하고 index.css 연결하고 재미있게 즐겨보세요.

Vercel을 통한 호스팅

Repo와 설정 연결

배포 미리보기

완료!