terminalGETTING_STARTED_v1.0
Einführung
Layero ist ein Marketplace für präzise entwickelte Next.js-Themes, die für hochperformante Websites entwickelt wurden. Jedes Theme wird produktionsfertig geliefert — mit TypeScript, Tailwind CSS, SEO und CMS-Konnektoren.
codeSTART (Nur Theme) ist für
- checkEntwickler
- checkFreelancer
- checkAgenturen
- checkTechnisch versierte Nutzer
support_agentNicht technisch?
Kein Problem. Unsere verwalteten Pläne kümmern sich um alles — von der Installation bis zum Launch und zur Inhaltsbearbeitung.
PRO Plan — wir übernehmen das Deployment für Sie
MAX Plan — Deployment + bearbeitbare Oberfläche
ULTRA — vollständig maßgeschneiderte Lösung
01. Kaufen
Wählen Sie ein Theme und wählen Sie Ihren Plan — START, PRO oder MAX.
02. Konfigurieren
Klonen Sie das Repository, installieren Sie die Abhängigkeiten und setzen Sie Ihre Umgebungsvariablen in .env.local.
03. Anpassen
Bearbeiten Sie Inhalte im Ordner data/, tauschen Sie Bilder aus und passen Sie die Tailwind-Theme-Tokens an.
04. Deploy
Veröffentlichen Sie auf Vercel, Netlify oder laden Sie einen statischen Build auf Ihr Apache / cPanel-Hosting hoch.
ANFORDERUNGEN
Node.js ≥ 18.17, npm ≥ 9 oder pnpm ≥ 8. Git ist erforderlich, um das Projekt zu klonen und zu verwalten.
Installation
Nach dem Kauf erhalten Sie Zugang zum Quell-Repository Ihres Themes. Folgen Sie den nachstehenden Schritten, um Ihre lokale Umgebung einzurichten.
Terminalbash
# Clone your purchased theme
git clone https://github.com/sitelift/your-theme.git
# Enter the project directory
cd your-theme
# Install dependencies
npm install
# Copy the environment template
cp .env.example .env.local
# Start the dev server
npm run devÖffnen Sie http://localhost:3000, um Ihr Theme lokal zu sehen.
UMGEBUNGSVARIABLEN
Bearbeiten Sie .env.local mit Ihren Zugangsdaten, bevor Sie starten:
# Site config
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_SITE_NAME="Your Business"
# CMS (optional)
CONTENTFUL_SPACE_ID=xxxx
CONTENTFUL_ACCESS_TOKEN=xxxx
# Stripe (optional)
STRIPE_SECRET_KEY=sk_live_xxxx
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_xxxx
Deployment
Empfohlene Hosting-Optionen
Layero-Themes funktionieren mit jedem modernen Hosting-Anbieter. Unten die drei häufigsten Optionen — wählen Sie die, die zu Ihrem Workflow passt.
1. Auf Vercel deployen
Der einfachste Weg. Pushen Sie Ihr Repository zu GitHub, importieren Sie es im Vercel-Dashboard und Sie sind in Minuten live. Jeder zukünftige Push löst einen automatischen Redeploy aus.
npx vercel --prod
2. Auf Netlify deployen
Verbinden Sie Ihr GitHub-Repository im Netlify-Dashboard. Setzen Sie den Build-Befehl auf npm run build und das Veröffentlichungsverzeichnis auf .next. Jeder Push baut automatisch neu.
npx netlify deploy --prod
dns3. Traditionelles Hosting (Apache / cPanel)
Wenn Ihr Theme statischen Export unterstützt, können Sie es auf jedem Standard-Apache- oder cPanel-Server hosten — ohne Node.js. Geeignet für Websites und Portfolios.
01Statischen Export aktivieren
Prüfen Sie in der README des Themes, ob statischer Export unterstützt wird. In next.config.ts sollte output auf 'export' gesetzt sein.
02Statische Dateien erstellen
Führen Sie npm run build aus. Next.js generiert einen out/-Ordner mit HTML, CSS und JS — kein Server benötigt.
03Per FTP hochladen
Verwenden Sie einen FTP-Client (FileZilla, Cyberduck) oder den Dateimanager Ihres Hosting-Panels, um den Inhalt von out/ in Ihren public_html-Ordner zu laden.
04Live gehen
Ihre Website ist jetzt als Standard-Static-Website live. Kein Node.js-Prozess, keine Serverkonfiguration erforderlich.
npm run build # generates the out/ folder
PROFI-TIPP
Vercel und Netlify sind für die meisten Nutzer die empfohlene Wahl — keine Konfiguration, automatisches SSL und sofortiger Redeploy bei jedem Push. Verwenden Sie Apache-Hosting, wenn Sie bereits einen Shared-Hosting-Plan haben und die Kosten minimieren möchten.
Inhalte bearbeiten
Alle benutzerseitigen Inhalte sind in fokussierte TypeScript-Dateien im Ordner data/ an der Projektwurzel aufgeteilt. Für grundlegende Inhaltsänderungen müssen einzelne Seitendateien nicht angefasst werden.
| Datei | Was sie steuert |
|---|
data/site.ts | Firmenname, Telefon, E-Mail, Adresse, Öffnungszeiten, Statistiken |
data/services.ts | Dienste / Tätigkeitsbereiche / Menüpunkte |
data/team.ts | Teamprofile |
data/testimonials.ts | Testimonials (wo zutreffend) |
data/navigation.ts | Navigationslinks |
Lesen Sie die README Ihres Themes für die vollständige Liste der Datendateien und deren genaue Struktur — diese variiert je Theme.
data/site.tsTypeScript
export const siteConfig = {
name: "Your Business",
tagline: "Your memorable tagline",
phone: "+1 (555) 000-0000",
email: "hello@yourdomain.com",
address: "123 Main St, City, Country",
};Nach dem Speichern lädt der Entwicklungsserver sofort neu. In der Produktion ist ein neuer Build erforderlich, um Änderungen zu übernehmen.
Wie Inhaltsaktualisierungen funktionieren
Der Aktualisierungsprozess hängt davon ab, wo Ihre Website gehostet wird. Hier ist, was auf jeder Plattform zu erwarten ist.
- 01Bearbeiten Sie die relevanten Dateien im Ordner data/ Ihres Themes
- 02Committen und pushen Sie in Ihr Repository
- 03Vercel baut automatisch neu und deployt
Schnellster Workflow — Änderungen sind in unter einer Minute live.
- 01Bearbeiten Sie die relevanten Dateien im Ordner data/ Ihres Themes
- 02Committen und pushen Sie in Ihr Repository
- 03Netlify baut automatisch neu und deployt
Wie Vercel — pushen zum Deployen.
- 01Bearbeiten Sie die relevanten Dateien im Ordner data/ Ihres Themes lokal
- 02Führen Sie npm run build aus, um neue statische Dateien zu generieren
- 03Laden Sie den neuen Ordner out/ per FTP hoch
Erfordert jedes Mal Zugang zum Quellcode und einen FTP-Client.
REBUILD ÜBERSPRINGEN?
Steigen Sie auf den MAX-Plan um und bearbeiten Sie Ihre Inhalte über eine visuelle Oberfläche — kein Code, kein Terminal, kein FTP erforderlich.