stablo
v3.0.0
Stablo es una plantilla de blog de Jamstack construida con Next.js, Tailwind CSS y Sanity CMS por Web3Templates. Viene con versión gratuita y profesional.
Demostración de versión gratuita →
Demostración de versión profesional →
| Característica | Versión gratuita | Versión profesional |
|---|---|---|
| Next.js v13 | ✅ | ✅ |
| /Directorio de aplicaciones | ✅ | ✅ |
| CSS de viento de cola | ✅ | ✅ |
| CMS de cordura (V3) | ✅ | ✅ |
| Revalidación a pedido | ✅ | |
| Nuevas publicaciones automáticas actualizadas | Basado en el tiempo | ✅ |
| Receptivo a los dispositivos móviles | ✅ | ✅ |
| Modo oscuro y ligero | ✅ | ✅ |
| Página de contacto laboral | ✅ | ✅ |
| Archivo (paginación) | ✅ | ✅ |
| Páginas de categoría | ✅ | |
| Páginas de autor | ✅ | |
| Página de búsqueda | ✅ | |
| Página de inicio - Valor predeterminado | ✅ | ✅ |
| Página de inicio - Alternativa | ✅ | |
| Página de inicio - mínimo | ✅ | |
| Página de inicio - Lifestlye | ✅ | |
| Página de inicio: dos columnas | ✅ | |
| Publicación de blog: predeterminado | ✅ | ✅ |
| Publicación de blog - Mínimo | ✅ | |
| Publicación de blog - Lifestlye | ✅ | |
| Publicación de blog - con barra lateral | ✅ | |
| Soporte de 6 meses | ✅ | |
| Actualizaciones gratuitas | ✅ | ✅ |
| Licencia | GPL-2.0 | Comercial |
| Fijación de precios | Gratis | $ 49 |
| Desplegar gratis | Compra Pro |
Use el botón de implementación a continuación. Le permitirá implementar el arranque usando Vercel, así como conectarlo a su estudio de cordura utilizando la integración de la cordura.
La implementación anterior configurará automáticamente lo siguiente:
Alternativamente, puede implementar en otros servicios como Netlify o Cloudflare Pages o AWS Amplify.
Una vez que haya implementado el sitio web, se verá vacío o no configurado correctamente. Esto se espera. Necesitamos hacer algunos pasos más para hacerlo como se ve en la demostración.
Primero, clone el Vercel de repositorio de GitHub creado en su máquina local. Use la siguiente estructura de comando. Asegúrese de que el terminal esté en la carpeta correcta antes de ejecutar este comando.
git clone https://github.com/ < usename > / < repo > .git your-project-nameUna vez clonado, ejecute el siguiente comando desde el directorio raíz del proyecto. Esto vinculará su proyecto Vercel.
npx vercel link Ahora, ejecute el siguiente comando para extraer las variables .env a su sistema local.
npx vercel env pull Ahora puede ver que se ha creado un nuevo archivo .env.local . Si esto no funciona, también puede cambiar el nombre de .env.local.example a .env.local y agregar la identificación del proyecto de cordura manualmente.
Ahora, puede abrir su editor de códigos (si no es aún), preferimos VScode. Ejecutar el comando en el terminal integrado dentro del editor de códigos.
npm install
# or
yarn install
# or
pnpm install Preferimos pnpm para guardar su espacio en disco.
Para parecerse a lo que ha visto en la demostración, con todo el contenido e imágenes, siga los pasos a continuación:
@sanity/cli instálelo a nivel mundial primero. npm install -g @sanity/cli
# or
pnpm install -g @sanity/cli Luego inicie sesión en la cordura usando el comando sanity login
sanity login
Ahora, podrá importar contenido de demostración ejecutando el comando sanity-import . Los archivos se encuentran en /lib/sanity/data/production.tar.gz y se cargarán automáticamente ejecutando el siguiente comando.
npm run sanity-import
# or
pnpm sanity-importAhora, ejecute su proyecto usando el siguiente comando.
npm run dev
# or
pnpm devAhora su proyecto debería estar activo y el próximo.js frontend se ejecutará en http: // localhost: 3000.
Se puede acceder a Sanity Studio usando http: // localhost: 3000/studio o puede ejecutarlo en un servidor https: // localhost: 3333 utilizando el siguiente comando.
npm run sanity
# or
pnpm sanityUna vez que se realicen todos los cambios anteriores, asegúrese de volver a desplegar a Vercel una vez más para ver todos sus cambios en la producción.
Puede git push los cambios y debe activar automáticamente una nueva implementación. De lo contrario, también puede implementar en VERCEL utilizando el siguiente comando.
npx vercel --prod
Le recomendamos que use la opción de implementación de un solo clic anterior. Por alguna razón, si no puede, use los siguientes pasos para instalarlo manualmente.
Clone el repositorio de GitHub o use los archivos descargados en su máquina local.
.env Variables. Abra la carpeta del proyecto y cambie el nombre .env.local.example colocado en la carpeta raíz en .env.local y agregue su ID de proyecto de cordura. Puede crear un nuevo proyecto visitando este enlace: https://www.sanity.io/get-started/create-project
Si ya tiene un proyecto, copie la identificación del proyecto de https://sanity.io/manage
NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz
Para que el estudio funcione correctamente, debe agregar Cors Origin en la cordura. Esto generalmente se configura automáticamente si está utilizando el implementamiento VERCEL. Visite https://www.sanity.io/manage/personal/project/<project-id>/api en su navegador para agregar el origen CORS.
Haga clic en Add CORS origin e ingrese la URL como http://localhost:3000 y verifique la casilla de verificación Permitir credenciales.
Ahora, podrá continuar con las instrucciones anteriores para importar los datos de demostración y ejecutar el proyecto localmente.
¿Algo no funciona como se esperaba? Plantear un problema de GitHub. Si necesita soporte o ayuda personalizada, considere comprar la versión Pro y lo ayudaremos por correo electrónico.
