Next.js blog starter

Start off your writing journey with this Next.js markdown blog template.

✏ Features

• Streamlined styling experience with Tailwind.css.
• Customizable typographic defaults with Tailwind Typography
• Automatic image preview and optimization with next-optimized-images.
• Lazyload images.
• Absolute imports.
• SEO friendly.
• Markdown code highlighting with react-syntax-highlighter and PrismJs.

🚀 Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

✍ Customizing Tailwind Typography

Tailwind Typography is an official tailwind plugin that provides a set of prose classes to add beautiful typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS).

To customize the defaults provided by the plugin, add the overrides under the typography key in the theme section of the tailwind.config.js file. Refer to its default styles for more in-depth examples.

For more information, please check out Tailwind Typography's customization section.

📖 Learn More

Next.js

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Tailwind CSS

To learn more about Tailwind CSS, take a look at the following resources:

• Tailwind Documentation - learn about Tailwind CSS features and API.

☑ Upcoming features

• [ ] Add Sitemap
• [ ] Add RSS Feed
• [ ] Dark Mode
• [ ] Add support for WebP images
• [x] Add SEO Component
• [x] Add Dynamic Site Metadata

☁ Deploy