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:

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:

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
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'

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

npm run dev

Here’s the updated UI:

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:

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
• Qiita API Documentation
• GitHub Docs
• Vercel Documentation