punchagan / artful-dodger

A Next.js site to host an art gallery using Google Spreadsheets and Google Drive as a backend

The Artful Dodger

A Next.js site to host an art gallery using Google Spreadsheets and Google Drive as a backend.

Setup

Data Backend

The project can be powered by using a Google Spreadsheet that is viewable publicly. The demo site for this project is powered by the Google Sheet here. You can setup a similar document and make it "readable" by everyone with the link.

The example document uses images from the web (freely available on Pexels.com). But, you can use a Google Drive to upload the images. You can then either use a CDN like Cloudinary to automatically serve the images from Google Drive. Or download the images onto your web server into the directory from where you are serving the "built" site.

Configuration

To configure your site, copy the .env.local.default file to .env.local and edit it to point to your Google Spreadsheet and your CDN, if you are using one.

You can either use a free service like opensheet.vercel.app to convert the spreadsheet to a JSON end-point, or use the scripts/download-images script to download the metadata as a json file to public/metadata.json. You need to remove the METADATA_URL configuration from the .env.local file if you with to use the metadata.json file from your public/ directory.

Set IMAGE_CDN_PREFIX="" if you are using locally downloaded images on your server. Configure the thumbnails in the metadata document so that your images can be found at the location -- ${IMAGE_CDN_PREFIX}/image/${thumbnail}. You can use a ../ prefix on your thumbnails, if thumbnails don't live in an image directory.

ALso, remove the FORCE_CDN configuration, if you wish to not use CDN when developing locally.

Build & Deploy

yarn build builds the site. And yarn export would export the site to a static site.

See sample deploy scripts in the scripts/ directory to see how to deploy this site. You can see a demo site here.