stablo
v3.0.0
Stablo est un modèle de blog Jamstack construit avec Next.js, Tailwind CSS & Sanity CMS par web3Templates. Il est livré avec une version gratuite et pro.
Démo de version gratuite →
Démo de version pro →
| Fonctionnalité | Version gratuite | Version pro |
|---|---|---|
| Suivant.js v13 | ✅ | ✅ |
| / Répertoire de l'application | ✅ | ✅ |
| CSS du vent arrière | ✅ | ✅ |
| Sanity CMS (V3) | ✅ | ✅ |
| Revalidation à la demande | ✅ | |
| Auto-mise à jour de nouveaux messages | Dans le temps | ✅ |
| Mobile réactif | ✅ | ✅ |
| Mode sombre et clair | ✅ | ✅ |
| Page de contact de travail | ✅ | ✅ |
| Archive (pagination) | ✅ | ✅ |
| Pages de catégorie | ✅ | |
| Pages d'auteur | ✅ | |
| Page de recherche | ✅ | |
| Page d'accueil - par défaut | ✅ | ✅ |
| Page d'accueil - alternative | ✅ | |
| Page d'accueil - minimal | ✅ | |
| Page d'accueil - Lifestlye | ✅ | |
| Page d'accueil - deux colonnes | ✅ | |
| Article de blog - par défaut | ✅ | ✅ |
| Article de blog - minimal | ✅ | |
| Post de blog - Lifestlye | ✅ | |
| Post de blog - avec barre latérale | ✅ | |
| Soutien de 6 mois | ✅ | |
| Mises à jour gratuites | ✅ | ✅ |
| Licence | GPL-2.0 | Commercial |
| Prix | Gratuit | 49 $ |
| Déployer gratuitement | Achat pro |
Utilisez le bouton Déploier ci-dessous. Il vous permettra de déployer le démarreur à l'aide de Vercel ainsi que de le connecter à votre studio de santé mentale à l'aide de l'intégration Sanity Vercel.
Le déploiement ci-dessus configure automatiquement les éléments suivants:
Alternativement, vous pouvez déployer vers d'autres services tels que les pages Netlify ou CloudFlare ou AWS Amplify.
Une fois que vous avez déployé le site Web, il ressemblera à vide ou non correctement. Ceci est prévu. Nous devons faire quelques étapes supplémentaires pour le faire comme on le voit sur la démo.
Tout d'abord, clonez le référentiel GitHub Vercel créé dans votre machine locale. Utilisez la structure de commande suivante. Assurez-vous que le terminal se trouve sur le bon dossier avant d'exécuter cette commande.
git clone https://github.com/ < usename > / < repo > .git your-project-nameUne fois cloné, exécutez la commande suivante à partir du répertoire racine du projet. Cela liera votre projet Vercel.
npx vercel link Maintenant, exécutez la commande suivante pour extraire les variables .env sur votre système local.
npx vercel env pull Vous pouvez maintenant voir qu'un nouveau fichier .env.local a été créé. Si cela ne fonctionne pas, vous pouvez également renommer le .env.local.example à .env.local et ajouter l'ID du projet Sanity manuellement.
Maintenant, vous pouvez ouvrir votre éditeur de code (sinon déjà), nous préférons VScode. Exécutez la commande dans le terminal intégré dans l'éditeur de code.
npm install
# or
yarn install
# or
pnpm install Nous préférons pnpm pour économiser votre espace disque.
Pour ressembler à ce que vous avez vu dans la démo, avec tout le contenu et les images, suivez les étapes ci-dessous:
@sanity/cli installez-le d'abord à l'échelle mondiale. npm install -g @sanity/cli
# or
pnpm install -g @sanity/cli Ensuite, connectez-vous à Sanity en utilisant la commande sanity login
sanity login
Maintenant, vous pourrez importer du contenu de démonstration en exécutant la commande sanity-import . Les fichiers sont situés sur /lib/sanity/data/production.tar.gz et se chargera automatiquement en exécutant la commande ci-dessous.
npm run sanity-import
# or
pnpm sanity-importMaintenant, exécutez votre projet en utilisant la commande ci-dessous.
npm run dev
# or
pnpm devMaintenant, votre projet doit être en place et le frontend suivant. Frontend fonctionnera sur http: // localhost: 3000.
Sanity Studio est accessible à l'aide de http: // localhost: 3000 / studio ou vous pouvez l'exécuter sur un serveur HTTPS: // localhost: 3333 séparé à l'aide de la commande suivante.
npm run sanity
# or
pnpm sanityUne fois que toutes les modifications ci-dessus sont apportées, assurez-vous de redéployer à nouveau Vercel pour voir tous vos changements de production.
Vous pouvez git push les modifications et il devrait déclencher automatiquement un nouveau déploiement. Sinon, vous pouvez également déployer sur Vercel en utilisant la commande suivante.
npx vercel --prod
Nous vous recommandons d'utiliser l'option de déploiement en un clic ci-dessus. Pour une raison quelconque, si vous ne pouvez pas, utilisez les étapes suivantes pour l'installer manuellement.
Clone le repo GitHub ou utilisez les fichiers téléchargés dans votre machine locale.
.env Variables. Ouvrez le dossier du projet et renommez .env.local.example placé dans le dossier racine dans .env.local et ajoutez votre ID de projet Sanity. Vous pouvez créer un nouveau projet en visitant ce lien: https://www.sanity.io/get-started/create-project
Si vous avez déjà un projet, copiez l'ID du projet de https://sanity.io/manage
NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz
Pour que le studio fonctionne correctement, vous devez ajouter l'origine COR dans la santé mentale. Ceci est généralement configuré automatiquement si vous utilisez le déploiement de Vercel. Visitez https://www.sanity.io/manage/personal/project/<project-id>/api dans votre navigateur pour ajouter Cors Origin.
Cliquez sur le bouton Add CORS origin et entrez l'URL en tant que http://localhost:3000 et cochez la case Autoriser les informations d'identification.
Maintenant, vous pourrez continuer à partir des instructions ci-dessus pour importer les données de démonstration et exécuter le projet localement.
Quelque chose ne fonctionne pas comme prévu? Soulever un problème de github. Si vous avez besoin d'un support ou d'une aide personnalisé, veuillez envisager d'acheter la version Pro et nous vous aiderons par e-mail.
