Eine NEXT.JS -Site, um eine Kunstgalerie mit Google -Tabellenkalkulationen und Google Drive als Backend zu hosten.
Das Projekt kann mithilfe einer Google -Tabelle, die öffentlich angezeigt werden kann, angetrieben werden. Die Demo -Site für dieses Projekt wird hier vom Google Sheet angetrieben. Sie können ein ähnliches Dokument einrichten und von jedem mit dem Link "lesbar" machen.
Das Beispiel -Dokument verwendet Bilder aus dem Web (frei auf pxels.com verfügbar). Sie können jedoch ein Google -Laufwerk verwenden, um die Bilder hochzuladen. Sie können dann entweder ein CDN -wie Cloudinary verwenden, um die Bilder von Google Drive automatisch zu servieren. Oder laden Sie die Bilder auf Ihren Webserver in das Verzeichnis, aus dem Sie die "erstellte" Website bedienen.
Um Ihre Website zu konfigurieren, kopieren Sie die Datei env.local.default
in .env.local
und bearbeiten Sie sie, um auf Ihre Google -Tabelle und Ihr CDN zu verweisen, wenn Sie eine verwenden.
Sie können entweder einen kostenlosen Dienst wie OpenSheet.vercel.app verwenden, um die Tabelle in einen JSON-Endpunkt umzuwandeln, oder das scripts/download-images
Skript verwenden, um die Metadaten als JSON-Datei an public/metadata.json
herunterzuladen. Sie müssen die Konfiguration METADATA_URL
aus der .env.local
-Datei entfernen, wenn Sie die metadata.json
-Datei aus Ihrem public/
Verzeichnis verwenden.
Setzen Sie IMAGE_CDN_PREFIX=""
Wenn Sie lokal heruntergeladene Bilder auf Ihrem Server verwenden. Konfigurieren Sie die Miniaturansichten im Metadata -Dokument, damit Ihre Bilder am Speicherort gefunden werden können - ${IMAGE_CDN_PREFIX}/image/${thumbnail}
. Sie können ein ../
Präfix auf Ihren Miniaturansichten verwenden, wenn Miniaturansichten nicht in einem image
leben.
Entfernen Sie außerdem die Konfiguration FORCE_CDN
, wenn Sie CDN bei der lokalen Entwicklung nicht verwenden möchten.
Mit neueren Versionen von NodeJS (18+?), Wenn Sie den folgenden Fehler treffen:
opensslErrorStack: [ ' error:03000086:digital envelope routines::initialization error ' ],
library: ' digital envelope routines ' ,
reason: ' unsupported ' ,
code: ' ERR_OSSL_EVP_UNSUPPORTED '
Sie können den NODE_OPTIONS
env var festlegen, damit der Legacy OpenSSL -Anbieter.
export NODE_OPTIONS=--openssl-legacy-provider
yarn build
baut den Standort. Und yarn export
würde den Standort an eine statische Stelle exportieren.
Sehen Sie die scripts/
das Verzeichnis von Beispielen an, um festzustellen, wie diese Site bereitgestellt wird. Hier können Sie eine Demo -Site sehen.