Github Issues Blog

Description

This is the blog template that uses Github issues for blog posts and comments.

💻 Live Demo

Features

Visitors can:

• View blog posts
• View blog comments
• Add comments (Github login required)

Admins can (need to login with Github account):

• Create blog posts
• Edit blog posts
• Delete blog posts (Close the issue)
• Add comments

Getting Started

1. Clone the repository

git clone https://github.com/Jim876633/github-issues-blog.git

2. Install dependencies

npm install

3. Configuration

Create a .env.local file in the root directory and add the following environment variables:

ACCESS_TOKEN="YOUR_GITHUB_ACCESS_TOKEN"
CLIENT_ID="YOUR_GITHUB_APPLICATION_CLIENT_ID"
CLIENT_SECRET="YOUR_GITHUB_APPLICATION_CLIENT_SECRET"

Change the userName and repoName in src/constants/common.ts for your own Github issues blog.

// src/constants/common.ts
const userName = "YOUR_GITHUB_USERNAME";
const repoName = "YOUR_GITHUB_REPOSITORY_NAME";

4. Run the development server

npm run dev

The project will be available at http://localhost:3000.

Technologies Used

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS
• zustand
• react-hook-form + zod
• marked

Todo

• Responsive design
• Dark mode
• Search
• Post preview

Structure

📂 src
├─ 📂 api
├─ 📂 app
│ ├─ 📂 about
│ ├─ 📂 blogs
│ │ ├─ 📂 [blogId]
│ │ │ ├─ 📄 error.tsx
│ │ │ ├─ 📄 loading.tsx
│ │ │ └─ 📄 page.tsx
│ │ ├─ 📂 components
│ │ ├─ 📄 blog.module.scss
│ │ ├─ 📄 layout.tsx
│ │ ├─ 📄 loading.tsx
│ │ └─ 📄 page.tsx
│ ├─ 📄 error.tsx
│ ├─ 📄 favicon.ico
│ ├─ 📄 globals.css
│ ├─ 📄 layout.tsx
│ ├─ 📄 not-found.tsx
│ └─ 📄 page.tsx
├─ 📂 assets
│ └─ 📂 img
├─ 📂 components
│ ├─ 📂 button
│ ├─ 📂 skeleton
│ ├─ 📄 Alert.tsx
│ ├─ 📄 LoadingMask.tsx
│ ├─ 📄 Modal.tsx
│ ├─ 📄 Navbar.tsx
│ ├─ 📄 Spinner.tsx
│ └─ 📄 Transition.tsx
├─ 📂 components
├─ 📂 constants
│ ├─ 📄 commons.ts
│ └─ 📄 urls.ts
├─ 📂 hooks
│ └─ 📄 useServerAction.ts
├─ 📂 store
│ └─ 📄 ModalStore.ts
├─ 📂 types
│ ├─ 📄 blogType.ts
│ └─ 📄 userType.ts
└─ 📂 utils

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.