notion-web — Next.js 博客模板

SHA-256: 9288f7fe818928a7a42520725d04c2e883164f6028f805ad9f13f5b3e40e7d7a

2026-10-13T20:10:36.605Z

# Khuong Lu - Personal Website and Blog

![](https://img.shields.io/github/issues/minhkhuong2404/notion-web?color=0088ff)
![](https://img.shields.io/github/languages/top/minhkhuong2404/notion-web)
![](https://img.shields.io/github/manifest-json/v/minhkhuong2404/notion-web)
![](https://img.shields.io/github/discussions/minhkhuong2404/notion-web)
![](https://img.shields.io/github/deployments/minhkhuong2404/notion-web/production)
![](https://img.shields.io/website?down_color=red&up_message=running&url=https%3A%2F%2Fwww.luminhkhuong.edu.vn)
![](https://img.shields.io/github/last-commit/minhkhuong2404/notion-web)

💠 This is my 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.

## Notable 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

## Setup & Config
To get started with this project, follow these steps:

To get started with this project, you can clone the repository and install the dependencies:
```bash
git clone https://github.com/minhkhuong2404/notion-web.git
cd howz.dev
npm install
```

Copy the .env file to .env.example:
```bash
cp .env .env.example
```
### Notion Database Setup

You can duplicate the Notion page for database template [here](https://luminhkhuong.notion.site/Blog-Template-d79d594e2dd14a1ab4b0f6b324c1cae8). 

Once you have your own duplicate page, you can get the `NOTION_API_KEY` and database IDs needed to run the project. To get your `NOTION_API_KEY`, follow these steps:

1. Go to your [Notion integrations page](https://developers.notion.com/docs/getting-started#step-2-share-a-database-with-your-integration).
2. Click on the "Create new integration" button.
3. Give your integration a name and click the "Submit" button.
4. You'll now see your integration listed on the page. Click on the integration's name.
5. You should now see your integration details page. You can find your `NOTION_API_KEY` under the "Internal Integration Tokens" section.

To add your app into page, folow these steps:
1. Open your duplicated database in Notion.
2. Click on the three dots in the top-right corner of the page.
3. Then you selecting "Add connections" and choosing your app name.

To get the database IDs, follow these steps:

1. Open your duplicated database in Notion.
2. Click on the three dots in the top-right corner of the page.
3. Click on "Copy link URL."
4. You should see the database ID in the URL. It's the long string of characters between the last two forward slashes.

Update the `.env` file with your `NOTION_API_KEY` and the database IDs for your settings, navigation, footer, and posts databases. Use the `.env.example` file as a guide.

### Giscus Setup

To enable commenting functionality using Giscus, you need to set up a repository and obtain a repository ID. You can find more information on the [Giscus website](https://giscus.app/).

1. Sign up for a Giscus account and create a new site.
2. Choose the "GitHub Discussions" option as your comment platform.
3. Configure your site by providing your GitHub repository information and choosing a category name.
4. In your `.env` file, add the following variables with the values for your Giscus site:

```env
GISCUS_REPO=username/repository
GISCUS_REPO_ID=repository-id
GISCUS_CATEGORY=category-name
GISCUS_CATEGORY_ID=category-id
```

### Running the Project

To run the project, you can use the following command:
```bash
npm run start:all
```

The project will be available at [http://localhost:3000](http://localhost:3000).