You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
155 lines
4.2 KiB
Markdown
155 lines
4.2 KiB
Markdown
# S3 Image Gallery
|
|
|
|
A responsive image gallery application built with Astro.js that connects to any S3-compatible storage service to display your images with infinite scrolling. Works with AWS S3, Backblaze B2, MinIO, DigitalOcean Spaces, and other S3-compatible services.
|
|
|
|
## Features
|
|
|
|
- 📱 Responsive design that works on all devices
|
|
- 🔄 Infinite scrolling for seamless browsing of large image collections
|
|
- 🖼️ Optimized image loading with lazy loading
|
|
- 🔒 Secure S3 integration using signed URLs
|
|
- 🔌 Compatible with any S3-compatible storage service (AWS S3, Backblaze B2, MinIO, etc.)
|
|
- ☁️ Ready for deployment on Cloudflare Pages or Cloudflare Workers
|
|
|
|
## Prerequisites
|
|
|
|
- Node.js (v16 or later)
|
|
- An S3-compatible storage bucket with your images
|
|
- Access credentials with permissions to read from the bucket
|
|
|
|
## Supported S3-Compatible Services
|
|
|
|
This application works with any S3-compatible storage service, including:
|
|
|
|
- Amazon S3
|
|
- Backblaze B2
|
|
- MinIO
|
|
- DigitalOcean Spaces
|
|
- Wasabi
|
|
- Linode Object Storage
|
|
- Scaleway Object Storage
|
|
- And many others
|
|
|
|
Each service may have slightly different configuration requirements. The application uses the AWS SDK for JavaScript v3, which supports custom endpoints for S3-compatible services.
|
|
|
|
## Getting Started
|
|
|
|
1. Clone this repository
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
3. Create a `.env` file based on the `.env.example` template:
|
|
```bash
|
|
cp .env.example .env
|
|
```
|
|
4. Fill in your S3 credentials in the `.env` file:
|
|
|
|
```
|
|
# Required for all S3-compatible services
|
|
S3_ACCESS_KEY=your_access_key_here
|
|
S3_SECRET_KEY=your_secret_key_here
|
|
S3_REGION=your_region_here
|
|
S3_BUCKET_NAME=your_bucket_name_here
|
|
|
|
# Optional: For S3-compatible services like Backblaze B2, MinIO, etc.
|
|
# S3_ENDPOINT=https://s3.us-west-000.backblazeb2.com
|
|
# S3_FORCE_PATH_STYLE=true
|
|
```
|
|
|
|
### Using with Backblaze B2
|
|
|
|
For Backblaze B2, you'll need to set the following:
|
|
|
|
```
|
|
S3_ACCESS_KEY=your_application_key_id
|
|
S3_SECRET_KEY=your_application_key
|
|
S3_REGION=us-west-000 # Replace with your bucket's region
|
|
S3_BUCKET_NAME=your_bucket_name
|
|
S3_ENDPOINT=https://s3.us-west-000.backblazeb2.com # Replace with your region
|
|
S3_FORCE_PATH_STYLE=true
|
|
```
|
|
|
|
5. Start the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
6. Open your browser and navigate to `http://localhost:4321`
|
|
|
|
## Testing Your S3 Connection
|
|
|
|
Before running the application, you can test your S3 connection to ensure your credentials are working correctly:
|
|
|
|
```bash
|
|
npm run test:s3
|
|
```
|
|
|
|
This will attempt to connect to your S3-compatible storage service and verify that:
|
|
|
|
1. Your credentials are valid
|
|
2. The specified bucket exists and is accessible
|
|
|
|
If there are any issues, the script will provide helpful error messages to guide you in fixing the configuration.
|
|
|
|
## Building for Production
|
|
|
|
To build the application for production:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
The built files will be in the `dist` directory.
|
|
|
|
## Deployment to Cloudflare
|
|
|
|
This project is configured to be deployed on Cloudflare Pages or Cloudflare Workers.
|
|
|
|
### Deploying to Cloudflare Pages
|
|
|
|
1. Push your code to a Git repository (GitHub, GitLab, etc.)
|
|
2. In the Cloudflare Pages dashboard, create a new project and connect it to your repository
|
|
3. Configure the build settings:
|
|
- Build command: `npm run build`
|
|
- Build output directory: `dist`
|
|
4. Add your environment variables in the Cloudflare Pages dashboard:
|
|
- Required: `S3_ACCESS_KEY`, `S3_SECRET_KEY`, `S3_REGION`, `S3_BUCKET_NAME`
|
|
- For S3-compatible services: `S3_ENDPOINT`, `S3_FORCE_PATH_STYLE`
|
|
5. Deploy your site
|
|
|
|
### Deploying to Cloudflare Workers
|
|
|
|
1. Install Wrangler CLI:
|
|
```bash
|
|
npm install -g wrangler
|
|
```
|
|
2. Login to Cloudflare:
|
|
```bash
|
|
wrangler login
|
|
```
|
|
3. Configure your `wrangler.toml` file with your account ID and other settings
|
|
4. Deploy to Cloudflare Workers:
|
|
```bash
|
|
wrangler deploy
|
|
```
|
|
|
|
## Customization
|
|
|
|
You can customize the appearance of the gallery by modifying the CSS variables in `src/layouts/Layout.astro`:
|
|
|
|
```css
|
|
:root {
|
|
--color-primary: #3498db;
|
|
--color-secondary: #2ecc71;
|
|
--color-text: #333;
|
|
--color-text-light: #666;
|
|
--color-background: #f5f7fa;
|
|
--color-card: #fff;
|
|
--color-border: #e1e4e8;
|
|
}
|
|
```
|
|
|
|
## License
|
|
|
|
MIT
|