stablo

Шаблон блога Stablo - Next.js & Sanity CMS

Stablo - это шаблон блога Jamstack, построенный с Next.js, Tailwind CSS & Sanity CMS от Web3templates. Это поставляется с бесплатной и профессиональной версией.

Установка ↓

Живая демонстрация

Бесплатная версия демонстрация →

Pro Version Demo →

Функции

Особенность	Бесплатная версия	Pro версия
Next.js v13	✅	✅
/каталог приложений	✅	✅
Tailwind CSS	✅	✅
Sanity CMS (V3)	✅	✅
По требованию повторно		✅
Auto-Update Новые посты	Основанное на времени	✅
Мобильный отзывчивый	✅	✅
Темный и легкий режим	✅	✅
Рабочая страница контакта	✅	✅
Архив (страница)	✅	✅
Страницы категории		✅
Авторские страницы		✅
Поиск страницы		✅
Домашняя страница - по умолчанию	✅	✅
Домашняя страница - альтернативная		✅
Домашняя страница - минимальная		✅
Домашняя страница - Lifestlye		✅
Домашняя страница - две колонки		✅
Сообщение в блоге - по умолчанию	✅	✅
Пост в блоге - минимальный		✅
Пост в блоге - Lifestlye		✅
Сообщение в блоге - с боковой панелью		✅
6 -месячная поддержка		✅
Бесплатные обновления	✅	✅
Лицензия	GPL-2.0	Коммерческий
Ценообразование	Бесплатно	49 долларов
	Развернуть бесплатно	Покупать профессионал

Нажмите кнопку выше для клона в один клик и развернуть для этого шаблона. Прочитайте руководство быстрого начала ниже.

Предварительный просмотр шаблона

Предварительный просмотр Sanity CMS

Установка

Шаг 1: развернуть в Vercel

Используйте кнопку развертывания ниже. Это позволит вам развернуть стартер, используя Vercel, а также подключить его к вашей Sanity Studio, используя интеграцию Sanity Vercel.

Приведенное выше развертывание автоматически настроит следующее:

• Создать новый репозиторий в GitHub
• Создать проект Sanity
• Установите интеграцию Sanity в Vercel
• Добавить необходимые настройки CORS & API в проект
• Развернуть фронт в Vercel

В качестве альтернативы вы можете развернуть другие услуги, такие как NetLify или CloudFlare Pages или AWS Amplify.

Шаг 2: Настройка проекта локально.

После того, как вы развернули веб -сайт, он будет выглядеть пустым или не настроен должным образом. Это ожидается. Нам нужно сделать еще несколько шагов, чтобы сделать это, как видно на демонстрации.

Во -первых, клонируйте Vercel 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 это не работает, вы .env.local.example можете переименовать.

Теперь вы можете открыть свой редактор кода (если еще не), мы предпочитаем vScode. Запустите команду в интегрированном терминале внутри редактора кода.

npm install
# or
yarn install
# or
pnpm install

Мы предпочитаем pnpm , чтобы сохранить ваше дисковое пространство.

Шаг 3: Демонстрационные данные импорта (необязательно)

Чтобы выглядеть так, как вы видели в демонстрации, со всем контентом и изображениями, выполните следующие шаги:

1. Если вы не установили @sanity/cli сначала установите его во всем мире.

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

Затем войдите в здравомыслие, используя команду sanity login

 sanity login

Теперь вы сможете импортировать демонстрационный контент, используя команду sanity-import . Файлы расположены по адресу /lib/sanity/data/production.tar.gz и будут загружаться автоматически, выполнив приведенную ниже команду.

npm run sanity-import
# or
pnpm sanity-import

Шаг 4: Закончите!

Теперь запустите свой проект, используя команду ниже.

npm run dev
# or
pnpm dev

Теперь ваш проект должен быть вновлен, а на http: // localhost: 3000.

Sanity Studio можно получить с помощью http: // localhost: 3000/studio, или вы можете запустить его на отдельном https: // localhost: 3333 сервер, используя следующую команду.

npm run sanity
# or
pnpm sanity

Шаг 5. Отвращено

После того, как все вышеперечисленные изменения внесены, обязательно переведите в Vercel еще раз, чтобы увидеть все ваши изменения в производстве.

Вы можете git push изменения, и это должно автоматически вызвать новое развертывание. Если нет, вы также можете развернуть в Vercel, используя следующую команду.

 npx vercel --prod

Ручная установка

Мы рекомендуем вам использовать опцию развертывания одного клика выше. По какой -то причине, если вы не можете, используйте следующие шаги, чтобы установить его вручную.

Шаг 1. Клонировать репо

Клонировать репо github или использовать загруженные файлы в вашей локальной машине.

Шаг 2. Настройка .env Переменные.

Откройте папку Project и переименование .env.local.example помещен в корневую папку в .env.local и добавьте свой идентификатор проекта здравомыслия. Вы можете создать новый проект, посетив эту ссылку: https://www.sanity.io/get-started/create-project

Если у вас уже есть проект, скопируйте идентификатор проекта с https://sanity.io/manage

 NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz

Шаг 3. Разрешить происхождение CORS

Чтобы студия работала правильно, вы должны добавить происхождение CORS в здравомыслие. Обычно это настраивается автоматически, если вы используете развертывание Vercel. Посетите https://www.sanity.io/manage/personal/project/<project-id>/api в вашем браузере, чтобы добавить происхождение Cors.

Нажмите кнопку Add CORS origin и введите URL -адрес http://localhost:3000 и проверьте флажок «Разрешить учетные данные».

Шаг 4 Продолжайте срок действия выше

Теперь вы сможете продолжить из приведенных выше инструкций по импорту демонстрационных данных и запуска проекта локально.

Помощь и поддержка

Что -то не работает, как и ожидалось? Поднимите проблему GitHub. Если вам нужна персонализированная поддержка или помощь, пожалуйста, рассмотрите возможность покупки профессиональной версии, и мы поможем вам по электронной почте.

Спонсор