Update layout and styles
This commit is contained in:
parent
411e50e173
commit
0784c0dd7a
216
README.md
216
README.md
@ -1,36 +1,210 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
# 📰 Surafino
|
||||
|
||||
## Getting Started
|
||||
Modern **blog / news platform** built with **Next.js (App Router)**, **MariaDB**, **Tailwind CSS**, **PM2 + Nginx**, with full **admin panel**, **authentication**, and **image & video uploads**.
|
||||
|
||||
First, run the development server:
|
||||
---
|
||||
|
||||
## ✨ Features
|
||||
|
||||
- 📰 News & blog posts
|
||||
- ✍️ Rich text editor (bold, italic, images, videos)
|
||||
- 🧑💼 Admin panel (`/manager`)
|
||||
- 🔐 Authentication using JWT (cookies)
|
||||
- 🌙 Light / Dark mode (saved in cookies)
|
||||
- 📱 Fully responsive (mobile & desktop)
|
||||
- 🚀 Production-ready (PM2 + Nginx + SSL)
|
||||
- 🗄️ MariaDB database
|
||||
|
||||
---
|
||||
|
||||
## 🧰 Tech Stack
|
||||
|
||||
- Next.js 16 (App Router)
|
||||
- TypeScript
|
||||
- Tailwind CSS
|
||||
- MariaDB
|
||||
- PM2
|
||||
- Nginx
|
||||
- Let’s Encrypt (Certbot)
|
||||
|
||||
---
|
||||
|
||||
## 📦 Requirements
|
||||
|
||||
- Ubuntu 22.04+ VPS
|
||||
- Root or sudo access
|
||||
- Domain pointing to your VPS IP
|
||||
- Ports **80** and **443** open
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Installation (VPS)
|
||||
|
||||
### 1️⃣ Clone repository
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
git clone https://github.com/YOUR_GITHUB_USERNAME/surafino.git](https://github.com/Jetomit-Bio/Surafino.git
|
||||
cd surafino
|
||||
```
|
||||
2️⃣ Run installer
|
||||
|
||||
```
|
||||
chmod +x installer/install.sh
|
||||
./installer/install.sh
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
The installer will:
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
Install Node.js 20 LTS
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
Install Nginx
|
||||
|
||||
## Learn More
|
||||
Install PM2
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
Install Certbot
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
Create .env
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
Setup MariaDB database
|
||||
|
||||
## Deploy on Vercel
|
||||
Import SQL schema
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
Configure Nginx
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
Generate SSL certificate
|
||||
|
||||
Build and start the app
|
||||
|
||||
🔐 Default Admin Account
|
||||
|
||||
Username: admin
|
||||
Password: admin
|
||||
|
||||
⚠️ Change the password immediately after first login.
|
||||
🌍 Access
|
||||
|
||||
Website:
|
||||
https://yourdomain.com
|
||||
|
||||
Admin panel:
|
||||
https://yourdomain.com/manager
|
||||
|
||||
📁 Environment Variables
|
||||
|
||||
Created automatically during installation in .env:
|
||||
|
||||
```
|
||||
DB_HOST=127.0.0.1
|
||||
DB_PORT=3306
|
||||
DB_USER=your_db_user
|
||||
DB_PASSWORD=your_db_password
|
||||
DB_NAME=your_db_name
|
||||
|
||||
JWT_SECRET=auto_generated_secret
|
||||
APP_URL=https://yourdomain.com
|
||||
```
|
||||
|
||||
❗ .env is ignored by Git and must never be committed.
|
||||
🖼️ Uploads (Images & Videos)
|
||||
|
||||
Uploaded files are stored in:
|
||||
|
||||
public/uploads/
|
||||
|
||||
Nginx serves them directly via /uploads/*.
|
||||
|
||||
Supported formats:
|
||||
|
||||
Images: JPG, PNG, WEBP
|
||||
|
||||
Videos: MP4, WEBM
|
||||
|
||||
🧑💼 Admin Panel
|
||||
|
||||
Available routes:
|
||||
|
||||
/manager
|
||||
/manager/create
|
||||
/manager/edit/:id
|
||||
/manager/users
|
||||
/manager/users/add
|
||||
|
||||
Admin features:
|
||||
|
||||
Create / edit / delete posts
|
||||
|
||||
Upload images & videos
|
||||
|
||||
Manage users
|
||||
|
||||
Logout
|
||||
|
||||
🧠 Development
|
||||
|
||||
Run locally:
|
||||
|
||||
```
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Local URL:
|
||||
|
||||
```
|
||||
http://localhost:3000
|
||||
```
|
||||
🏗️ Production
|
||||
|
||||
Build and start manually:
|
||||
|
||||
```
|
||||
npm run build
|
||||
pm2 start npm --name surafino -- start
|
||||
```
|
||||
|
||||
Check status:
|
||||
|
||||
```
|
||||
pm2 status
|
||||
pm2 logs surafino
|
||||
```
|
||||
|
||||
🔒 SSL (HTTPS)
|
||||
|
||||
SSL is handled automatically using Certbot.
|
||||
|
||||
Manual test:
|
||||
|
||||
certbot renew --dry-run
|
||||
|
||||
🗂️ Project Structure
|
||||
|
||||
```
|
||||
src/
|
||||
├─ app/ # Pages & routes
|
||||
├─ components/ # UI components
|
||||
├─ lib/ # Database & helpers
|
||||
public/
|
||||
└─ uploads/ # Images & videos
|
||||
installer/
|
||||
├─ install.sh
|
||||
└─ database.sql
|
||||
```
|
||||
|
||||
⚠️ Security Notes
|
||||
|
||||
Change default admin credentials
|
||||
|
||||
Never commit .env
|
||||
|
||||
Keep your VPS updated
|
||||
|
||||
Protect /manager routes
|
||||
|
||||
📜 License
|
||||
|
||||
MIT License
|
||||
⭐ Credits
|
||||
|
||||
Created by Surafino
|
||||
Built with ❤️ using Next.js
|
||||
@ -27,5 +27,5 @@ INSERT INTO users (username, email, password)
|
||||
VALUES (
|
||||
'admin',
|
||||
'admin@example.com',
|
||||
'$2a$12$HVH3CnQFDVzWZcgwuz1orejDZ3YUAm6xLHOqhfh5yssNcp2BNr4ky'
|
||||
'$2a$12$V1mDeopHyVF0wZAk5dfEneZPBQGhpgwxaYtvdKEj1ZVRzRTLa9VVq'
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user