• Stars
    star
    501
  • Rank 85,224 (Top 2 %)
  • Language Astro
  • License
    MIT License
  • Created over 2 years ago
  • Updated 3 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.
791
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.
538
star
3

svelte-starter-kit

Svelte with brilliant bells and useful whistles
Svelte
447
star
4

remix-starter-kit

Remix with brilliant bells and useful whistles
TypeScript
232
star
5

next-starter-kit

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

nuxt-starter-kit

Nuxt3 with brilliant bells and useful whistles
Vue
138
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
108
star
8

solid-starter-kit

SolidJS with brilliant bells and useful whistles
TypeScript
67
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.
59
star
10

astro-me

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

svelte-notion-kit

Brings your Notion pages to SvelteKit
Svelte
34
star
12

astro-starter-kit

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

ng-starter-kit

Angular with Supabase, and other bells and whistles
TypeScript
15
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
13
star
15

remix-edge-kit

TypeScript
10
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

microcosm

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

github-action-ssg-publish-drafts

TypeScript
4
star
21

awesome-bun-1

⚡️ A curated list of awesome things related to Bun
3
star
22

amazeballs

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

houdini-kit

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

svelte-pizzeria

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

havyt-next

TypeScript
2
star
26

astro-guide

Astro
2
star
27

how-to-react

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

svelte-todo

Svelte explorations
CSS
1
star
29

salt-desktop

HTML
1
star
30

react-movies

An example React.js isomorphic app
JavaScript
1
star
31

Mongoseer

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

cyvy

Personal CV generator
JavaScript
1
star
33

contentful

PoC and stuff!
JavaScript
1
star
34

lyt

just a lytweight JSON server
JavaScript
1
star
35

flyt

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

vue-starter-kit

Vue
1
star
37

now

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

is_it

basic data validation library
PHP
1
star
39

rex

TypeScript
1
star
40

Sorbet

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

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
42

salt

HTML
1
star
43

calcutta

HTML
1
star
44

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
45

yt-ts-react-form

TypeScript
1
star
46

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
47

attic

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

mbe

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

attic-react

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

tw-starter-kit

Tailwind. Quick
HTML
1
star
51

aNGry

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

8flix

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

acu

Astro Content Universe
JavaScript
1
star
54

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
55

thoughtwell-react

JavaScript
1
star
56

gyza

Food Ordering Mobile + Web App
TypeScript
1
star
57

habyt

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

qrius

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