Create a Modern Blog System with Astro in 10 mins

Nano Blog is a performant, lightweight and SEO friendly open-source blog template made by modern web technologies like Astro, TypeScript, TailwindCSS etc.

It integrates with Github Discussion as the comment system, which means you don’t need to have a database to store the comments, and the comments are stored safely in the Github Server.

There is the Github Repository and the Demo Website.

This tutorial will guide you through the process of building and deploying a modern blog system using this open-source template.

Prerequisites

Installation

There have two ways to getting started with this template, you can choose the one you prefer.

Clone the template repository to local can keep compatible with the dependencies and avoid incompatible with the breaking changes from Astro major version, you can running the following command in your terminal:

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

Create a new Project by Astro cli

You can also create a new project with the template by using the Astro cli, which is the official cli tool for Astro project, you can run the following command in your terminal:

# 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

Once you have done one of the method above, you can install the dependencies that are required to run the project, by running one of the following commands depending on your package manager:

# pnpm - recommend
pnpm start
# yarn
yarn run start
# npm - node default package manager
npm run start

Once the project is successfully running, you can open your browser and navigate to http://localhost:xxxx, the xxxx will be display automatically according to the port of the Vite version that the Astro version of the project depending on.

If you see all of the posts displayed correctly, good job! You have done all of stuffs for the installation.

Insert Your Posts

The posts contents are stored in the /src/content/blog folder, you can insert your posts by creating a new .md (markdown) or .mdx (extended markdown) file in this folder, but we recommend to use the .mdx file because it supports more features than the .md files.

For example, you can import any components from the /src/components/mdx folder and use them in the .mdx file, those components are especially designed for the .mdx files.

Be notice that you can only use components in the mdx files.

Enjoy and have fun with your new blog system! 🎉

Prerequisites

Installation

Create a new Project by Astro cli

Insert Your Posts