• Stars
    star
    548
  • Rank 81,119 (Top 2 %)
  • Language Astro
  • License
    MIT License
  • Created about 3 years ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Crisp, minimal, personal blog theme for Astro

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.



Astro Banner

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 always updated to Astro's latest (currently 2.x 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.
  • Astro 2.0 Content 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 - 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(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 - Allow your users get to your blog posts quickly with client-side search feat. Lunr.js
  • View counter feat. Redis/Upstash Redis - Configure your Redis host, place it's connection URL in your hosting provider's console (Vercel, Netlify, etc.) or in a .env file(local development), un-comment the connection code here and deploy. Your site's powered with a dynamic views counter. See .env.example to understand the different environment values you need to configure.
  • Media Page with YT channel support - Easily show your YT channel content on the media page by just putting your channel id in config file's ytChannelId constant. Optionally, disable the image thumbnails from your YT channel's video listing by setting USE_MEDIA_THUMBNAIL to false.
  • Author Cards - Easily add post based or site-wide Author cards, that include a Twitter follow button by setting USE_AUTHOR_CARD to true inside config file.
  • Themed image overlay - You can optionally enable overlays, that can add a nice themed gradient on top of your post images by setting USE_POST_IMG_OVERLAY to true inside config file.

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

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

More Repositories

1

awesome-solid-js

Curated resources on building sites with SolidJS, a brand new way(now 1.0) to build Javascript based interactive web applications. A very close looking cousin to React/JSX by syntax, and to Svelte by few important principles(compiler and fine-grained reactivity), it's a highly optimised way to deliver web applications with best-in-class performance.
873
star
2

awesome-astro

Curated resources on building sites with Astro, a brand new way to build static and server rendered sites, with cross-framework components, styling and reactive store support.
639
star
3

svelte-starter-kit

Svelte with brilliant bells and useful whistles
Svelte
450
star
4

remix-starter-kit

Remix with brilliant bells and useful whistles
TypeScript
236
star
5

next-starter-kit

Next.js with brilliant bells and useful whistles
TypeScript
169
star
6

nuxt-starter-kit

Nuxt3 with brilliant bells and useful whistles
Vue
137
star
7

awesome-svelte-kit

Curated resources on building sites with SvelteKit - A server-less-first answer to "the Next.js experience" by the Svelte community
114
star
8

solid-starter-kit

SolidJS with brilliant bells and useful whistles
TypeScript
69
star
9

awesome-bun

Bun is a fast all-in-one JavaScript runtime. This is a central reference to many awesome things about bun out there.
60
star
10

astro-me

Crisp, minimal, personal portfolio theme for Astro
Astro
39
star
11

svelte-notion-kit

Brings your Notion pages to SvelteKit
Svelte
34
star
12

ng-starter-kit

Angular with Supabase, and other bells and whistles
TypeScript
16
star
13

astro-starter-kit

My blog, beautiful blog, built with beautiful Astro
Astro
16
star
14

havyt

Learn Fastify step-by-step, by building a Recipe App. Follow the outline below/commits to see what's new at each level. Create a issue if something doesn't work for you.
TypeScript
12
star
15

remix-edge-kit

TypeScript
11
star
16

remix-ink

TypeScript
8
star
17

new-kid-to-bloc

Flutter/Dart explorations - A movie app (Very WIP)
Dart
7
star
18

awesome-vanilla-extract-css

4
star
19

github-action-ssg-publish-drafts

TypeScript
4
star
20

microcosm

🦄 Micro Cosmos of Microservices aspiring to be seen as a well-ordered whole
JavaScript
4
star
21

houdini-kit

Repo for my SvelteKit + Houdini YT series https://www.youtube.com/playlist?list=PLm0ILX0LGQk_220vvpsbyXH2VesRlCm-E
Svelte
4
star
22

amazeballs

All the good stuff - Next.js, Remix, Mono-repo and other goodies!
CSS
3
star
23

svelte-pizzeria

Aspires to be a one-stop Pizza shop built with Svelte
CSS
3
star
24

havyt-next

TypeScript
2
star
25

astro-guide

Astro
2
star
26

how-to-react

Proven principles and rules on writing code with React
1
star
27

salt-desktop

HTML
1
star
28

svelte-todo

Svelte explorations
CSS
1
star
29

react-movies

An example React.js isomorphic app
JavaScript
1
star
30

Mongoseer

Aspring MongoDB manager for local databases using Node, Coffee and Angular.js
JavaScript
1
star
31

cyvy

Personal CV generator
JavaScript
1
star
32

lyt

just a lytweight JSON server
JavaScript
1
star
33

flyt

Super-light javascript library to flatten arrays
JavaScript
1
star
34

vue-starter-kit

Vue
1
star
35

mbe

Starting point for BE Node.js projects
TypeScript
1
star
36

contentful

PoC and stuff!
JavaScript
1
star
37

is_it

basic data validation library
PHP
1
star
38

Sorbet

A dessert of Gulp recipes for quickly building front-ends
JavaScript
1
star
39

rex

TypeScript
1
star
40

now

A nifty li'l application that aspires to help you with hanging information/thoughts you'd like to re-visit
JavaScript
1
star
41

salt

HTML
1
star
42

calcutta

HTML
1
star
43

goodsee

A movie app that aspires to be a potpourri of all the React best patterns/practices/parts to inspire the foundation of something much better/bigger in size and scale
TypeScript
1
star
44

stayin

A humble AirBnB clone(aspires to be) built with React, Vue and Angular - also containing the server side code and hosted inside a mono-repo(not lerna yet) to save the dev(in me) from repetitive tooling setups!
JavaScript
1
star
45

attic

But the real interesting stuff is in the cellar and the attic
TypeScript
1
star
46

yt-ts-react-form

TypeScript
1
star
47

tw-starter-kit

Tailwind. Quick
HTML
1
star
48

attic-react

React client App for the Attic server built with CRA
JavaScript
1
star
49

aNGry

is not angry actually - and just exploring Angular 5+ architecture for a robust application
TypeScript
1
star
50

8flix

No! it ain't gonna eat netflix
TypeScript
1
star
51

acu

Astro Content Universe
JavaScript
1
star
52

mfs

Absolutely minimalistic starting point for modern Full-stack, type-safe development, with an API server(Node.js) and a UI client(Vite)
TypeScript
1
star
53

thoughtwell-react

JavaScript
1
star
54

gyza

Food Ordering Mobile + Web App
TypeScript
1
star
55

habyt

Habyt is a habit manager that lets you keep track of your daily habits through CLI.
Rust
1
star
56

qrius

A very minimal HackerNews clone, built outta qriusity
TypeScript
1
star
57

Embrace

A wishful boilerplate which aspires to provide most of the bells and whistles required for almost every other Node.js project.
JavaScript
1
star