tszhong0411 / honghong.me

⚡ A monorepo of my personal website and blog built with TypeScript, Next.js, and Tailwind CSS

honghong.me

Welcome to the monorepo of my personal blog! This repository houses the code for my blog, where I share my thoughts, projects, and insights. Feel free to explore and get inspired.

✨ Features

• ⚡️ Next.js 14 with App Router (Turbo)
• 📝 MDX
• 🎨 Tailwind CSS - for styling
• 🌈 Radix UI - accessible UI components
• 🛡 Strict TypeScript and ESLint configuration
• 📱 Responsive design
• 🌗 Light / Dark mode
• 📈 SEO optimized with meta tags and JSON-LD
• 📰 RSS feed
• 🗺 Sitemap
• 📊 Umami Analytics
• 📝 Blog with comments, likes, and post views
• 🔎 Blog post search
• 📖 Table of contents for blog posts
• 📷 Image zoom - zoom in on images in blog posts
• 📝 Code syntax highlighting - using Shiki
• 🎨 Animation - using Framer Motion
• 🤖 GitHub Actions for CI/CD
• 🏠 LightHouse score of nearly 100
• 🔨 Husky & Lint Staged - lint and format code before committing
• ✅ Conventional commit lint - make sure commit messages follow the conventional commit format
• 🔒 NextAuth.js - authentication
• 💄 Prettier - code formatting
• 〰️ Drizzle - ORM
• 👷🏻‍♂️ t3-env - validate environment variables before building

🔨 Requirements

• Node, recommended 20.x
• pnpm, recommended 9.0.6
• PostgreSQL, recommended 14.x (optional if you don't need all the functionalities)
• Visual Studio Code with recommended extensions
• Optionally React Developer Tools

👋 Getting Started

Follow these steps to run the project locally on your machine:

git clone https://github.com/tszhong0411/honghong.me.git
cd honghong.me
pnpm install

Create a .env.local file based on the provided .env.example file and fill in the necessary variables.

OR you can skip this by modifying apps/web/src/env.ts:

export const env = createEnv({
  skipValidation: true,

  server: {
    // ...
  }
})

It will skip the validation of environment variables. And you may notice that some functionalities will not work properly. But it's okay for learning.

Then build the necessary packages:

pnpm build:packages

To run the app in development mode:

pnpm dev

The app will be available at localhost:3000.

The react email will be available at localhost:3001.

✈️ TODO

• Use strict content security policy - still not working in 14.0.4
  • next/image - vercel/next.js#45184
  • nonces - vercel/next.js#54907
  • main-app.js - vercel/next.js#55129

❤️ Credits

This project has been possible thanks to the wonderful open-source community. Special thanks to Timothy for the Tailwind nextjs starter blog template.

✍🏻 Author

• @tszhong0411

✨ Contributors

Thanks goes to these wonderful people (emoji key):

Hong 💻 📖 🎨 🤔 🚧 ⚠️ 🐛 💬 👀

This project follows the all-contributors specification. Contributions of any kind welcome!

🪪 License

This project is open source and available under the GPL3 License.

---

Made with ❤️ in Hong Kong