이것은 https://jamstack.org의 저장소입니다.
이 아키텍처 모델에 대해 학습하기 위한 진입점입니다. 도구, 팁, 예제 및 기사를 공유하여 Jamstack이 무엇인지 배울 수 있는 곳입니다. 이곳은 지역 커뮤니티 모임을 찾거나 모임을 시작하는 데 도움을 구할 수 있는 장소이기도 합니다.
우리는 Jamstack에 관한 일련의 비디오, 프리젠테이션, 기사 및 기타 학습 리소스를 수집했습니다. 해당 리소스 풀에 콘텐츠를 제공할 수 있습니다!
우리는 풀 요청으로 제출된 기여를 수락합니다.
리소스에 대한 링크를 제공하려면:
src/site/resources
폴더에 새 md 파일을 만듭니다. 아래 표시된 구조에 따라 해당 파일을 채웁니다.src/site/img/cms
폴더에 선택적 썸네일 이미지를 추가하세요. (이미지는 너비 600px, 높이 400px의 JPEG여야 합니다.)리소스 MD 참조:
---
title : Resource title
date : Publish date (YYYY-MM-DD)
link : the URL of this resource
thumbnailurl : /img/cms/resources/resource-thumbnail.jpg
type :
- article (Help us group and sort the resources by type article|video|presentation)
---
끌어오기 요청을 제출하기 전이나 코드 또는 콘텐츠 변경 사항을 제안/기여하는 경우 로컬 빌드에서 변경 사항을 미리 보는 것이 좋습니다. 우리는 로컬 빌드를 실행하는 프로세스를 가능한 한 낮게 만들려고 노력했습니다.
# Clone this repository to your local environment
git clone [email protected]:jamstack/jamstack.org.git
# move in to your local site folder
cd jamstack.org
# install the dependencies
npm install
# run the build and dev server locally
npm start
이 사이트는 TailwindCSS를 사용하여 유틸리티 CSS 클래스를 제공하고 사이트 스타일을 지정하는 빠른 수단을 제공합니다. 이는 추가 CSS를 작성하지 않고도 대부분의 스타일링을 수행할 수 있음을 의미합니다. 대신 유틸리티 클래스를 HTML에 직접 추가할 수 있습니다. 이는 매우 빠른 개발을 제공할 수 있으며 이러한 방식으로 작업하는 데 익숙한 사람들에게 놀라운 수준의 친숙함을 제공할 수 있습니다(규칙과 클래스가 사이트별로 적용되지 않기 때문).
로컬에서 실행/개발하는 동안 npm run start
명령은 Tailwind의 CSS 파이프라인을 포함하는 사이트를 생성합니다.
반복 클래스 또는 전역 클래스의 효율성을 위해 소수의 맞춤형 CSS 규칙이 제공됩니다. 이는 src/css/tailwind.css
에 있지만 대부분의 스타일 지정은 Tailwind의 유틸리티 클래스를 통해 HTML에서 이루어지므로 자제해서 사용해야 합니다.
프로덕션 빌드 중에 CSS 파이프라인에는 사용되지 않은 모든 CSS 문을 제거하고 결과 CSS를 압축하는 단계가 포함됩니다. 개발 효율성을 위해 이 단계는 npm run start
명령을 통한 로컬 개발 중에는 수행되지 않습니다. 다음 명령을 실행하여 최적화된 프로덕션 빌드를 미리 볼 수 있습니다.
# Run a production build
npm run build
# Serve the build locally
npm run start
아래 버튼을 클릭하면 이 저장소를 복제하고 자체 테스트 사이트로 부트스트랩할 수 있으며 Netlify의 CI/CD 빌드 파이프라인을 완료할 수 있습니다. (무료 GitHub 및 Netlify 계정 필요)