Project Overview
Static Blog Editor is a full-stack visual blog editor designed specifically for static site generators (such as Astro, Hugo, Jekyll, Eleventy, Gatsby, etc.). Through GitHub OAuth authentication, it allows you to create, edit, and publish blog posts via a modern web interface without manually editing files.
Why Build This Project?
Previously tried Keystatic as a CMS for my blog, but found it cumbersome to configure and the user experience wasn’t great. So I decided to build my own, creating a simpler and more user-friendly blog editor.
Core Features
- GitHub Integration - OAuth authentication, manage blog content directly through GitHub API
- Visual Editor - BlockNote-based Markdown editor with real-time preview
- Image Processing - Drag-and-drop upload with automatic image optimization
- Auto-save Drafts - Automatically save drafts locally while writing, no content loss even if you accidentally close the page
- Dark Mode - Full dark theme support
- Responsive Design - Optimized for both desktop and mobile devices
Tech Stack
Backend
- FastAPI (Python 3.11+)
- PyGithub for GitHub API interactions
- Pillow for image optimization
- Pydantic for data validation
Frontend
- Next.js 14 (App Router)
- TypeScript & React 18
- shadcn/ui component library
- TailwindCSS
- Zustand state management
- TanStack React Query
Quick Start
# Backend
cd blog-editor-api
pip install -r requirements.txt
uvicorn app.main:app --reload --port 8000
# Frontend
cd blog-editor-web
npm install
npm run devLicense
MIT License