Astro Bento Blog Template

Astro Bento Blog Template is a free, open-source Astro blog theme that combines a bento-grid archive, a block-based post format, and a built-in browser editor for producing static blogs.

What is Astro Bento Blog Template?

Astro Bento Blog Template is a free, open-source Astro blog theme that takes Post JSON v2 documents as content and generates a static blog with bento, list, and network archive layouts. It is maintained by dgddgd314 on GitHub, requires Node.js 22.12.0 or newer, and is licensed under MIT. The theme uses Astro Content Collections, Tailwind CSS 4, and TypeScript.

Key Features

• Bento, list, and network archive layouts — Three responsive archive views are available, with the bento grid as the signature layout and a post-network graph for tag connections.
• Block-based post format — A Notion-inspired renderer supports rich text, tables, equations, callouts, bookmarks, and covers, all stored as portable Post JSON v2 files.
• Built-in browser editor — The /editor/ route lets you create and import documents, then export Post JSON v2 files; drafts, recent emoji, and non-secret Drive settings are kept in the current browser only.
• Google Drive image upload — Optional integration to upload images to a Drive folder directly from the editor, using the narrow drive.file scope and memory-only access tokens.
• Organized content collections — Astro Content Collections read JSON files recursively from src/content/blog/, with categories, tags, search, RSS, and auto-generated related-post links.
• Light and dark themes with View Transitions — Both color themes are included and page transitions are enabled by default.
• GitHub Pages deployment workflow — A ready-made workflow builds the site with Node.js 22.12, installs from package-lock.json, and publishes the dist/ folder.
• TypeScript and Tailwind CSS 4 — The entire template, including configuration and components, is written in TypeScript and styled with Tailwind CSS 4.

Who should use Astro Bento Blog Template?

• Independent bloggers who prefer a visual writing experience — they can compose posts in the /editor/ interface and export JSON files, avoiding a traditional CMS.
• Developers who host on GitHub Pages — the template includes a GitHub Actions workflow and clear instructions for project pages and custom domains.
• Technical writers and educators — the block renderer supports equations, tables, callouts, and bookmarks, making it suitable for structured documentation and tutorials.

What can you do with Astro Bento Blog Template?

• Publish a personal blog with a bento archive — write posts in the built-in editor, export Post JSON v2 files into src/content/blog/, and rebuild to get a static site with categories, tags, and RSS.
• Create a networked knowledge base — tag posts and add curated relationships in src/data/post-network.json to visualize connections in the network view.
• Deploy a project documentation site — use the block-based format with equations and callouts, and rely on the included GitHub Pages workflow for continuous deployment.

How does the template work?

To get started, use GitHub's "Use this template" button or run npm create astro@latest my-blog -- --template dgddgd314/astro-bento-blog-template, then install dependencies with npm install and run npm run dev. The default local site starts at http://localhost:4321. Customize src/config.ts for site metadata, URLs, and branding, and place Post JSON v2 files under src/content/blog/. For GitHub Pages project sites, set the deployment URL and base path in the config.

FAQ

Is Astro Bento Blog Template free?

Yes, the template is free and open-source under the MIT license. You can view and fork the repository on GitHub at github.com/dgddgd314/astro-bento-blog-template.

What are the system requirements?

Node.js 22.12.0 or newer is required. The template uses Astro, Tailwind CSS 4, and TypeScript, and dependencies are managed through npm.

How do I deploy to GitHub Pages?

Push the project to a GitHub repository on the main branch, open Settings → Pages, choose GitHub Actions as the deployment source, and run the included workflow. It builds the site and publishes the dist/ folder.

How does Google Drive image upload work?

The upload feature is optional and only activates when you configure Drive settings in the /editor/. You need a Google Drive folder, a Google Cloud project with the Drive API enabled, and a Web application OAuth client ID. The editor requests only the drive.file scope and stores the access token in memory.