🚀Hello There

DevNow is a minimal open source tech blog project template, support Vercel one-click deployment, support comments, search, etc., welcome everyone to experience.

🔗 Demo ： https://www.laughingzhu.cn/

<div align="center"> <img src="https://r2.laughingzhu.cn/3bcbae51ddcea2cdf738a11c2556a5cd-48f5c9.webp" alt="Screenshot" /> <hr/> <h3 align="center"> ⭐ Leave a star if you like this project! ⭐️ </h3>

</div>

📌 Features

✅ Mobile responsive
✅ SEO & OpenGraph
✅ Markdown & MDX support
✅ Syntax highlighting
✅ Image optimization
✅ Dark mode
✅ Copy code block
✅ Sitemap support
✅ RSS Feed support
✅ Reading Time
✅ 📝 Draft mode
✅ 🔍 Seach
✅ Comments by Giscus
✅ Pagination
✅ Headless CMS by 🦙 Tina CMS

⚙️ 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.
Search Library - Search library integration.
Tina CMS - CMS.

👨🏻‍💻 Running Locally

Clone or fork the repository:

git@github.com:LaughingZhu/DevNow.git

Install dependencies:

pnpm install

Run the development server:

pnpm dev

build production

pnpm build

📐 Vercel env config

Here env config

// Giscus comment config
PUBLIC_GISCUS_REPO_ID;
PUBLIC_GISCUS_REPO;

// Google analytics config
PUBLIC_GOOGLE_ANALYTICS_ID;

// Sentry config
PUBLIC_SENTRY_DNS;
PUBLIC_SENTRY_TOKEN;

📢 Notice：

Giscus feature need open status in config/index

if you are private deployment, you need to update these environment variables in.env; if you are public deployment, you need to update these environment variables in Vercel config env，vercel env address

Comment config : Giscus

Status src/config --> giscus: true
Env config

Private project: .env --> PUBLIC_GISCUS_REPO_ID、PUBLIC_GISCUS_REPO、和 PUBLIC_GISCUS_CATEGORY_ID
Public project: Vercel config env，vercel env address

Headless CMS by Tina CMS

Tina CMS

🗂️ Adding a catefory

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: Category[] = [
  {
    title: 'Tech',
    slug: 'tech',
    color: 'blue',
    description:
      'tech category'
  },
  { new category here } <---
]

DevNow

Install / Use

README