Material-UI based image blog powered by Gatsby. Live on blog.mohoff.de
- Gatsby generates various image representations of different resolutions and formats at build time. Per default, jpgs are converted to more space-efficient webp files and base64 image representations are generated. Both techniques helps fast and progressive loading of images with blur-effect.
- No database required as image metadata is stored in sidecars.
- Endpoint
/random
loads a random image on each page refresh.
- Copy new images to
/data
- Optional: Normlize new images
- Run
yarn init
, which create a sidecar (.md file) for each new image - Edit the generated sidecars to add meta data such as title, tags, and a timestamp to your images
This process can be used for an empty and non-empty /data
directory.
In development mode (hot reloading):
yarn start
In production mode:
yarn start:prod
The Dockerfile
can be used to dockerize this app. Some useful commands:
docker build --tag index.docker.io/mohoff/photo-blog:latest .
docker push mohoff/photo-blog:latest
docker run -p 8000:8000 mohoff/photo-blog:latest
yarn test
yarn lint
yarn lint:fix // Auto-fixes issues where applicable