A simple site builder, informed by file structure.
It's my hope that this static site builder will make it painless for photographers looking to build a simple, elegant portfolio to publish their work online.
Following the guide below, which requires very little coding knowledge. Simply add your own folders/subfolders and photos to create your site structure, then run the required npm commands to build your site.
npm i --legacy-peer-deps from the root folder to build the required packages. Run
gatsby develop afterwards to build the site locally.
Designed for mobile
Designed to respond to browser window size, the site helps your photos look their best whether on mobile or widescreen. Using masonry, the layout adjusts dynamically to fit your images.
To avoid writing the same copy, many times over, ReactPhoto will extract EXIF/IPTC information which is commonly added during the post-processing stage, meaning all of your information can be stored in the image file itself.
Includes light and dark color themes, which adjust automatically based on site visitor preferences.
ReactPhoto is currently being used to power my own photo site, bryPhoto. I will keep this updated as development continues.
Grab this project and install dependencies using Node Package Manager.
Firstly, you'll need to create a new folder in the src of this project called
media. This folder, and its subfolders/files will create your site structure.
Any files in
media root will be ignored. Any folders will create top-level-navigation, with subfolders and images creating subnavigation and photo pages. To an extent, the site will mirror your folder structure.
Navigation and URLs are generated from folder and file names.
EXIF metadata is supported, displaying the following attributes when available:
Additionally, you can use IPTC metadata add a description (using the
You can edit the
config file in
src/data/config.json to customise your information - including site title, author and social media info. You can also choose whether to aggregate photos to a single navigation link (
aggregateGallery) - this is the default and recommended when listing multiple albums.
To change the site colors, you can edit the
themes file in
src/styles/themes.css. If you like, you can supply your own colours using hex/rgba values respectively. Please note, there is a light (default) and dark theme, and your own color values should contrast sufficiently for legibility.
You should also update the markdown in the
About page, via
src/data/about.mdx, supplying your own description text here. Images can be updated by replacing those in
src/images/about. Please note: this previously used a separate markdown file, but has since stopped working following updates from Gatsby. I might address this in a future release.
Included photos are for demonstration purposes only, and were taken and owned by Bryan McDowall. Redistribution and alteration is denied without express permission.
Thanks to Finn Scott for direct contributions to the original release of ReactPhoto. Thanks also to Thomas Philips for assistace with RegEx queries.