Howz.dev screenshot

Howz.dev

Author Avatar Theme by Howznguyen
Updated: 16 Nov 2025
39 Stars

Personal website and blog made using Next.js, TypeScript, Tailwind CSS and Notion

Categories

Overview:

Howz.Dev is a personal website and blog built using Next.js, TypeScript, Tailwind CSS, and Notion. The blog posts are managed in Notion, and the website pulls the content from the Notion API at build time.

Features:

  • Landing page with customizable background image and hero text
  • Blog page with pagination and search functionality
  • Separate pages for each blog post
  • Dynamically generated RSS feed
  • Automatic sitemap generation
  • Notion as a CMS for blog content management
  • Integration with Giscus for comment section

Installation:

To get started with this project, follow these steps:

  1. Clone the repository and install the dependencies.
  2. Copy the .env file to .env.example.
  3. Duplicate the Notion page for the database template.
  4. Obtain the NOTION_API_KEY and database IDs needed to run the project.
  5. Update the .env file with your NOTION_API_KEY and the database IDs for your settings, navigation, footer, and posts databases.
  6. Customize the language content and categories in the home page (optional).
  7. Set up Giscus for commenting functionality (optional).

Summary:

Howz.Dev is a personal website and blog built using Next.js, TypeScript, Tailwind CSS, and Notion. It offers a range of features including a customizable landing page, a blog page with search and pagination, separate pages for each blog post, automatically generated RSS feed and sitemap, and the ability to use Notion as a CMS for blog content management. It also provides integration with Giscus for a comment section. The installation process is straightforward, involving cloning the repository, configuring Notion and Giscus, and updating the .env file with the necessary information.