Website with an image gallery, built on Jekyll and the Aperture theme
A simple elegant template for an artist to use a portfolio website - in particular this includes a responsive image gallery that uses automatically resized thumbnails and lets you click to see a larger version of the image.
If you like the demo site (which has placeholder content), then click Use this template to add a copy to your own projects.
Note: This uses Jekyll 4 and a custom gem, so will not work on GitHub Pages without GH Actions. But it will work on Netlify, like the demo does.
This project is a customized version of the Aperture template by CloudCannon. See the original repo: CloudCannon/aperture-jekyll-template.
- Ruby
- Jekyll 4
- GraphicsMagick
These instructions are netlify.com to host. The config can be found as netlify.toml and needs no configuration.
- Add this project to your own repos using Use this template button.
- Create a Netlify account.
- Add your repo to Netlify sites.
- Wait for it to build.
- Change to a URL that is more friendly than the random one.
Customize your repo. When you commit and push changes, the site will rebuild.
Install GraphicsMagick for your own OS - instructions.
Install Ruby and Bundler - instructions.
Install gems with this command, which is defined in Makefile.
$ make installFor more details, optionally see this gist to Install gems with Bundler.
Start a local dev server
$ make serveSee the Makefile for build commands.
How to use this repo after you've added it your projects.
Update the URL in _config.yml with your own place (no trailing forward slash) - this will ensure that the sitemap.xml file uses the correct domain.
Upload images to the uploads directory. Those they will not appear in the gallery yet.
Make changes to the _data directory - choose images to show as well as order and label, change content for other pages and the update navbar.
Add or remove pages in the root of the project - update the navbar file to ensure your pages are visible in the menu.
The hover effect comes from gallery style in layout.scss.
To prevent loading full size images on the gallery, we use this gem to generate thumbnails:
That is my fork an existing gem, with added support for Jekyll 4 so that I can use it on Jekyll 4 sites like this one.
The original setting of the Aperture theme uses 800x800 images - going smaller than that works for desktop but causes issues when viewing on mobile and the image fills the screen.
For SEO settings, see:
Released under MIT.
See the source license.
If you reuse this project (such as fork or generate from template) or copy a large portion, you must include these licenses.
Please include a link make to this repo in your site or docs.