[![Stargazers][stars-shield]][stars-url] [![MIT License][license-shield]][license-url] [![Release][release-shield]][release-url]

Nano Blog

📕 An super fast, lightweight and SEO friendly blog made by Astro 📕

English · 简体中文 · 日本語

Table of Contents

• Introduction of Project
• Build with
• Runtime Requirement
• Getting Started
• How to use this project for your case
• About cors error
• Contributor
• LICENSE

The image shown here is a index-page for laptop-size, click here to see more detailed screenshot for this application.

💪 Features

• [√] Minimal styling
• [√] Mobile responsive
• [√] 100/100 Lighthouse performance
• [√] SEO-friendly with canonical URLs and OpenGraph data
• [√] Sitemap support
• [√] RSS Feed support
• [√] Markdown & MDX support
• [√] Syntax highlighting
• [√] Image optimization
• [√] Table of contents
• [√] Dark mode
• [√] Reading Time
• [√] Pagefind static search library integration
• [√] Related posts
• [√] Share posts (Linkedin, twitter)
• [√] Draft mode
• [√] Copy code block
• [√] CMS in the repository (Tina CMS)
• [√] Pagination
• [√] ViewTransition (new)
• [√] Disqus comments (new)

🛣️ Roadmap

• Add post author
• Add customization with colors
• Add filters for reading time, date...
• More sharing options
• Internationalization (i18n)

⚙️ Stack

• ASTRO + Typescript - Astro is the all-in-one web framework designed for speed.
• Tailwind CSS + Tailwind-Merge + clsx - Tailwind CSS is a utility-first CSS framework.
• Tabler Icons - A open source SVG icons.
• Eslint - ESLint is an open source project that helps you find and fix problems.
• Prettier - Code formatter.
• Search Library - Static search library integration.
• Motion - Motion One is the smallest fully-featured animation library for the web.
• Tina CMS - CMS.

😎 Prerequisites

• NodeJS v20 LTS above

👨🏻‍💻 Running Locally

1. Clone or fork the repository:

2. Install dependencies:

cd nano-blog
pnpm install

3. Run the development server:

pnpm start

📐 Configure

• Edit the configuration file src/data/site.config.ts for the basic blog metadata.
• Update the astro.config.mjs file at the root of the project with your own domain.
• Modify the files in the /public folder:
  • favicon
  • robots.txt -> update the Sitemap url to your own domain
  • open-graph -> the open-graph is the image that will be displayed when sharing the blog link. For posts, the preview image is the post cover.
• Edit the social networks in the Header component - src/components/Header.astro, change the URL to your social network.

🗂️ Adding a category

To add a new category to your blog, simply go to the src/data/categories.ts file and add it to the array.

Example:

export const CATEGORIES  =  [
'JavaScript',
'React',
'new category here'  <---
]  as  const

🚨 Zod checks whether the category is not correctly written or does not exist in the properties of the markdown document. It will throw an error when building the application. 🚨

📄 Adding a post

Adding a post is as simple as adding a .md or .mdx file to the blog folder at the path src/content/blog. The filename will be used to create the slug/URL of the page.

For example, if you have a file named jsx-and-react.md, it will be transformed into: http://yourdomain.com/post/jsx-and-react/

📝 Activating draft mode

To activate draft mode, add the property draft: true to the file, and it will no longer be displayed on the blog.

Example :

title: MacBook Pro 2022
description: 'The new MacBook Pro 2022 is here. With the Apple M2 chip, a new design, and more, the new MacBook Pro is the best laptop Apple has ever made.'
pubDate: 'Jul 02 2022'
heroImage: '../../assets/bg.jpg'
category: 'Category 1'
tags: ['JavaScript', 'css', 'HTML5', 'GitHub']
draft: true <---

🥰 Thanks to