digital garden
v0.7.2
Weitere Screenshots hier
Eine Open -Source -Blogging -Vorlage (Digital Gardening) für Entwickler, die den nächsten.js -App -Router, MDX, ContentLayer, Tailwind CSS, @Shadcn/UI, Lucide Icons und mehr verwenden.
Wenn Sie diese Vorlage lieben und/oder verwenden, geben Sie ihr bitte einen Stern auf GitHub. Dies wird mehr Menschen helfen, es zu entdecken und somit dazu beitragen, die Vorlage zu verbessern.
Hinweis: Dieses Projekt entwickelt sich immer weiter und es ist alles andere als perfekt oder sogar fertig. Ich bin immer offen für Vorschläge und Beiträge. Fühlen Sie sich frei, ein Problem oder eine PR zu öffnen, wenn Sie Ideen oder Vorschläge haben. Sie können auch die Roadmap für geplante Funktionen sehen, wenn Sie einen Beitrag leisten möchten.
Als Entwickler, der Inhalte erstellt, möchte ich einen Blog und einen digitalen Garten haben, in dem ich meine Gedanken und Ideen mit der Welt teilen kann. Jetzt gibt es derzeit nicht wirklich eine "perfekte Lösung". Mit eingeschlossenen Analysen, SEO, E-Mail-Abonnements, modernem Werkzeug, einfachem Design usw. müssen wir entweder eine von Grund auf neu erstellen, eine Designvorlage verwenden und die Funktionen codieren oder ein CMS/No-Code-Tool verwenden.
Also habe ich mich entschlossen, eine Lösung aufzubauen, die ich selbst verwenden würde. Dies ist das Ergebnis.
Wenn Sie sehen möchten, wie ich diese Vorlage für meinen eigenen digitalen Garten eingerichtet habe, können Sie diesen Commit mit allen Änderungen überprüfen.
pnpm installutils/metadata.ts mit Ihren Informationen und allgemeinen Einstellungenutils/uses-data.ts mit von Ihnen verwendeten Software und Hardwareutils/projects-data.ts mit Ihren Projektenutils/navigation-links.ts mit den gewünschten Links in der Navigationcontent/pages/now mit Ihrer Verfügbarkeitcontent/pages/about Ihre Biografiepnpm dev ausÖffnen Sie http: // localhost: 3000 in Ihrem Browser, um das Ergebnis zu sehen.
Sie können Inhalte in Markdown oder MDX schreiben. Der Inhalt befindet sich in content/ und ist in Ordnern organisiert. Der pages enthält die Seiten. Der posts -Ordner enthält die Blogposts. Der projects enthält die Projekte.
Bearbeitungslistenseiten finden Sie im lib -Ordner.
/uses - lib/uses-data.ts/projects - lib/projects-data.ts/social - lib/social-data.ts FrontMatter wird verwendet, um Metadaten für Seiten und Pfosten zu definieren. Es befindet sich oben in der Datei und ist in Yaml geschrieben. Sie können die folgenden Felder definieren:
title - Der Titel der Seite/des Beitragsdescription - Die Beschreibung der Seite/des BeitragspublishedDate - das Datum des Beitrags (nicht auf Seiten verwendet)lastUpdatedDate - das Datum der Seite/Posttags - Liste der Tags für den Beitrag. Sie können neue Tags hinzufügen, indem Sie sie zur tagOptions hinzufügen. (nicht auf Seiten verwendet)series - Die Serie des Beitrags. Eine Serie hat einen Titel und eine Bestellnummer für einen Beitrag. (nicht auf Seiten verwendet)author - Der Autor der Post. Ein Autor hat einen Namen und ein Bild. (nicht auf Seiten verwendet)status - ob die Seite/der Beitrag veröffentlicht oder entzogen wirdSie können das Projekt mit Vercel oder einem anderen Hosting -Anbieter bereitstellen. Wenn Sie Vercel verwenden möchten, können Sie die Schaltfläche oben in diesem Readme verwenden.
package.json AutorinformationenNEXT_PUBLIC_BASE_URL auf Vercel ein, um auf die Root -URL Ihrer Website zu verweisen Dieses Projekt verwendet Inter als Standardschrift. Sie können es in app/layout.tsx mit dem next/fonts -Paket ändern.
Das Projekt verwendet Tailwind -Farben und @Shadcn/UI -Konfiguration. Passen Sie die Farben auf globals.css an.
In der Fußzeile gibt es eine Signaturkomponente. Sie können die Signatur für components/signature.tsx bearbeiten. Ich habe Figma verwendet, um die Signatur mit Caveat zu schreiben und sie als SVG zu exportieren. Sie können dasselbe tun und die SVG in der Komponente aktualisieren.
Bilder und andere Mediendateien befinden sich im public/ verzeichneten. Sie können sie in Ihrem Inhalt verwenden, indem Sie den Pfad /<filename>.<ext> verwenden.
Hier ist ein kurzes Tutorial, wie Sie in weniger als 2 Minuten einen ähnlichen Avatar in Figma erstellen können. https://youtu.be/ny-vaeehjkm
Sie können die Metadaten- und Autorendetails in utils/metadata.ts ändern. Dies wird auf der Website für Titel, soziale Links, soziale Handles, SEO usw. verwendet.
Sie können Navigationslinks in lib/navigation-links.ts bearbeiten.
Sie können soziale Links in lib/social-data.ts bearbeiten. Sie können auch neue soziale Links hinzufügen, indem Sie sie zur Datei hinzufügen und den Plattformamen als Schlüssel und die URL als Wert verwenden. Die SocialButton Komponente fügt das Symbol für die Plattform automatisch hinzu, wenn es in einfachen ICons unterstützt wird.
Um es zu konfigurieren, müssen Sie es im Vercel -Projekt -Dashboard aktivieren, indem Sie Ihr Projekt auswählen und dann auf die Registerkarte Analytics klicken und im Dialogfeld aktivieren.
UMAMI ist eine einfache, einfach zu bedienende Webanalyse-Lösung mit Selbsthostoption! Weitere Informationen finden Sie auf der UMAMI -Website. (Hinweis: Auf der Eisenbahn können Sie es kostengünstig oder sogar kostenlos veranstalten) .
Konfigurieren: Setzen Sie NEXT_PUBLIC_UMAMI_SCRIPT_URL & NEXT_PUBLIC_UMAMI_WEBSITE_ID Umgebungsvariablen auf Ihrer .env.local -Datei und auf Vercel Dashboard.
Plausible ist eine einfache, leichte Open-Source-Alternative zu Google Analytics. Weitere Informationen finden Sie auf der plausiblen Website.
Konfigurieren: Setzen Sie NEXT_PUBLIC_PLAUSIBLE_DOMAIN & NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL Umgebungsvariablen in Ihrer .env.local -Datei und auf Vercel Dashboard. Wenn Sie sich um Werbeblocker kümmern, können Sie das plausible Skript durch Ihre eigene Domain stellten. Hier können Sie mehr darüber lesen.
Google Analytics ist ein von Google angebotener Webanalytics -Dienst, der den Website -Datenverkehr als Plattform in der Marke Google Marketing -Plattform verfolgt und berichtet. Weitere Informationen finden Sie auf der Google Analytics -Website.
Konfigurieren: Setzen Sie die Umgebungsvariable NEXT_PUBLIC_GOOGLE_ANALYTICS_ID auf Ihrer .env.local -Datei und auf Vercel Dashboard.
Die Unterstützung anderer Analyseanbieter sind im Gange. Fühlen Sie sich frei, ein Problem zu eröffnen, wenn Sie Vorschläge oder PR haben, wenn Sie es selbst implementieren möchten.
Mailerlite ist ein einfaches E -Mail -Marketing -Instrument für alle Arten von Unternehmen. Weitere Informationen finden Sie auf der Mailerlite -Website.
Konfigurieren: Setzen Sie die Variablen EMAIL_API_BASE , EMAIL_API_KEY und EMAIL_GROUP_ID in Ihrer .env.local -Datei und auf Vercel Dashboard.
Die Unterstützung anderer Newsletter -Anbieter sind im Gange. Fühlen Sie sich frei, ein Problem zu eröffnen, wenn Sie Vorschläge oder PR haben, wenn Sie es selbst implementieren möchten.
Sie können zwischen 3 verschiedenen Heldenvarianten auswählen, die in app/(site)/page.tsx verwendet werden können, indem Sie die importierte Heldenkomponente ändern.
HeroSimple - Ein einfacher zentrierter Heldenabschnitt mit Bild, Titel und Untertitel.HeroVideo - 2 Säulenheldenabschnitt mit Videoask auf der einen Seite und Titel und Untertitel auf der anderen Seite.HeroImage - 2 Säulenheldenabschnitt mit Bild auf einer Seite und einem Titel und Untertitel auf der anderen Seite.HeroMinimal - kleiner Held -Abschnitt Name & Berufsbezeichnung Ich empfehle, Bilder schnell kostenlos mit ImageOptim zu optimieren. Installieren Sie auf Ihrem Mac und öffnen Sie dann den public Ordner im Finder. Wählen Sie alle Bilder aus, klicken Sie mit der rechten Maustaste und wählen Sie "Mit> ImageOptim" öffnen. Dies optimiert alle Bilder im Ordner.
Hinweis: Übertreiben Sie es nicht. Sie können Bilder mit verlustigen Komprimierungsalgorithmen leicht schlecht aussehen lassen.
Erstellen Sie eine PR und fügen Sie Ihr Blog dieser Liste hinzu, wenn Sie die Vorlage verwenden!
robots.txt & sitemap.xml Dieses Projekt stammt von Entwicklern für Entwickler. Alle Beiträge sind willkommen! Bitte zögern Sie nicht:
develop .develop der Filiale.Alle Beiträge, die Sie leisten, befinden sich unter der MIT -Softwarelizenz. Kurz gesagt, wenn Sie Codeänderungen einreichen, werden Ihre Einsendungen als unter derselben MIT -Lizenz, die das Projekt abdeckt, verstanden. Verhaltenskodex finden Sie hier.
Wenn Sie diese Vorlage lieben und/oder verwenden, geben Sie ihr bitte einen Stern auf GitHub.
