stablo

Modelo de blog Stablo - Next.js & Sanity CMS

O Stablo é um modelo de blog Jamstack criado com o Next.js, CSS e Sanity CMS da Web3Templates. Ele vem com versão gratuita e pro.

Instalação ↓

Demoção ao vivo

Demoção de versão gratuita →

Demoção de versão profissional →

Características

Recurso	Versão gratuita	Versão pro
Next.js v13	✅	✅
/diretório de aplicativos	✅	✅
Tailwind CSS	✅	✅
Sanidade CMS (V3)	✅	✅
Reavalidação sob demanda		✅
Atualização automática de novas postagens	Baseado no tempo	✅
Mobile Responsive	✅	✅
Modo escuro e claro	✅	✅
Página de contato de trabalho	✅	✅
Arquivo (paginação)	✅	✅
Páginas de categoria		✅
Páginas de autor		✅
Página de pesquisa		✅
Página inicial - Padrão	✅	✅
Página inicial - Alternativa		✅
Página inicial - mínima		✅
Página inicial - Lifestlye		✅
Página inicial - duas colunas		✅
Postagem do blog - Padrão	✅	✅
Postagem do blog - mínimo		✅
Postagem do blog - Lifestlye		✅
Postagem do blog - com barra lateral		✅
Apoio de 6 meses		✅
Atualizações grátis	✅	✅
Licença	GPL-2.0	Comercial
Preço	Livre	$ 49
	Implantar gratuitamente	Compra pro

Clique no botão acima para um clique com um clique e implante para este modelo. Leia o guia de início rápido abaixo.

Visualização de modelos

Visualização do Sanity CMS

Instalação

Etapa 1: Implante no vercel

Use o botão de implantação abaixo. Ele permitirá que você implante o iniciador usando o Vercel e o conecte -o ao seu estúdio de sanidade usando a integração da Sanity Vercel.

A implantação acima configurará automaticamente o seguinte:

• Crie um novo repositório no GitHub
• Crie um projeto de sanidade
• Instale a integração de sanidade em vercel
• Adicione as configurações de CORS e API necessárias no projeto
• Implantar front -end para vercel

Como alternativa, você pode implantar para outros serviços, como Netlify ou CloudFlare Pages ou AWS amplify.

Etapa 2: configure o projeto localmente.

Depois de implantar o site, ele ficará vazio ou não configurado corretamente. Isso é esperado. Precisamos dar mais algumas etapas para fazê -lo como visto na demonstração.

Primeiro, clone o vercel do repositório do GitHub criado em sua máquina local. Use a seguinte estrutura de comando. Verifique se o terminal está na pasta correta antes de executar este comando.

git clone https://github.com/ < usename > / < repo > .git your-project-name

Depois de clonado, execute o seguinte comando no diretório raiz do projeto. Isso vinculará seu projeto de vercel.

npx vercel link

Agora, execute o seguinte comando para puxar as variáveis .env para o seu sistema local.

npx vercel env pull

Agora você pode ver que um novo arquivo .env.local foi criado. Se isso não funcionar, você também pode renomear o .env.local.example a .env.local e adicionar o ID do projeto de sanidade manualmente.

Agora, você pode abrir seu editor de código (se ainda não), preferimos o VSCode. O comando execute o comando no terminal integrado dentro do editor de código.

npm install
# or
yarn install
# or
pnpm install

Preferimos pnpm para salvar seu espaço em disco.

Etapa 3: Importar dados de demonstração (opcional)

Para se parecer com o que você viu na demonstração, com todo o conteúdo e imagens, siga as etapas abaixo:

1. Se você não instalou @sanity/cli instale -o globalmente primeiro.

npm install -g @sanity/cli
# or
pnpm install -g @sanity/cli

Em seguida, faça login na sanidade usando o comando sanity login

 sanity login

Agora, você poderá importar conteúdo de demonstração executando o comando sanity-import . Os arquivos estão localizados em /lib/sanity/data/production.tar.gz e serão carregados automaticamente executando o comando abaixo.

npm run sanity-import
# or
pnpm sanity-import

Etapa 4: termine!

Agora, execute seu projeto usando o comando abaixo.

npm run dev
# or
pnpm dev

Agora, seu projeto deve estar em alta e o próximo.js frontend estará em execução no http: // localhost: 3000.

O Sanity Studio pode ser acessado usando http: // localhost: 3000/studio ou você pode executá -lo em um servidor HTTPS: // localhost separado: 3333 Usando o seguinte comando.

npm run sanity
# or
pnpm sanity

Etapa 5. Redlaph

Depois que todas as alterações acima forem feitas, reimplante para o Vercel mais uma vez para ver todas as suas alterações na produção.

Você pode git push as alterações e ele deve acionar automaticamente uma nova implantação. Caso contrário, você também pode implantar para o Vercel usando o seguinte comando.

 npx vercel --prod

Instalação manual

Recomendamos que você use a opção de implantação de um clique acima. Por alguma razão, se você não puder, use as etapas a seguir para instalá -lo manualmente.

Etapa 1. Clone o repo

Clone o repositório do Github ou use os arquivos baixados em sua máquina local.

Etapa 2. Variáveis de configuração .env .

Abra a pasta do projeto e renomeie .env.local.example colocado na pasta raiz em .env.local e adicione seu ID do projeto de sanidade. Você pode criar um novo projeto visitando este link: https://www.sanity.io/get-started/create-project

Se você já possui um projeto, copie o ID do projeto de https://sanity.io/manage

 NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz

Etapa 3. Permita origens do CORS

Para fazer o estúdio funcionar corretamente, você deve adicionar origem do CORS na sanidade. Isso geralmente é configurado automaticamente se você estiver usando a implantação do Vercel. Visite https://www.sanity.io/manage/personal/project/<project-id>/api no navegador para adicionar origem do CORS.

Clique em Add CORS origin e insira o URL como http://localhost:3000 e verifique a caixa de seleção Permitir credenciais.

Etapa 4 Continue das etapas acima

Agora, você poderá continuar com as instruções acima para importar os dados de demonstração e executar o projeto localmente.

Ajuda e apoio

Algo não está funcionando como esperado? Levantar um problema do Github. Se você precisar de suporte ou ajuda personalizada, considere comprar a versão Pro e o ajudaremos por e -mail.

Patrocinador