Пейджли
Создавайте невероятно быстрые веб-сайты с помощью Notion со скоростью света ⚡️
Запускайте оптимизированные для SEO и невероятно быстрые веб-сайты из Notion, Google Sheets, GitHub, Airtable с помощью Pagely.
Что такое Пейджли
Pagely — это платформа без кода, которая помогает вам запускать веб-сайты из ваших любимых приложений, таких как Notion, GitHub, Google Sheets, Airtable и других? Вместо того, чтобы позволять вам заниматься всеми вопросами SEO, Pagely автоматически делает его оптимизированным для SEO. Не нравятся стили Notion по умолчанию? Не беспокойтесь, вы можете редактировать CSS по своему усмотрению. И одна из моих самых любимых функций — настраиваемые поддомены. Pagely позволяет вам выбрать субдомен, например. lalit.pagely.site, your-name.pagely.site и т. д. Да, вы правильно поняли — Hashnode тоже это делает. Все, что вам нужно сделать, это ввести содержимое вашего веб-сайта в Notion, и ваш веб-сайт будет обновляться в режиме реального времени в режиме реального времени! Вы можете создать веб-сайт для своего проекта с открытым исходным кодом на GitHub, просто добавив также pagely.json
!!. . В Pagely гораздо больше функций.
Функции
- Бесплатные пользовательские поддомены (например, ваше имя.pagely.site)
- Постоянно обновляемый веб-сайт
- Автоматическое создание OG-изображений ( не с помощью puppeteer ? читайте больше, чтобы узнать)
- Пользовательский стиль (с помощью CSS)
- Пользовательские теги
<head>
(для аналитики и бесконечного количества других интеграций) - Продемонстрируйте свои сайты на странице витрины
- Невероятно быстрые веб-сайты
- Пользовательские домены (обходной путь, пока Vercel не поддержит его)
- Подробные руководства по интеграции Pagely с различными подстраницами.
- Пользовательские слаги/подпути/подмаршруты/ красивые URL-адреса для страниц Notion (скоро)
- Защита веб-сайтов паролем (через встроенную интеграцию StaticShield?)
- Мощные интеграции, такие как Crisp.chat, Disqus, Google Analytics, Stripe, Gumroad и т. д.
- На Vercel. Ваш веб-сайт Pagely кэшируется в периферийной сети Vercel.
- Автоматические карты сайта (скоро)
- Пользовательские шрифты , значки и многое другое.
- Автоматический SSL ( https )
- Создавать потрясающие веб-сайты со своего мобильного телефона ?
- Полнотекстовый поиск по всему сайту (скоро)
- Подсветка синтаксиса для блоков кода
- Темный режим для всех веб-сайтов (будет завтра)
- Предварительный просмотр вашего сайта в Твиттере
Несколько полезных ссылок
- Действующий сайт → https://pagely.site
- Репозиторий GitHub → https://github.com/lalit2005/pagely
- Витрина → https://pagely.site/showcase
- Путеводители → https://guides.pagely.site
- Пример сайта с Notion → https://lalit.pagely.site
- Пример сайта с GitHub → https://pagely-with-github.pagely.site/
Технический стек
Это одна из самых удивительных частей блога. Это потому, что Pagely полностью построен на Jamstack. Да, вы меня правильно поняли. Все приложение было сделано с помощью Next.js (за исключением сервиса автоматической генерации изображений OG).
- Next.js — самый удивительный фреймворк React на планете.
- Клерк – аутентификация
- TailwindCSS — Стиль
- Radix UI — примитивная библиотека компонентов реагирования
- Безголовый пользовательский интерфейс — библиотека компонентов пользовательского интерфейса.
- Supabase (Postgres) — База данных
- Призма — база данных ORM
- Axios — API-запросы
- Форма React Hook — проверка формы
- Зод — проверка
- Web3forms — Отправка форм
- SWR — удаленное получение данных
- Машинопись — проверка типа
- Версель — Хостинг
Содействие
Вы также можете внести свой вклад, отправив шаблоны! Для получения более подробной информации посетите https://pagely.site/templates.
- Клонировать этот репозиторий →
git clone https://github.com/Lalit2005/pagely
- Настройте переменные среды Clerk на панели инструментов Clerk.
- Создайте бесплатную базу данных Postgres в Supabase и получите URL-адрес/строку подключения.
- Получите свой ключ API от Imgbb здесь (только если вы участвуете в разделе загрузки изображений)
- Установите зависимости →
yarn
- Запустите приложение на локальном хосте →
yarn dev
- Создать новую ветку
- Как только доработаете новую функцию или исправите ошибку, просто откройте PR :)
Не забывайте использовать обычные коммиты .
- fix: < ошибка> для исправления ошибки
- feat: <новая функция> для новой функции
- рефакторинг: <рефакторинг кода> для рефакторинга кода
- рутинная работа: <bump lodash> все, что связано с этапом сборки
- chore(deps): <bump lodash> для обновления зависимостей
- chore(deps-dev): <bump vercel> для обновления зависимости от разработчика
- стиль: <добавить поле> для всего, что связано со стилем приложения.
Поддержите меня ☕️
Если вы хотите поддержать меня, вы можете принести мне кофе здесь?