https://github.com/xiaojundebug/xiaojun.im

我的个人博客，由 Next.js、TypeScript、MDX 和 TailwindCSS 构建。My blog built with Next.js, TypeScript, MDX, and TailwindCSS.
https://github.com/xiaojundebug/xiaojun.im

blog mdx next nextjs react tailwindcss typescript

Last synced: 3 days ago
JSON representation

我的个人博客，由 Next.js、TypeScript、MDX 和 TailwindCSS 构建。My blog built with Next.js, TypeScript, MDX, and TailwindCSS.

• Host: GitHub
• URL: https://github.com/xiaojundebug/xiaojun.im
• Owner: xiaojundebug
• License: mit
• Created: 2022-07-28T12:47:53.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-24T12:54:03.000Z (5 months ago)
• Last Synced: 2024-12-16T23:08:18.724Z (10 days ago)
• Topics: blog, mdx, next, nextjs, react, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://xiaojun.im
• Size: 1.98 MB
• Stars: 95
• Watchers: 1
• Forks: 21
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fxiaojundebug%2Fxiaojun.im)

# xiaojun.im

[English](./README.md) • [中文](./README.zh-CN.md)

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

👀 [Live Demo](https://xiaojun.im/)

## Features

- 🎨 Simple, smooth, and fast

- ✨ Supports dark mode, responsive design, and theme color customization

- 🧩 Built-in some markdown extensions, powered by MDX, supports embedding JSX components in posts

- 🎮 Built-in CodePlayground (beta) to run code blocks directly within posts

- 🔫 Fun like button, hit counter, and sound feedback

## Getting Started

1. Fork this repository

2. Run `npm i` to install dependencies

3. Customize the configuration in `site.config.js`

4. To use the like button and hit counter, register for [Upstash Redis](https://console.upstash.com/redis) service, create a `.env` file in the root directory and fill in the following information:

   ```env

   UPSTASH_REDIS_REST_URL = xxx

   UPSTASH_REDIS_REST_TOKEN = xxx

   ```

5. Run `npm run new:post filename title [tag1] [tag2] ...` to create a post in `posts` folder, for more syntax reference, see [example posts](https://www.xiaojun.im/posts/2023-04-27-mdx-syntax-guide)

6. Run `npm run dev` to preview

7. Deploy it on [Vercel](https://vercel.com)

8. If you like it, please give this project a star ✨, it’s a great encouragement for me 🙏

## Thanks

### Sound Effects

https://zapsplat.com

### Reference Sites

- https://www.joshwcomeau.com

- https://cali.so

- https://leerob.io

- https://vuepress.vuejs.org

- https://vitepress.dev

- https://docusaurus.io

- https://github.com/iissnan/hexo-theme-next

- https://github.com/nanxiaobei/hugo-paper