A Next.js site to host an art gallery using Google Spreadsheets and Google Drive as a 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.
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.
With newer versions of Nodejs (18+?), if you run into the following error:
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
you can set the NODE_OPTIONS
env var to allow the legacy openssl provider.
export NODE_OPTIONS=--openssl-legacy-provider
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.