A web application that turns your blog content into professionally formatted Markdown — ready to publish on GitHub Gists or any Markdown-supported platform.
Gist Blog Generator provides a structured form-based interface for composing blog posts. Fill in your title, introduction, body sections, conclusion, and author details — then generate clean, publication-ready Markdown in one click. The output includes a table of contents, author bio, social links, and a call-to-action footer, all formatted consistently.
It's designed for developers and writers who publish technical content on GitHub Gists and want to skip the manual Markdown formatting.
- Structured input form — Dedicated fields for title, author, cover image URL, introduction, body sections, conclusion, and author bio
- Dynamic sections — Add as many content sections as needed; each gets its own title and body
- Auto-generated table of contents — Built automatically from your section titles, with anchor links
- Real-time Markdown preview — Switch between the Input and Preview tabs to see your output as you write
- One-click copy — Copy the generated Markdown to clipboard directly from the preview
- Social links in output — Twitter, LinkedIn, and GitHub links are woven into the author footer
- Responsive design — Works across desktop and mobile viewports
| Technology | Purpose |
|---|---|
| Next.js 15 | React framework, static export |
| React 18 | UI component model |
| TypeScript 5 | Type safety |
| Tailwind CSS 3 | Utility-first styling |
| shadcn/ui | Pre-built accessible components |
| Radix UI | Headless UI primitives (Tabs, Toast, Label) |
| Lucide React | Icon library |
| pnpm | Package manager |
-
Clone the repository:
git clone https://github.com/XynoxTheDev/Gist-Blog-Generator.git cd Gist-Blog-Generator -
Install dependencies:
pnpm install
-
Start the development server:
pnpm dev
-
Open your browser and visit
http://localhost:3000
| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production (static export) |
pnpm start |
Start production server |
pnpm lint |
Run ESLint |
pnpm deploy |
Build and deploy to GitHub Pages |
- Fill in the blog details — Enter your blog title, author name, and an optional cover image URL.
- Write your content — Add an introduction, then fill in the body sections. Each section has a title and content field.
- Add more sections — Click Add Section to insert additional content blocks as needed.
- Write your conclusion — Fill in the conclusion field and your author bio.
- Add social links — Enter your Twitter handle, LinkedIn URL, and GitHub username — these appear in the generated footer.
- Generate Markdown — Click the Generate Markdown button in the footer.
- Preview the output — Switch to the Preview tab to see the formatted Markdown.
- Copy and publish — Click the copy button, then paste into a new GitHub Gist or any Markdown editor.
src/
├── app/
│ ├── blog-markdown-generator.tsx # Main generator component (form + preview + logic)
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Entry page
├── components/
│ └── ui/ # shadcn/ui components
│ ├── button.tsx
│ ├── card.tsx
│ ├── input.tsx
│ ├── label.tsx
│ ├── tabs.tsx
│ ├── textarea.tsx
│ ├── toast.tsx
│ └── toaster.tsx
├── hooks/
│ └── use-toast.ts # Toast notification hook
└── lib/
└── utils.ts # Utility functions (cn helper)
Contributions are welcome! To contribute:
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature-name
- Commit your changes:
git commit -m 'Add your feature' - Push to your branch:
git push origin feature/your-feature-name
- Open a Pull Request
Please ensure your code passes linting (pnpm lint) before submitting.
This project is licensed under the Apache License 2.0. See the LICENSE file for details.
Arindam Hazra (XynoxTheDev)
- GitHub: @XynoxTheDev
- Email: connect@xynoxthedev.xyz