Install Node.js, LTS: https://nodejs.org/en/download/
Install Eleventy static site generator: https://www.11ty.dev/
npm install -g @11ty/eleventy
Install libvips
Auto-install dependencies (required extra packages). Run this in the repository directory:
npm install
eleventy --serve
This will save the entire site to the _site directory. It will be regenerated every time you modify any file.
Note - quick bash command to list a directory contents to YAML:
gfind . -name "?(*.png|*.jpg|*.gif|*.bmp|*.jpeg|*.PNG|*.JPG|*.GIF|*.BMP|*.JPEG|*.tif|*.tiff|*.TIF|*.TIFF)" -printf ' - webimg: %P\n caption: "Installation Detail"\n'
Content is arranged into either "shows" or "projects." Among other differences, shows have a location and a date, while projects have a date range.
To add a new show from scratch, create a new folder for the show (using the name of the show, dashes instead of spaces) in the root directory. In that folder, create an index.md file. This is a Markdown formatted file that uses YAML within "Front Matter" (a fancy way of saying YAML at the beginning of the file sandwiched between a pair of three dashes).
To add content to the index.md file, it's perhaps easiest to start with an example:
---
pageTitle: Repose
location: The Arts Club of Chicago
artists: Marissa Lee Benedict and David Rueter
date: 2020-06-11
tags: ['shows', 'featured']
images:
- webimg: _DSC4337.jpg
caption: 'Installation overview, Arts Club of Chicago, Chicago, IL, US'
- webimg: _DSC4372.jpg
caption: 'Installation detail'
- webimg: _DSC4330.jpg
caption: 'Installation detail'
- webimg: _DSC4389.jpg
caption: 'Installation detail'
- webimg: _DSC4377.jpg
caption: 'Installation detail'
- webimg: repose-screensaver1.png
caption: 'Installation detail - still frame from screensaver installed on gallery computers'
- webimg: repose-screensaver2.png
caption: 'Installation detail - still frame from screensaver installed on gallery computers'
---
Text describing the work goes here. It can be anything supported by Markdown, including links, additional images, etc.
Edit the pageTitle, location, etc. to fit the new show.
For the images configuration, start by uploading images into the show folder. Use high-resolution images in JPEG, PNG, or TIFF format, using images that are at or above the highest resolution used on the site. These images will be resampled and scaled down for final use, so large images are not a problem.
Then, create an entry for each image as above, including the relative image path in the webimg property and the caption in the caption property. Note the in YAML, the spacing must be consistent, so make sure to use the exact same format.
https://ottverse.com/hls-packaging-using-ffmpeg-live-vod/