Inkspire is a modern, open‐source blog management tool built with Next.js, TypeScript, and Tailwind CSS. It provides a two-pane editor (write on the left, preview on the right), along with features like metadata management, S3-based content storage, and SEO-friendly pages. Try it here.
Inkspire was born out of the need to simplify blog editing for everyone—from the seasoned writer to the non-technical user. While many popular editors (like Notion) offer robust rich-text and block-editing experiences, they often fall short when it comes to exporting data efficiently. Here’s how Inkspire sets itself apart:
-
Effortless Editing Experience:
Enjoy a clean, intuitive interface that lets you focus on creating content without getting bogged down by complex formatting tools. -
Seamless Data Management:
Export your content in JSON format, ensuring that your blog data remains portable, flexible, and ready for integration with other platforms or custom workflows. -
Versatile Usage:
Whether you’re looking to store your work for future use, integrate it into your own website, or simply maintain a robust backup system, Inkspire’s flexible data storage and static site capabilities have got you covered. -
Optimized for Performance:
Built with modern frameworks and design principles, Inkspire not only looks great but also ensures a fast, reliable editing experience across devices. -
Empowering Non-Technical Users:
With its easy-to-use interface and powerful export features, Inkspire demystifies blog management, making it accessible for everyone regardless of their technical background.
Inkspire is more than just a blog editor—it’s a tool designed to ignite your creativity and streamline your content creation process, ensuring that your ideas flow freely and your data stays in your control.
- Two-Pane Editor: Rich text or Markdown editor on the left, real-time preview on the right.
- Metadata & SEO: Store blog metadata (title, description, keywords) for better search engine visibility.
- S3 Content Storage: Keeps the heavy JSON content in AWS S3, while metadata resides in a PostgreSQL database (e.g., Neon).
- Simple API: CRUD endpoints for creating, reading, updating, and deleting blogs.
- Responsive Design: Tailwind CSS ensures a mobile-friendly layout.
- Open Source: Easily extend or integrate with your own authentication, DB, or additional features.
- Framework: Next.js 13 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS 4.0
- UI: Ant Design 5.0
- Database: PostgreSQL (hosted on Neon)
- Storage: AWS S3 for blog content JSON
- Editor: Editor.js
- Node.js (v16 or higher recommended)
- Yarn or npm (whichever you prefer)
- PostgreSQL database connection (Neon or local)
- AWS S3 bucket (or another storage solution)
- Clone the repository:
git clone https://github.com/Leo-rq-yu/Blog-Management-System.git
- Install dependencies:
npm install # or yarn install
Create a .env.local file in the root directory (or .env if you prefer) and add the following variables:
# Public domain for your application (e.g., https://yourdomain.com)
NEXT_PUBLIC_DOMAIN=https://yourdomain.com
# Public URL for your CDN (e.g., https://your-cdn-url.com)
NEXT_PUBLIC_CDN_URL=https://your-cdn-url.com
# PostgreSQL connection string (e.g., postgres://username:password@host:port/database)
DATABASE_URL=postgres://user:password@localhost:5432/yourdatabase
# AWS S3 bucket configuration
# The name of your S3 bucket where content will be stored
NEXT_PUBLIC_S3_BUCKET_NAME=your-s3-bucket-name
# AWS S3 region where your bucket is hosted (e.g., us-east-1)
NEXT_PUBLIC_S3_REGION=us-east-1
# AWS credentials for accessing S3 (Keep these secret and add your .env file to .gitignore)
AWS_ACCESS_KEY_ID=your-aws-access-key-id
AWS_SECRET_ACCESS_KEY=your-aws-secret-access-key
Development mode:
npm run dev
# or
yarn devVisit http://localhost:3000 to see the app.
- Go to the Home page (
/). - Click Create New Post (or the “+” card).
- Enter the title, author, tag (folder in S3), and optional description or keywords.
- Once created, you’ll be redirected to the editor page.
- In the Home page, select an existing blog to edit.
- Use the left pane to modify content (Editor.js JSON).
- The right pane updates in real-time to show a preview.
- Update metadata (title, description, etc.) in the top toolbar.
- Click Save to store changes (JSON uploaded to S3, metadata updated in DB).
- From the editor page, change status to
publishedor click a Publish button. - The blog’s metadata updates in the DB with a
published_attimestamp. - The published blog can be displayed on a public route if you integrate a front-facing page.
.
├─ src/
│ ├─ app/
│ │ ├─ page.tsx # Home / Dashboard
│ │ ├─ layout.tsx # Global layout (App Router)
│ │ ├─ api/
│ │ │ ├─ blogs/
│ │ │ │ └─ route.ts # API endpoints (GET/POST)
│ │ │ └─ ... # More routes
│ │ ├─ editor/
│ │ │ └─ [id]/
│ │ │ └─ page.tsx # Editor page
│ ├─ components/ # Components
│ ├─ lib/ # Types
| ├─ styles/ # Style sheets of preview and editor panes
| ├─ utils/ # Utility function & EditorJS configurations
│ └─ ...
├─ public/
│ └─ ... # Static assets
├─ .env.example # Example environment variables
├─ README.md
├─ LICENSE
├─ package.json
└─ ...
Contributions are welcome! Please open an issue or submit a pull request:
- Fork this repository.
- Create a new branch:
git checkout -b feature/my-feature. - Make your changes and commit:
git commit -m 'Add new feature'. - Push to the branch:
git push origin feature/my-feature. - Open a Pull Request.
This project is licensed under the MIT License – see the LICENSE file for details.
- Next.js for the React framework and App Router.
- Tailwind CSS for rapid UI styling.
- Neon for hosting PostgreSQL.
- AWS S3 for content storage.
- Editor.js for the core editing experience.
Thank you for using Inkspire. Feel free to share feedback, report bugs, or suggest new features! Enjoy creating and managing your blogs.