noobgallery is a static photo gallery powered by lightgallery.js. It can be deployed to Amazon S3, which allows a huge amount of storage. (around $0.02/GB per month).
You can see noobgallery in action at https://wanderingnoobs.com.
noobgallery uses Amazon S3 to host images. You'll need to:
- Create an Amazon S3 bucket.
- Set the bucket to be publicly readable.
- Enable static website hosting on the bucket, use
index.htmlas the index document. Note the bucket URL.
- Create an IAM user with AmazonS3FullAccess permission programatic access to the S3 bucket and get the Access key id and secret access key.
.env file with the following variables:
GALLERY_TITLE=Your Gallery Name GALLERY_DESCRIPTION=Photos by a noob GALLERY_LOCAL_PATH=~/path/to/your/gallery/root AWS_REGION=us-east-1 AWS_BUCKET=yourbucketname AWS_ACCESS_KEY=YOUR_AWS_ACCESS_KEY AWS_SECRET_ACCESS_KEY=YOUR_AWS_SECRET KEY USE_INDEX_FILE=true FORCE_HTTPS=false GOOGLE_ANALYTICS_ID=YOUR_GOOGLE_ANALYTICS_ID SHOW_CREATED_DATE=true FOOTER_HTML=© 2019 <a href="https://yourwebsite.com">A great photographer</a>
Create a folder to contain all your galleries, and then a folder for each gallery. The name of the folder will be the name of the gallery, with underscores converted to spaces.
Galleries will be sorted by
createDate from the image EXIF data.
If you want to specify which image should be the cover representing an entire gallery, name it
cover.jpg. This is optional, if no file named
cover.jpg is found it will use the first image chronologically.
Example directory structure:
gallery_root_folder ├── favicon.ico ├── new_york │ ├── cover.jpg │ ├── file2.jpg │ └── file3.jpg └── barcelona ├── file1.jpg ├── file2.jpg └── file3.jpg
Optionally, you can include a
favicon.ico file in your gallery root folder.
If an image has an XMP
Title set, this will be used as the photo title. The XMP
Description will be used as the photo description. If this information isn't set, no title or description will be show.
Want to add metadata to a photo manually with the command line? Use exiftool to do:
exiftool -XMP:Title="The Eiffel Tower" -XMP:Description="A nice description of this" /path/to/your/image.jpg
Preprocessing and running locally
A preprocessing and publishing task is included that takes a folder of folders that contain images and preps them and uploads them to Amazon S3 for use on a gallery website.
It creates resized versions of all photos that are 3000px wide in a subfolder called
large, 800px wide in a subfolder called
medium and 200px wide in a subfolder called
thumbs. It also summarizes each folder as a JSON file called
index.json with image metadata and paths to images.
To run the preprocessing task:
npm run build
.env file is has the correct variables, images will be processed locally and moved to the
./build folder inside of this project.
To run locally
Open http://localhost:5000 in your browser.
You can deploy the site to Amazon S3 with:
npm run deploy
This will work as long as you specify your AWS S3 credentials in a
After publishing, you can view your gallery using the AWS S3 URL you set up, which can be a custom domain name that you own. See more about static hosting with Amazon S3.
If you want cleaner URLs, you can set up Amazon CloudFront CDN and setup a Lambda@Edge function to set subdirectory indexes. If you do this, you can set
USE_INDEX_FILE to false in the
.env file and
index.html will be removed from all links.