stablo
v3.0.0
Stablo는 Web3templates의 Next.js, Tailwind CSS 및 Sanity CMS로 구축 된 Jamstack 블로그 템플릿입니다. 무료 및 프로 버전이 제공됩니다.
무료 버전 데모 →
프로 버전 데모 →
| 특징 | 무료 버전 | 프로 버전 |
|---|---|---|
| 다음 .js v13 | ✅ | ✅ |
| /앱 디렉토리 | ✅ | ✅ |
| 테일 윈드 CSS | ✅ | ✅ |
| Sanity CMS (v3) | ✅ | ✅ |
| 주문형 재 방문 | ✅ | |
| 자동 업데이트 새 게시물 | 시간 기반 | ✅ |
| 모바일 반응 | ✅ | ✅ |
| 다크 및 라이트 모드 | ✅ | ✅ |
| 작업 연락처 페이지 | ✅ | ✅ |
| 아카이브 (Pagination) | ✅ | ✅ |
| 카테고리 페이지 | ✅ | |
| 저자 페이지 | ✅ | |
| 검색 페이지 | ✅ | |
| 홈페이지 - 기본값 | ✅ | ✅ |
| 홈페이지 - 대체 | ✅ | |
| 홈페이지 - 최소 | ✅ | |
| 홈페이지 - 생명 | ✅ | |
| 홈페이지 - 두 열 | ✅ | |
| 블로그 게시물 - 기본값 | ✅ | ✅ |
| 블로그 게시물 - 최소 | ✅ | |
| 블로그 게시물 - Lifestlye | ✅ | |
| 블로그 게시물 - 사이드 바와 함께 | ✅ | |
| 6 개월 지원 | ✅ | |
| 무료 업데이트 | ✅ | ✅ |
| 특허 | GPL-2.0 | 광고 |
| 가격 | 무료 | $ 49 |
| 무료로 배포하십시오 | 구매 프로 |
아래 배포 버튼을 사용하십시오. Vercel을 사용하여 스타터를 배포하고 Sanity Vercel 통합을 사용하여 Sanity Studio에 연결할 수 있습니다.
위의 배포는 다음을 자동으로 구성합니다.
또는 NetLify 또는 CloudFlare 페이지 또는 AWS Amplify와 같은 다른 서비스에 배포 할 수 있습니다.
웹 사이트를 배포 한 후에는 비어 있거나 제대로 구성되지 않은 것처럼 보입니다. 이것은 예상됩니다. 데모에서 볼 수 있듯이 몇 가지 더 많은 단계를 수행해야합니다.
먼저, Github 저장소 Vercel을 로컬 컴퓨터로 복제하십시오. 다음 명령 구조를 사용하십시오. 이 명령을 실행하기 전에 터미널이 오른쪽 폴더에 있는지 확인하십시오.
git clone https://github.com/ < usename > / < repo > .git your-project-name복제되면 프로젝트의 루트 디렉토리에서 다음 명령을 실행하십시오. 이것은 Vercel 프로젝트를 연결합니다.
npx vercel link 이제 .env 변수를 로컬 시스템으로 가져 오려면 다음 명령을 실행하십시오.
npx vercel env pull 이제 새 .env.local 파일이 생성되었음을 알 수 있습니다. 이것이 작동하지 않으면 .env.local.example 을 .env.local 로 바꾸고 Sanity Project ID를 수동으로 추가 할 수도 있습니다.
이제 코드 편집기를 열 수 있습니다 (아직이 아닌 경우) VSCODE를 선호합니다. 코드 편집기 내부의 통합 터미널에서 명령을 실행합니다.
npm install
# or
yarn install
# or
pnpm install 디스크 공간을 절약하기 위해 pnpm 선호합니다.
모든 내용과 이미지와 함께 데모에서 본 것과 같이 보려면 다음 단계를 따르십시오.
@sanity/cli 설치하지 않은 경우 전역에서 먼저 설치하십시오. npm install -g @sanity/cli
# or
pnpm install -g @sanity/cli 그런 다음 sanity login 명령을 사용하여 Sanity에 로그인하십시오
sanity login
이제 sanity-import 명령을 실행하여 데모 컨텐츠를 가져올 수 있습니다. 파일은 /lib/sanity/data/production.tar.gz 에 있으며 아래 명령을 실행하여 자동으로로드됩니다.
npm run sanity-import
# or
pnpm sanity-import이제 아래 명령을 사용하여 프로젝트를 실행하십시오.
npm run dev
# or
pnpm dev이제 프로젝트가 시작되고 다음.js 프론트 엔드는 http : // localhost : 3000에서 실행됩니다.
Sanity Studio는 http : // localhost : 3000/studio를 사용하여 액세스하거나 별도의 https : // localhost : 3333 서버에서 실행할 수 있습니다.
npm run sanity
# or
pnpm sanity위의 모든 변경 사항이 이루어지면 생산의 모든 변경 사항을 보려면 다시 한 번 Vercel에 재배치하십시오.
변경 사항을 git push 수 있으며 새 배포를 자동으로 트리거해야합니다. 그렇지 않은 경우 다음 명령을 사용하여 Vercel에 배포 할 수도 있습니다.
npx vercel --prod
위의 한 클릭 배포 옵션을 사용하는 것이 좋습니다. 어떤 이유로 든 할 수없는 경우 다음 단계를 사용하여 수동으로 설치하십시오.
Github Repo를 복제하거나 로컬 컴퓨터에서 다운로드 된 파일을 사용하십시오.
.env 변수. 프로젝트 폴더를 열고 Root .env.local 에 배치 한 .env.local.example 이름 바꾸고 Sanity Project ID를 추가하십시오. 이 링크를 방문하여 새 프로젝트를 만들 수 있습니다 : https://www.sanity.io/get-started/create-project
이미 프로젝트가있는 경우 https://sanity.io/manage에서 프로젝트 ID를 복사하십시오.
NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz
스튜디오를 제대로 작동 시키려면 CORS 원점을 정신적으로 추가해야합니다. Vercel 배포를 사용하는 경우 일반적으로 자동으로 설정됩니다. 브라우저에서 https://www.sanity.io/manage/personal/project/<project-id>/api 방문하여 Cors Origin을 추가하십시오.
Add CORS origin 버튼을 클릭하고 http://localhost:3000 으로 URL을 입력하고 허용 자격 증명 확인란을 확인하십시오.
이제 위의 지침에서 데모 데이터를 가져오고 프로젝트를 로컬로 실행할 수 있도록 계속할 수 있습니다.
예상대로 작동하지 않습니까? Github 문제를 제기하십시오. 개인화 된 지원이나 도움이 필요한 경우 Pro 버전 구매를 고려해보십시오. 이메일로 도와 드리겠습니다.
