Lightning-Fast! Building a Qiita Article Listing Site with Cursor + GitHub + Vercel

## Introduction

This article shares my experience creating and deploying a personal website that displays a list of my Qiita articles, using **Cursor**, a next-generation AI-powered editor, integrated with **GitHub** and **Vercel**. Even those with little or no development experience can build a product quickly and easily—this is the main point of the post.

The tools and services used in this project are:

* **Cursor**: An AI-powered editor that supports natural language programming
* **GitHub**: Source code management
* **Vercel**: Deployment and hosting
* **Qiita API**: To fetch article data from Qiita

## Development Workflow

1. Create a Next.js project using Cursor
2. Generate code that fetches articles using the Qiita API
3. Implement design, search, and pagination features
4. Push the code to GitHub
5. Auto-build and publish using Vercel

## Step 1: Creating the Project

First, create a Next.js project using the following command:

```bash
npx create-next-app@latest .
```

With Cursor, even this step can be done using natural language: just type something like "Create a new Next.js project," and Cursor will take care of the rest.

In this article, we are updating an existing project. The initial setup process will be described in another post.

Here’s a screenshot of the personal website I’m building experimentally:
![MySite.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/cb8d113a-e515-430e-9729-1c59245c38b9.jpeg)

## Step 2: Connecting to the Qiita API

I used Qiita’s official API to retrieve articles from my account. I simply asked Cursor:

```
Write an API client that uses my Qiita access token to fetch my posted articles.
```

Cursor generated the code in a file like `lib/qiita.ts`.

### Getting Your Qiita Access Token

1. Log in to Qiita
2. Go to the [Access Token Creation Page](https://qiita.com/settings/applications)
3. Specify the required scopes and generate a token
4. Add the token to `.env.local`. The key name can be anything you prefer:

```
QIITA_ACCESS_TOKEN=your_token_here
```

## Step 3: Building and Styling the Article List

Create a new file `pages/articles.tsx` to display the article title, tags, and post date. Tailwind CSS was used for styling.

* Podcast-style card layout for each article
* Search feature by title and tag
* Pagination (10 articles per page)
* Responsive design for mobile devices

You can implement all of these just by telling Cursor what you want.

In this case, I asked for a layout and search feature similar to my existing podcast page. ":
"Please change the layout and embed a search function like 'Podcast page'
![prompt02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/cd58f723-08f4-4d7e-99d0-9630e72813e5.jpeg)

After the changes, I checked the local development environment using:

```bash
npm run dev
```

Here’s the updated UI:
![After.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/d0b51232-9eef-4589-8168-ad690d23f649.jpeg)

## Step 4: Publishing with GitHub and Vercel

Once development is complete, push your code to GitHub. Be sure not to include sensitive files like `.env.local`.

Instead, register the environment variable on Vercel:

1. Open your Vercel project page
2. Navigate to "Settings" → "Environment Variables"
3. Add `QIITA_ACCESS_TOKEN`

This will trigger Vercel to build and deploy your site automatically after each push to GitHub.

By the way, you can even let AI summarize your changes for Git commit messages:

![GitCommitComment.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457682/e40f42cf-2a26-4012-929b-466d15e263bf.jpeg)

### When Errors Occur

If the articles don’t show up, it’s likely that the environment variable wasn’t set on Vercel. Check the error messages and trigger a rebuild after setting the variable.

## Step 5: Auto-Updates and Notes

* Use `getStaticProps` to update articles every hour (ISR)
* Qiita API requires an access token
* Make sure `.env.local` is included in `.gitignore`

## Conclusion

With Cursor, even beginners can build web apps through natural language conversations. Integration with the Qiita API is simple, and the CI/CD flow with GitHub and Vercel is smooth and seamless.

Thanks to generative AI, web development has become truly effortless.

## Reference Links

* [Cursor Official Website](https://www.cursor.so/)
* [Qiita API Documentation](https://qiita.com/api/v2/docs)
* [GitHub Docs](https://docs.github.com/)
* [Vercel Documentation](https://vercel.com/docs)