Pagely
Erstellen Sie mit Notion blitzschnell Websites ⚡️
Starten Sie mit Pagely SEO-freundliche, blitzschnelle Websites von Notion, Google Sheets, GitHub und Airtable
Was ist Pagely?
Pagely ist eine No-Code-Plattform, die Ihnen hilft, Websites aus Ihren Lieblings-Apps wie Notion, GitHub, Google Sheets, Airtable und mehr zu starten. Anstatt Ihnen die ganze SEO-Angelegenheit zu überlassen, macht Pagely es automatisch SEO-freundlich für Sie. Gefallen Ihnen die Standardstile von Notion nicht? Keine Sorge, Sie können das CSS nach Herzenslust bearbeiten. Und eine meiner Lieblingsfunktionen: benutzerdefinierte Subdomains. Mit Pagely können Sie die Subdomain Ihrer Wahl auswählen, z. lalit.pagely.site, your-name.pagely.site usw. Ja, Sie haben es richtig verstanden – Hashnode macht das auch. Sie müssen lediglich den Inhalt Ihrer Website in Notion eingeben und Ihre Website wird live und in Echtzeit aktualisiert!! Sie können eine Website für Ihr Open-Source-Projekt auf GitHub erstellen, indem Sie einfach auch eine pagely.json hinzufügen!! . Es gibt eine Menge weiterer Funktionen in Pagely.
Merkmale
- Kostenlose benutzerdefinierte Subdomains (z. B. Ihr-Name.pagely.site)
- Live-Aktualisierung der Website
- Automatische Generierung von OG-Bildern ( nicht mit Puppenspieler ? Lesen Sie mehr, um es herauszufinden)
- Benutzerdefiniertes Styling (mit CSS)
- Benutzerdefinierte
<head> -Tags (für Analysen und unendlich viele weitere Integrationen) - Präsentieren Sie Ihre Websites auf der Showcase-Seite
- Blitzschnelle Websites
- Benutzerdefinierte Domänen (über einen Workaround, bis Vercel dies unterstützt)
- Detaillierte Anleitungen zur Integration von Pagely in verschiedene Unterseiten
- Benutzerdefinierte Slugs/Subpaths/Subroutes/ hübsche URLs für Notion-Seiten (in Kürze verfügbar)
- Passwortschutz für Websites (über integrierte StaticShield-Integration?)
- Leistungsstarke Integrationen wie Crisp.chat, Disqus, Google Analytics, Stripe, Gumroad usw.
- Auf Vercel. Ihre Pagely-Website wird im Edge-Netzwerk von Vercel zwischengespeichert
- Automatische Sitemaps (in Kürze erhältlich)
- Benutzerdefinierte Schriftarten , Favoriten und mehr
- Automatisches SSL ( https )
- Tolle Websites mit Ihrem Mobiltelefon erstellen?
- Volltextsuche für die gesamte Website (in Kürze verfügbar)
- Syntaxhervorhebung für Codeblöcke
- Dunkler Modus für alle Websites (kommt morgen)
- Live-Twitter-Vorschau Ihrer Website
Einige praktische Links
- Live-Website → https://pagely.site
- GitHub-Repository → https://github.com/lalit2005/pagely
- Schaufenster → https://pagely.site/showcase
- Anleitungen → https://guides.pagely.site
- Beispielseite mit Notion → https://lalit.pagely.site
- Beispielseite mit GitHub → https://pagely-with-github.pagely.site/
Tech-Stack
Dies ist einer der überraschendsten Teile des Blogs. Das liegt daran, dass Pagely vollständig mit dem Jamstack erstellt wurde. Ja, du hast mich richtig verstanden. Die gesamte App wurde mit Next.js erstellt (mit Ausnahme des automatischen OG-Bildgenerierungsdienstes).
- Next.js – Das erstaunlichste React-Framework der Welt
- Sachbearbeiter – Authentifizierung
- TailwindCSS - Styling
- Radix UI – Primitive React-Komponentenbibliothek
- Headless UI – UI-Komponentenbibliothek
- Supabase (Postgres) – Datenbank
- Prisma – Datenbank ORM
- Axios – API-Anfragen
- React Hook Form – Formularvalidierung
- Zod – Validierung
- Web3forms – Formularübermittlungen
- SWR – Remote-Datenabruf
- Typescript – Typprüfung
- Vercel - Hosting
Mitwirken
Auch Sie können einen Beitrag leisten, indem Sie Vorlagen einreichen!! Weitere Informationen finden Sie unter https://pagely.site/templates
- Klonen Sie dieses Repo →
git clone https://github.com/Lalit2005/pagely - Richten Sie die Umgebungsvariablen von Clerk über das Clerk-Dashboard ein
- Erstellen Sie eine kostenlose Postgres-Datenbank in Supabase und rufen Sie die Verbindungs-URL/-Zeichenfolge ab
- Holen Sie sich hier Ihren API-Schlüssel von Imgbb (nur wenn Sie zum Abschnitt zum Hochladen von Bildern beitragen)
- Installieren Sie die Abhängigkeiten →
yarn - Führen Sie die App auf localhost →
yarn dev aus - Erstellen Sie einen neuen Zweig
- Sobald Sie eine neue Funktion fertiggestellt oder einen Fehler behoben haben, öffnen Sie einfach eine PR :)
Denken Sie daran, herkömmliche Commits zu verwenden.
- fix: <ein Fehler> für eine Fehlerbehebung
- feat: <a new feature> für eine neue Funktion
- Refactor: <ein Code-Refactor> für einen Code-Refactor
- chore: <bump lodash> alles, was mit dem Build-Schritt zu tun hat
- chore(deps): <bump lodash> für ein Abhängigkeitsupdate
- chore(deps-dev): <bump vercel> für ein Update der Entwicklerabhängigkeit
- Stil: <Marge hinzufügen> für alles, was mit dem Stil der Anwendung zu tun hat
Unterstütze mich ☕️
Wenn Sie mich unterstützen möchten, können Sie mir hier einen Kaffee servieren?
