GitHub Issue Blog

Use GitHub issue as your blog.

Example Site: https://github-issue-blog.vercel.app

✨ Features

• Use GitHub issues as your blog storage
• Infinite scroll at home page
• Create / Edit / Delete posts
• SEO Friendly
• Light / Dark theme
• RWD
• Comment Section
• Syntax Highlighting

🚀 Get started

1. Fork this repository
2. Create a GitHub OAuth app with the callback URL: your-site-domain/auth/callback

Note

The OAuth app supports up to 15,000 requests per hour, significantly surpassing the 60 requests per hour limit for unauthenticated requests. This increased capacity enables a higher volume of page views for your site.

3. You can customize the blog with environment variables. Here's an example:

GITHUB_CLIENT_ID="00000000000000000000"
GITHUB_CLIENT_SECRET="0000000000000000000000000000000000000000"
AUTHOR_NAME="Daniel"
BLOG_TITLE="Daniel's Blog"
BLOG_DESCRIPTION="Hi, I'm Daniel, a software engineer from Taiwan. Welcome to my blog!"
NEXT_PUBLIC_OWNER="m4xshen" (your GitHub username)
NEXT_PUBLIC_REPO="example-blog" (the GitHub repository name that you want to store posts in)

If you plan to deploy your site...

• with Vercel: add environment variables in settings
• by yourself: copy above content to .env.local

4. Deploy the site and login to start blogging!

• with Vercel: follow the docs
• by yourself: yarn run build && yarn run start and check out http://localhost:3000

🏗️ Architecture

Tech Stacks

• Web Framework: Next.js (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI: Next UI

Routes

• Home Page: /
• Post Page: /post/{number}
• New Post Page: /post/new
• Edit Post Page: /post/edit/{number}

sequenceDiagram
    Home Page ->> Post Page: Click Post Title
    Home Page ->> New Post Page: New Post
    New Post Page ->> Post Page: Publish
    Post Page ->> Home Page: Delete
    Post Page ->> Edit Post Page: Edit
    Edit Post Page ->> Post Page: Update

Loading

Folder Structure

• app/
  • page.tsx: Home Page
  • [number]/page.tsx: Post Page
  • edit/[number]/page.tsx: Edit Post Page
  • new/page.tsx: New Post Page
  • auth/callback/route.ts: route handler for GitHub OAuth flow
• utils/
  • post.ts: fetch posts / post / comments
  • auth.ts: fetch user, OAuth utils
  • octokit.ts: GitHub OAuth App client
• actions/: server actions
  • post.ts: create / update / delete post
  • auth.ts: login, log out
  • comment.ts: create comment
• hooks/usePosts.ts: get posts with infinite scroll
• components/: UI components
• tests/: Playwright tests