[ARCHIVED] Image Gallery

Simple HTML / CSS / JS image gallery made for my cat and deployed with Docker.

View Demo · Report Bug or · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Serve
4. Build
   • Dockerfile
   • generate_images_json.sh
   • GitHub Actions Workflow
5. Contributing
6. License
7. Contact
8. Acknowledgments

Warning

This project is now migrated to https://github.com/AitorAstorga/image_gallery as part of my new efforts to erase JavaScript from the Earth. Glory to WebAssembly compiled by the grace of the all-powerful Rust!

About The Project

This project is an image gallery application that dynamically generates a JSON list of images from a specified directory. It uses Nginx to serve the content and monitors the images directory for any changes, updating the JSON file accordingly. The application is containerized using Docker and integrated with GitHub Actions for continuous integration and deployment.

(back to top)

Built With

This project is built with the following technologies:

• 
• 
• 
• 
• 

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

• Docker installed on your local machine
• Git installed on your local machine
• A GitHub account with repository access

Installation

1. Clone the repository to your local machine using the following command: git clone https://github.com/AitorAstorga/Image-Gallery.git
2. Navigate to the project directory: cd Image-Gallery
3. Ensure that Docker is installed and running on your machine.

(back to top)

Serve

To use this project with your own GitHub repository, you need to clone the repo, change the docker-image.yml, and configure your GitHub fork with a secret token:

1. Fork the repository on GitHub.
2. Clone your forked repository to your local machine: git clone https://github.com/yourusername/your-forked-repo.git
3. Navigate to the project directory: cd your-forked-repo
4. Make any required changes to the project.
5. In your GitHub repository, go to Settings > Secrets and Variables > Actions.
6. Add a new secret named GHCR_TOKEN using a token generated from GitHub Tokens.

Note

Replace my name in docker-image.yml like so:

# Build the Docker image
- name: Build the Docker image
    run: docker build . --file Dockerfile --tag aichan-image-gallery:latest --tag ghcr.io/your_username/aichan-image-gallery:latest

# Push the Docker image to GHCR
- name: Push Docker images to GHCR
    run: |
    # Push the main app image
    docker push ghcr.io/your_username/aichan-image-gallery:latest

Example to serve the application using Docker:

1. Build the Docker image with the following command: docker build -t aichan-image-gallery:latest .
2. Run the Docker container: docker run -d -p 80:80 aichan-image-gallery:latest
3. Access the application by navigating to http://localhost in your web browser.

(back to top)

Build

The project uses GitHub Actions to automate the building and pushing of Docker images. The workflow is defined in the .github/workflows/docker-image.yml file. On every push or pull request to the main branch, the workflow performs the following steps:

1. Checks out the repository code.
2. Logs in to the GitHub Container Registry using a secret token.
3. Builds the Docker image with the tags aichan-image-gallery:latest and ghcr.io/aitorastorga/aichan-image-gallery:latest.
4. Pushes the Docker images to the GitHub Container Registry.

Dockerfile

The Dockerfile sets up an Nginx server to serve the image gallery. It performs the following actions:

• Uses the latest Nginx image as the base.
• Installs inotify-tools to monitor directory changes.
• Removes the existing HTML directory in Nginx.
• Copies the project repository into the Nginx HTML directory.
• Adds the generate_images_json.sh script to the container and makes it executable.
• Creates a custom entrypoint script that runs the JSON generation script in the background and starts Nginx.
• Exposes port 80 for the Nginx server.

generate_images_json.sh

This Bash script generates a JSON file listing all image files in the images directory. It performs the following functions:

• Scans the images directory for files with extensions .jpg, .jpeg, .png, and .gif.
• Creates or updates the images.json file with the list of image filenames.
• Uses inotifywait to monitor the images directory for any creation, deletion, or movement of image files and regenerates the JSON file upon detecting such events.

GitHub Actions Workflow

The GitHub Actions workflow defined in .github/workflows/docker-image.yml automates the continuous integration process by:

• Triggering on pushes and pull requests to the main branch.
• Checking out the repository code.
• Logging into the GitHub Container Registry using a secure token.
• Building the Docker image with appropriate tags.
• Pushing the Docker image to the GitHub Container Registry for deployment.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the European Union Public License v1.2. See LICENSE for more information.

(back to top)

Contact

Aitor Astorga Saez de Vicuña - [email protected]

Project Link: https://github.com/AitorAstorga/Image-Gallery

(back to top)

Acknowledgments

Thanks to these nice projects!

• Img Shields
• markdown-badges

(back to top)