Making static sites with Glitch and 11ty: Image gallery

Image may be NSFW.
Clik here to view.

Having your own website is great. You can use it to introduce yourself to the world, talk about your hobbies, show off your work achievements, promote causes you care about, and many other things.

And you really can keep your site as simple as you want it to be. It is your website after all!

So in this short tutorial, I will walk you through setting up simple image gallery that you can use as your online portfolio. I will also show you how to “verify it” on your fediverse profile page.

A short video clip showing a grid of images. After clicking one of the images, it opens up in a popup for a closer view.

We’re going to be using one of my favorite webmaking tools, Glitch, which has a generous free plan. You can follow this tutorial without signing up, if you want to try things out, but you will need to create an account if you decide to keep your website, otherwise it will automatically delete after a few days.

We’ll be using a starter template project I made with the “simpler static site generator” 11ty, Bootstrap, and Photoswipe. But don’t worry, you don’t need to know much about any of these. The only thing you need to do is to upload your images, and update a JSON file, which is a format for storing data. Everything else will be taken care of automatically for you — and you can always jump into the source code later to customize things, if you’d like.

We’ll start by creating a “remix” of my gallery app, so click here to do that. This will basically create a copy of my original project that we can now update and customize.

Once you do that, your remixed app will open in an editor, together with a preview of your page.

Image may be NSFW.
Clik here to view.

(If you don’t see the preview, click the Preview button in the bottom right corner.)

We’ll start by uploading a few pictures to the Assets folder in the left sidebar. Keep in mind that Glitch has a 512MB total limit, and 256MB per-file limit for uploaded assets.

Next, we’ll update two files that you can find in the sidebar.

First, let’s open up _data/images.json. Here we’ll keep a list of images we want to display in our gallery. All we need is the name of each image, title that shows up when an image is being viewed, and a description for vision-impaired people and those with poor internet connection who might not see your images.

[
  {
    "name": "la-lutte-continue.jpg",
    "title": "La lutte continue.",
    "description": "An stylized illustration of a fist rising from a factory chimney, in red."
  },
  {
    "name": "all-power-to-the-people.jpg",
    "title": "All power to the people.",
    "description": "A stark black drawing of a raised clenched fist on a white background. The text 'All power to the people' surrounds the fist above and below it."
  },
//...
]

And finally, inside _data/images.json, let’s customize a few things about our gallery page. Here we can change the title of the website, and whether it shows up in a navigation bar on top of the page. We can also add a custom thumbnail and a description of the thumbnail image that will show up when your gallery is shared on social media. (You can also use the Assets folder for this!)

Then there is the header text, and text that shows up before and after the gallery.

And we can also add links to our various social media pages.

Here’s a little bonus for those of you with a fediverse account. If you want to use a Mastodon icon, fill out the “mastodon” link. Or you can go for a generic fediverse logo if you use a different platform, or if you prefer this. Additionally, if you add your fediverse_username and you are on Mastodon, with one extra step you can show an author badge whenever someone shares a link to your gallery.

And you can also add this page to your profile as a verified link!

Image may be NSFW.
Clik here to view.

(Works for Mastodon, Friendica, and a few other platforms.)

And we’re done! Those more adventurous ones may enjoy looking through the rest of the source code of this project and play with it a bit to change the styles or add more elements. And if you’d like to use this as an opportunity to learn more about HTML and CSS, here’s a few helpful resources.

Feel free to reach out to share your creations, or let me know if you get stuck on anything, And be on a lookout for more webmaking tutorials!