astro ink

Astro Ink ist ein minimalistisches Theme, das entwickelt wurde, um minimalistische, auf Markdowns basierende Blog-Bedürfnisse zu erfüllen. Es wird mit fast allen grundlegenden Astro-Komponenten geliefert, die Sie möglicherweise benötigen, um leichte, leistungsstarke und persönliche Blogs zu erstellen, bei denen standardmäßig weniger Javascript zum Einsatz kommt.

Es ist stark von Hugos Ink-Thema inspiriert und strebt danach, leicht zu bleiben und gleichzeitig die Grundlage für einen schönen, minimalistischen Blog zu bieten.

Merkmale

• Minimal, klar, Markdown-Blog Ready, immer auf dem neuesten Stand von Astro (aktuell 2.x Version) unter der Haube.
• Svelte Ready – In dem Bemühen, aus der Sicht von Astro leichtgewichtig, leistungsfähig und zugänglicher zu bleiben, wird Svelte für interaktive Komponenten wie den Theme-Switcher verwendet
• Modular – Die Struktur ist hochmodular, wobei die Komponenten nur eine Aufgabe erfüllen und eine Aufgabe gut erfüllen.
• Astro 2.0 Content Collection + Dynamic Pages – Es ist bereit mit Next.js wie dynamischen Seiten, um ein Tag-basiertes Klassifizierungssystem mit paginierten Ergebnissen zu unterstützen, alles konfigurierbar
• Dunkler Modus und Farbcodes – Unterstützt den dunklen Modus und mehr als 6 Farbmodi, die mit tailwind.config.js ausgewählt werden. Sie können THEME_KEY mit dem dev oder build -Skript/den Befehlen übergeben, z. B.: THEME_KEY=purpleheart astro build/dev um das verwendete Farbthema zu ändern. Alle verfügbaren Themes finden Sie in tailwind.theme.config.js. Um den Blog-Bereich anzupassen, fügen Sie eine der hier genannten prose-{color} -Klassen von Tailwind Typography hinzu
• Netlify CMS – Fügen Sie alle Beiträge im Verzeichnis /blog hinzu/bearbeiten/aktualisieren Sie sie, indem Sie mit Ihren Netlify-Anmeldeinformationen your-site.netlify.com/admin besuchen, z. B.: astro-ink.netlify.app/admin. Es benötigt Netlify Identity (https://app.netlify.com/sites/your-site/settings/identity#registration) und Git Gateway (https://app.netlify.com/sites/your-site/settings/identity). #Dienste) aktiviert.
• Zukünftige Beiträge (mit Github-Aktionen) – Erstellen Sie Beiträge im Verzeichnis /src/drafts mit einem zukünftigen date im Format YYYY-MM-DD und lassen Sie eine speziell gestaltete Github-Aktion die automatische Veröffentlichung an Ihrem angegebenen Datum übernehmen. Sie können das Prüfintervall in Github Action konfigurieren.
• Clientseitige Suche – Ermöglichen Sie Ihren Benutzern mit der clientseitigen Suchfunktion den schnellen Zugriff auf Ihre Blogbeiträge. Lunr.js
• Counterfeature ansehen. Redis/Upstash Redis – Konfigurieren Sie Ihren Redis-Host, platzieren Sie seine Verbindungs-URL in der Konsole Ihres Hosting-Anbieters (Vercel, Netlify usw.) oder in einer .env Datei (lokale Entwicklung), entkommentieren Sie den Verbindungscode hier und stellen Sie ihn bereit. Ihre Website verfügt über einen dynamischen Aufrufzähler. Weitere Informationen zu den verschiedenen Umgebungswerten, die Sie konfigurieren müssen, finden Sie unter .env.example.
• Medienseite mit YT-Kanalunterstützung – Zeigen Sie den Inhalt Ihres YT-Kanals ganz einfach auf der Medienseite an, indem Sie einfach Ihre Kanal-ID in ytChannelId Konstante der Konfigurationsdatei einfügen. Deaktivieren Sie optional die Bildminiaturansichten aus der Videoliste Ihres YT-Kanals, indem Sie USE_MEDIA_THUMBNAIL auf false setzen.
• Autorenkarten – Fügen Sie ganz einfach postbasierte oder websiteweite Autorenkarten hinzu, die eine Twitter-Folgen-Schaltfläche enthalten, indem Sie USE_AUTHOR_CARD in der Konfigurationsdatei auf true setzen.
• Thematische Bildüberlagerung – Sie können optional Überlagerungen aktivieren, die einen schönen thematischen Farbverlauf über Ihren Beitragsbildern hinzufügen können, indem Sie USE_POST_IMG_OVERLAY in der Konfigurationsdatei auf true setzen.

Wie fange ich an?

Klonen Sie einfach diese Vorlage und beginnen Sie mit der Arbeit von Ihrem Klon aus. Ihnen stehen alle gängigen NPM-Befehle wie dev , build usw. zur Verfügung. Eine Liste aller verfügbaren Befehle finden Sie in package.json.

Hinweis: Verwenden Sie npx degit one-aalam/astro-ink um die Vorlage ohne den git -Verlauf zu klonen

Hinweis: Diese Vorlage generiert standardmäßig server (SSR-fähig). Wenn Sie static Builds wünschen

• Ändern Sie output vom server in astro.config.js in static
• adapter: vercel()
• Entfernen Sie die Aufrufzähler-API
• Setzen Sie USE_VIEW_STATS in config.ts auf false

Hinweis: Bevor Sie npm run dev –

• Erstellen Sie eine .env Datei, indem Sie mv .env.example .env ausführen (wenn Sie eine Linux-Distribution oder einen Mac verwenden)
• Legen Sie die SITE_URI Variable als SITE_URI=http://localhost:4321 fest ( wobei 4321 der Port ist, an dem Ihr Projekt ausgeführt wird ).

Gebaut mit Astro Ink

• jamesperkins.dev – Persönliche Website des Entwicklers und YouTube-Lehrers James R. Perkins
• highlandcows.github.io Nick Jacobs persönlicher Blog

Kennen Sie eine mit Astro Ink erstellte Website? Lass es mich auf Twitter wissen

Möchten Sie Astro lernen, während Sie Ink bauen?

Dieses Thema wurde zunächst mit einer Alpha- und dann einer Beta-Version des Astro Framework erstellt. Wenn Sie gerade erst mit Astro beginnen, können Sie Astro tatsächlich lernen, während Sie genau dieses Thema erstellen, indem Sie einer Reihe von Blogs folgen, die ich geschrieben habe und die Ihnen Astro von Grund auf beibringen!

Besuchen Sie aalam.in/blog und erfahren Sie es

• So richten Sie Astro ein und bringen es mit wesentlichen Standardeinstellungen für Design, Prototyping und inkrementelle Bereitstellungen zum Laufen
• Präsentationskomponenten verwalten und Astroseiten erstellen
• Einspeisen lokaler und entfernter Daten in die Astro-Seiten
• Mit Astro setzen Sie Interaktivität dort ein, wo Sie absolut nicht darauf verzichten können
• Erstellen Sie datengesteuerte, dynamische Seiten und paginierte Ergebnisse in Astro
• Verfassen Sie den Inhalt Ihrer Astro-Site mit Git-basierten CMS