astro ink

Astro Ink est un thème minimal créé pour répondre aux besoins minimalistes des blogs basés sur les démarques. Il est livré avec presque tous les composants Astro de base dont vous pourriez avoir besoin pour créer des blogs personnels légers et performants, qui se concentrent sur l'envoi de moins de Javascript par défaut.

Il s'inspire énormément du thème Ink de Hugo et s'efforce de rester léger, tout en fournissant la base d'un blog magnifique et minimal.

Caractéristiques

• Minimal, Crisp, Markdown-Blog Ready toujours mis à jour avec la dernière version d'Astro (actuellement 2.x ) sous le capot.
• Svelte Ready - Dans son effort pour rester léger, performant et plus accessible depuis le POV d'Astro, Svelte est utilisé pour des composants interactifs tels que le sélecteur de thème.
• Modulaire - La structure est hautement modulaire, avec des composants qui n'effectuent qu'une seule tâche et une seule tâche correctement.
• Astro 2.0 Content Collection + Dynamic Pages - Il est prêt avec Next.js comme les pages dynamiques, pour prendre en charge un système de classification basé sur des balises avec des résultats paginés, tous configurables
• Mode sombre et codes de couleur - Il prend en charge le mode sombre et plus de 6 modes de couleur sélectionnés à l'aide de tailwind.config.js . Vous pouvez passer THEME_KEY avec le script/commandes dev ou build ex : THEME_KEY=purpleheart astro build/dev pour changer le thème de couleur utilisé. Tous les thèmes disponibles peuvent être trouvés dans tailwind.theme.config.js. Pour personnaliser la section blog, ajoutez l'une des classes de prose-{color} de Tailwind Typography, comme indiqué ici.
• Netlify CMS - Ajoutez/Modifiez/Mettez à jour tous les articles du répertoire /blog en visitant your-site.netlify.com/admin ex : astro-ink.netlify.app/admin avec vos informations d'identification Netlify. Il nécessite Netlify Identity (https://app.netlify.com/sites/your-site/settings/identity#registration) et Git Gateway (https://app.netlify.com/sites/your-site/settings/identity #services) activé.
• Publications futures (avec actions Github) - Créez des publications dans le répertoire /src/drafts avec une date future au format YYYY-MM-DD et laissez une action Github spécialement conçue se charger de sa publication automatique à la date spécifiée. Vous pouvez configurer l'intervalle de vérification dans Github Action.
• Recherche côté client – ​​Permettez à vos utilisateurs d’accéder rapidement à vos articles de blog grâce à la fonctionnalité de recherche côté client. Lunr.js
• Voir le contre-exploit. Redis/Upstash Redis - Configurez votre hôte Redis, placez son URL de connexion dans la console de votre hébergeur (Vercel, Netlify, etc.) ou dans un fichier .env (développement local), décommentez le code de connexion ici et déployez. Votre site est alimenté par un compteur de vues dynamique. Voir .env.example pour comprendre les différentes valeurs d'environnement que vous devez configurer.
• Page média avec prise en charge de la chaîne YT – Affichez facilement le contenu de votre chaîne YT sur la page média en mettant simplement l'identifiant de votre chaîne dans la constante ytChannelId du fichier de configuration. Vous pouvez éventuellement désactiver les miniatures d'images de la liste de vidéos de votre chaîne YT en définissant USE_MEDIA_THUMBNAIL sur false .
• Cartes d'auteur - Ajoutez facilement des cartes d'auteur basées sur des publications ou sur l'ensemble du site, qui incluent un bouton de suivi Twitter en définissant USE_AUTHOR_CARD sur true dans le fichier de configuration.
• Superposition d'images thématiques - Vous pouvez éventuellement activer les superpositions, qui peuvent ajouter un joli dégradé thématique au-dessus de vos images de publication en définissant USE_POST_IMG_OVERLAY sur true dans le fichier de configuration.

Comment commencer ?

Clonez simplement ce modèle et commencez à travailler à partir de votre clone. Vous disposez de toutes les commandes NPM courantes comme dev , build , etc. Reportez-vous à package.json pour voir une liste de toutes les commandes disponibles.

Remarque : utilisez npx degit one-aalam/astro-ink pour cloner le modèle sans aucun historique git

Remarque : Ce modèle génère une sortie server (prêt pour SSR) par défaut. Si vous voulez des versions static

• changer output en static du server dans astro.config.js
• supprimer adapter: vercel()
• supprimer l'API du compteur de vues
• définissez USE_VIEW_STATS sur false dans config.ts

Remarque : avant d'exécuter npm run dev pour la toute première fois -

• créez un fichier .env en exécutant mv .env.example .env (si vous êtes sur une distribution Linux ou Mac)
• définissez la variable SITE_URI sur SITE_URI=http://localhost:4321 ( où 4321 est le port sur lequel votre projet est exécuté )

Construit avec Astro Ink

• jamesperkins.dev - Site personnel du développeur, instructeur YouTube James R Perkins
• highlandcows.github.io Le blog personnel de Nick Jacob

connaissez-vous un site construit avec Astro Ink ? Faites-le-moi savoir sur Twitter

Voulez-vous apprendre Astro tout en construisant Ink ?

Ce thème a été initialement construit avec d'abord une version alpha, puis une version bêta d' Astro Framework. Si vous débutez avec Astro , vous pouvez réellement apprendre Astro tout en construisant ce même thème en suivant une série de blogs que j'ai écrits et qui vous enseignent Astro de base !

Rendez-vous sur aalam.in/blog et sachez

• Comment configurer Astro et le faire fonctionner avec les paramètres par défaut essentiels pour le style, le prototypage et les déploiements incrémentiels
• Gestion des composants de présentation et création de pages Astro
• Alimentation des données locales et distantes vers les pages Astro
• Mettre l'interactivité là où vous ne pouvez absolument pas vous en passer dans Astro
• Création de pages dynamiques basées sur les données et de résultats paginés dans Astro
• Créez le contenu de votre site Astro avec des CMS basés sur Git