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
• 📝 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
• 🏠 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.x
• 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