astro ink

Astro Ink es un tema minimalista creado para satisfacer las necesidades de blogs minimalistas basados ​​en rebajas. Se entrega con casi todos los componentes básicos de Astro que pueda necesitar mientras crea blogs personales livianos y de alto rendimiento, que se enfocan en enviar menos Javascript de forma predeterminada.

Está enormemente inspirado en el tema Ink de Hugo y se esfuerza por seguir siendo ligero, al mismo tiempo que proporciona la base para un blog hermoso y minimalista.

Características

• Minimal, Crisp, Markdown-Blog Ready siempre actualizado a la última versión de Astro (actualmente versión 2.x ) bajo el capó.
• Svelte Ready : en su esfuerzo por seguir siendo liviano, eficaz y más accesible desde el punto de vista de Astro, Svelte se utiliza para componentes interactivos como el selector de temas.
• Modular : la estructura es altamente modular, con componentes que realizan solo un trabajo y un trabajo bien.
• Colección de contenido Astro 2.0 + páginas dinámicas : está listo con Next.js como páginas dinámicas, para admitir un sistema de clasificación basado en etiquetas con resultados paginados, todo configurable.
• Modo oscuro y códigos de color : admite el modo oscuro y más de 6 modos de color que se seleccionan usando tailwind.config.js . Puede pasar THEME_KEY con el script/comandos de dev o build , por ejemplo: THEME_KEY=purpleheart astro build/dev para cambiar el tema de color que se está utilizando. Todos los temas disponibles se pueden encontrar en tailwind.theme.config.js. Para personalizar la sección del blog, agregue cualquiera de las clases de prose-{color} de Tailwind Typography como se menciona aquí
• Netlify CMS : agregue/edite/actualice todas las publicaciones en el directorio /blog visitando your-site.netlify.com/admin , por ejemplo: astro-ink.netlify.app/admin con sus credenciales de Netlify. Necesita Netlify Identity (https://app.netlify.com/sites/your-site/settings/identity#registration) y Git Gateway (https://app.netlify.com/sites/your-site/settings/identity #servicios) habilitados.
• Publicaciones futuras (con acciones de Github): cree publicaciones en el directorio /src/drafts con una date futura en el formato YYYY-MM-DD y deje que una acción de Github especialmente diseñada se encargue de publicarlas automáticamente en la fecha especificada. Puede configurar el intervalo de verificación en Github Action.
• Búsqueda del lado del cliente : permita que sus usuarios accedan rápidamente a las publicaciones de su blog con la función de búsqueda del lado del cliente. lunr.js
• Ver hazaña del contador. Redis/Upstash Redis : configure su host Redis, coloque su URL de conexión en la consola de su proveedor de hosting (Vercel, Netlify, etc.) o en un archivo .env (desarrollo local), descomente el código de conexión aquí e implemente. Su sitio cuenta con un contador de vistas dinámico. Consulte .env.example para comprender los diferentes valores de entorno que necesita configurar.
• Página de medios con soporte para canales de YouTube : muestre fácilmente el contenido de su canal de YouTube en la página de medios simplemente colocando la identificación de su canal en la constante ytChannelId del archivo de configuración. Opcionalmente, deshabilite las miniaturas de imágenes de la lista de videos de su canal de YouTube configurando USE_MEDIA_THUMBNAIL en false .
• Tarjetas de autor : agregue fácilmente tarjetas de autor basadas en publicaciones o en todo el sitio, que incluyan un botón de seguimiento de Twitter configurando USE_AUTHOR_CARD en true dentro del archivo de configuración.
• Superposición de imágenes temáticas : opcionalmente, puedes habilitar superposiciones, que pueden agregar un bonito degradado temático encima de las imágenes de tus publicaciones configurando USE_POST_IMG_OVERLAY en true dentro del archivo de configuración.

¿Cómo empezar?

Simplemente clona esta plantilla y comienza a trabajar desde tu clon. Tiene todos los comandos NPM comunes a su disposición, como dev , build , etc. Consulte package.json para ver una lista de todos los comandos disponibles.

Nota: Utilice npx degit one-aalam/astro-ink para clonar la plantilla sin el historial git

Nota: Esta plantilla genera la salida server (preparado para SSR) de forma predeterminada. Si quieres compilaciones static

• cambiar output a static desde server en astro.config.js
• quitar adapter: vercel()
• eliminar la API del contador de vistas
• establezca USE_VIEW_STATS en false dentro de config.ts

Nota: antes de ejecutar npm run dev por primera vez.

• cree un archivo .env ejecutando mv .env.example .env (si está en una distribución de Linux o Mac)
• establezca la variable SITE_URI como SITE_URI=http://localhost:4321 ( donde 4321 es el puerto en el que se ejecuta su proyecto )

Construido con tinta Astro

• jamesperkins.dev - Sitio personal del desarrollador, instructor de YouTube James R Perkins
• highlandcows.github.io Blog personal de Nick Jacob

¿Conoce un sitio creado con Astro Ink? Déjamelo saber en Twitter

¿Quieres aprender Astro mientras construyes Ink?

Este tema se creó inicialmente primero con una versión alfa y luego con una versión beta de Astro Framework. Si recién estás comenzando con Astro , puedes aprender Astro mientras construyes este mismo tema siguiendo una serie de blogs que he escrito y que te enseñan Astro desde cero.

Dirígete a aalam.in/blog y conoce

• Cómo configurar Astro y ponerlo en funcionamiento con valores predeterminados esenciales para diseño, creación de prototipos e implementaciones incrementales
• Administrar componentes de presentación y crear páginas Astro.
• Alimentación de datos locales y remotos a las páginas de Astro
• Poniendo interactividad donde absolutamente no puedes prescindir de ella en Astro
• Creación de páginas dinámicas basadas en datos y resultados paginados en Astro
• Cree el contenido de su sitio Astro con CMS basados ​​en Git