Astro Blog

JC9thCO

Checking out Astro & Svelte together

Astro Ink is a minimal theme created to serve minimalistic markdown-based blog needs. It ships with almost all the basic Astro components that you might need while creating light-weight, performant, personal blogs, that focus on shipping less Javascript by default.

It's hugely inspired by Hugo's Ink theme and strives to remain light, while providing the basis for a beautiful, minimal blog.

Features

Minimal, Crisp, Markdown-Blog Ready
Uses astro 1.1.5 - It uses Astro's latest 1.1.5 release under the hood
Svelte Ready - In its effort to remain light-weight, performant, and more approachable from Astro's POV, Svelte is used for interactive components like the theme switcher
Modular - The structure is highly modular, with components doing just one job, and one job well.
Collection + Dynamic Pages - It's ready with Next.js like dynamic pages, to support a tag-based classification system with paginated results, all configurable
Dark Mode & Color Codes - It supports dark mode, and 6+ color modes that's selected using tailwind.config.js. You can pass THEME_KEY with the dev or build script/commands ex: THEME_KEY=purpleheart astro build/dev to change the color theme being used. All the available themes can be found in tailwind.theme.config.js. To customize the blog section, add any of the Tailwind Typography's prose-{color} classes as referred here
Netlify CMS^*NEW - Add/Edit/Update all the posts in the /blog directory by visiting your-site.netlify.com/admin ex: astro-ink.netlify.app/admin with your Netlify credentials. It needs Netlify Identity(https://app.netlify.com/sites/your-site/settings/identity#registration ) and Git Gateway(https://app.netlify.com/sites/your-site/settings/identity#services) enabled.
Future Posts^*NEW(with Github Actions) - Create posts in the /src/drafts directory with a future date in the YYYY-MM-DD format, and let a specially crafted Github Action take care of auto-publishing it on your specified date. You can configure the check interval in Github Action.
Client-Side Search^*NEW - Allow your users get to your blog posts quickly with client-side search feat. Lunr.js

How to start?

There's not much to know about commands. Just clone this template, and start working from your clone. You have all the common NPM commands at your disposal like dev, build, etc. Refer package.json to see a list of all the available commands.

Built with Astro Ink

jamesperkins.dev - Personal site of developer, YouTube instructor James R Perkins
highlandcows.github.io Nick Jacob's personal blog

know a site built with Astro Ink? Let me know on Twitter

Wanna learn Astro while building Ink?

This theme was initially built with first an alpha, and then a beta version of the Astro Framework. If you're just starting with Astro, you can actually learn Astro while building this very theme by following a series of blogs I've written that teaches you Astro ground-up!

Head over to aalam.in/blog and know

Top categories