xiaojun.dev

My personal blog, built with Next.js, TypeScript, MDX, and TailwindCSS.

Features

🎨 Simple, smooth, and fast
✨ Supports dark mode, responsive design, and theme color customization
🧩 Built-in Markdown extensions, powered by MDX, with support for embedding JSX components in posts
🎮 Built-in CodePlayground (beta) for running code blocks directly in posts
🔫 Fun like button, hit counter, and sound feedback

Fork this repository
Run npm i to install dependencies
Customize the configuration in site.config.js
To use the like button and hit counter, register for the Upstash Redis service, create a .env file in the root directory, and fill in the following information:
```
UPSTASH_REDIS_REST_URL = xxx
UPSTASH_REDIS_REST_TOKEN = xxx
```
(Optional) AI summary at the top of post pages: configure an OpenAI-compatible API in .env. During npm run build, Chinese summaries are generated automatically for posts without a summary frontmatter field and written into the frontmatter (posts that already have one are skipped; if the API is not configured, generation is skipped without affecting the build):
```
OPENAI_BASE_URL = your OpenAI-compatible endpoint (e.g. https://api.openai.com/v1)
OPENAI_API_KEY = your API key
OPENAI_MODEL = model name, defaults to gpt-4o-mini
```
You can also run npm run summarize at any time to backfill summaries manually, or npm run summarize:force to regenerate all summaries (posts marked as draft or skipSummary: true are still skipped). To exclude a post from AI summaries, set skipSummary: true in its frontmatter (both generation and rendering are skipped).
Run npm run new:post filename title [tag1] [tag2] ... to create a post in the posts folder; see the example posts for more syntax
Run npm run dev to preview
Deploy it on Vercel
If you like it, please give this project a star ✨ — it’s a great encouragement to me 🙏