---
title: Personal Blog
emoji: 📝
colorFrom: blue
colorTo: purple
sdk: docker
pinned: false
license: mit
---
# 📝 Personal Blog
A clean, minimalist blog platform for sharing articles, code snippets, and engaging with readers through comments.
## ✨ Features
- 📰 **Article Publishing** - Write and publish blog posts with Markdown support
- 💻 **Code Snippets** - Share code examples with syntax highlighting
- 💬 **Comments System** - Readers can leave comments on your articles
- 🌓 **Dark/Light Mode** - Toggle between themes with persistent preference
- 🎨 **Minimalist Design** - Clean, distraction-free reading experience
- 🏷️ **Tag Organization** - Organize content with tags
- ⚡ **Fast & Lightweight** - Built with FastAPI and vanilla JavaScript
- 📱 **Responsive** - Works beautifully on all devices
## 🚀 Live Demo
Visit the blog: [Click "App" tab above]
Access admin panel: Add `/admin.html` to the URL
## 🛠️ Tech Stack
- **Backend**: FastAPI
- **Storage**: JSON files (persistent)
- **Frontend**: Vanilla JavaScript, HTML5, CSS3
- **Markdown**: Marked.js
- **Syntax Highlighting**: Highlight.js
## 📖 How to Use
### For Readers
1. Browse articles on the homepage
2. Click any article to read the full content
3. Leave comments at the bottom of articles
4. Toggle dark/light mode with the 🌙/☀️ button
5. View code snippets in the "Code Snippets" tab
### For Authors (You!)
#### Option 1: Admin Panel (Easiest)
1. Navigate to `/admin.html`
2. Use the web interface to:
- Create new articles
- Add code snippets
- Preview content before publishing
- Manage existing articles
#### Option 2: API (Programmatic)
Create articles via API:
```python
import requests
BLOG_URL = "YOUR_SPACE_URL"
article = {
"title": "My First Post",
"slug": "my-first-post",
"content": "# Hello World\n\nThis is my first blog post!",
"excerpt": "Introduction to my blog",
"tags": ["introduction"],
"published": True
}
requests.post(f"{BLOG_URL}/api/articles", json=article)
```
Or using curl:
```bash
curl -X POST YOUR_SPACE_URL/api/articles \
-H "Content-Type: application/json" \
-d '{
"title": "My Post",
"slug": "my-post",
"content": "# Content here",
"published": true
}'
```
#### Option 3: Direct File Edit
Edit `data/articles.json` directly in the Files tab.
## 📚 API Documentation
Interactive API docs available at `/docs`
### Main Endpoints
- `GET /api/articles` - List all published articles
- `GET /api/articles/{slug}` - Get single article
- `POST /api/articles` - Create new article
- `PUT /api/articles/{id}` - Update article
- `DELETE /api/articles/{id}` - Delete article
- `GET /api/snippets` - List code snippets
- `POST /api/snippets` - Create snippet
- `GET /api/articles/{id}/comments` - Get article comments
- `POST /api/articles/{id}/comments` - Add comment
## ✍️ Writing in Markdown
Articles support full Markdown syntax:
```markdown
# Heading 1
## Heading 2
**Bold** and *italic* text
- Bullet points
- Another point
1. Numbered lists
2. Second item
[Links](https://example.com)
`inline code`
```python
# Code blocks with syntax highlighting
def hello():
print("Hello World!")
```
> Blockquotes
```
## 🎨 Customization
### Update Your Info
Edit `static/index.html`:
```html
Your Name Here
Your Title/Description
```
### Change Colors
Modify CSS variables in `static/index.html`:
```css
:root {
--accent: #0066cc; /* Change accent color */
--bg-primary: #ffffff;
--text-primary: #1a1a1a;
}
```
Popular color schemes:
- Blue: `#0066cc` (default)
- Red: `#ff6b6b`
- Green: `#4ecdc4`
- Purple: `#9b59b6`
- Orange: `#f39c12`
## 💾 Data Storage
All data is stored in JSON files in the `data/` directory:
- `articles.json` - Blog posts
- `snippets.json` - Code snippets
- `comments.json` - Reader comments
**Important**: These files persist across Space restarts. Download them periodically for backup.
## 📁 Project Structure
```
.
├── app.py # FastAPI backend
├── requirements.txt # Python dependencies
├── Dockerfile # Container configuration
├── README.md # This file
├── static/
│ ├── index.html # Main blog interface
│ └── admin.html # Admin panel
└── data/
├── articles.json # Articles storage
├── snippets.json # Snippets storage
└── comments.json # Comments storage
```
## 🔒 Security Notes
This is a simple blog without authentication:
✅ **Anyone can**:
- Read articles
- View snippets
- Post comments
⚠️ **No protection for**:
- Creating/editing articles via API
- Deleting content via API
**For production**: Consider adding:
- API key authentication
- Rate limiting
- Comment moderation
- CAPTCHA for comments
## 🚀 Deployment
This blog is deployed on HuggingFace Spaces using Docker.
To deploy your own:
1. Fork this Space or create a new one
2. Choose "Docker" as SDK
3. Upload all files
4. Wait for build to complete
5. Your blog is live!
## 🤝 Contributing
Feel free to:
- Report bugs via the Community tab
- Suggest features
- Share your customizations
- Fork and improve!
## 📝 Example Articles
Sample article JSON:
```json
{
"id": 1,
"title": "Getting Started with Python",
"slug": "getting-started-python",
"content": "# Python Basics\n\nPython is easy to learn...",
"excerpt": "Introduction to Python programming",
"tags": ["python", "tutorial"],
"published": true,
"created_at": "2024-01-20T10:00:00",
"updated_at": "2024-01-20T10:00:00"
}
```
## 🎯 Roadmap
Planned features:
- [ ] RSS feed generation
- [ ] Full-text search
- [ ] Article series/collections
- [ ] Social sharing buttons
- [ ] Reading time estimates
- [ ] View counters
- [ ] Email notifications for comments
- [ ] Markdown export/import
## 📄 License
MIT License - feel free to use this for your personal blog!
## 🙏 Credits
Built with:
- [FastAPI](https://fastapi.tiangolo.com/)
- [Marked.js](https://marked.js.org/)
- [Highlight.js](https://highlightjs.org/)
- [HuggingFace Spaces](https://huggingface.co/spaces)
## 📧 Support
If you have questions or need help:
- Check the `/docs` endpoint for API documentation
- Visit the Community tab
- Review the admin panel at `/admin.html`
---
**Happy Blogging!** ✨
Start writing your first post in the admin panel or via the API.
---
## Quick Start Checklist
- [ ] Customize your name in `static/index.html`
- [ ] Write your first article via `/admin.html`
- [ ] Add a code snippet
- [ ] Test dark mode toggle
- [ ] Share your blog URL
- [ ] Backup your `data/` folder
- [ ] Start writing regularly!
**Your blog is ready to go!** 🚀