nano-blog Tailwind Templates

Nano Blog

A performant, lightweight and SEO friendly modern blog system made by Astro, TypeScript, Tailwind and Pagefind, without any database and backend


Nano Blog

๐Ÿ“• A performant, lightweight and SEO friendly modern blog system made by Astro ๐Ÿ“•

English ยท ๆ—ฅๆœฌ่ชž

Directory

Introduction

The image shown here is the posts-page for medium-size, click here to see more detailed screenshot for this application.

Nano-blog is a modern blog system build with Astro and Tailwind ecosystem, this template is base on openBlog but given more optimization which is including more feature, active maintenance, more modern syntax and modules, more fast on adopting new major version of Astro and Tailwind.

Build With

  • Astro
  • TailwindCSS
  • Localize with build-in i18n functionality
  • Typescript with ES6+ syntax and ESM

Features

  • Minimal styling
  • All components are written in .astro
  • Responsive Layout
  • Super Performance
  • Clean Dependency Injection
  • SEO Friendly
  • Markdown & MDX support
  • Code Highlighting
  • Dark Mode
  • Automatic Computing Reading Time
  • compatible with newest version of Astro and Tailwind (updated on v2.8)
  • Table of Content for different experience between mobile and larger devices (added on v2.7)
  • Pagefind Integration for Content Searching (rewritten on v2.6)
  • Related Posts (updated on v2.1)
  • English and Japanese Localization (i18n) (updated on v2.4)
  • Giscus Comment system that powered by Github Discussion (added on v2.2)

Roadmap

  • update to Astro v5 (accomplished on v2.8)
  • update to TailwindCSS v4 (accomplished on v2.8)

Runtime Requirement

  • NodeJS LTS 22 or above

Installation

Clone Repository - recommend

Firstly, clone this repository to local by running the following command:

$ git clone https://github.com/gaomingzhao666/nano-blog.git # clone
$ cd nano-blog

Once clone is done without any errors, you should install dependencies and start this project by running:

# pnpm - recommend
$ pnpm install
$ pnpm start

# npm - node default package manager
$ npm install
$ npm run start

# yarn
$ yarn run start

Create a New Project using Astro Cli

# pnpm - recommend
pnpm create astro@latest --template gaomingzhao666/nano-blog

# npm - node default package manager
npm create astro@latest -- --template gaomingzhao666/nano-blog

# yarn
yarn create astro --template gaomingzhao666/nano-blog

Please note that this method may encounter some compatibility issues with the template because nano-blog may not update to the major version of Astro immediately upon release due to stability concerns. Currently, nano-blog is using the latest version of Astro v5.x and Tailwind v4.

Top categories

Loading Svelte Themes