Building an Online Art Portfolio on the Cheap

Over the last couple years I have been making art and photography but I haven't been sure how to share it. Instagram is a common go to for people. I am a fan of using social media for providing a taste of, and linking back to my content, but I don't like the idea of another platform having control over it. As a result, I wanted to find a place I could host all my images without incurring costs or having to build my own server.

Before we get into how I built it, you can check out my gallery here!

Concerns

By putting together my own solution I wanted to ensure that whatever I built would be fast to build, and easy to maintain. With my programing background I am fine with having to edit code when I upload images, but I don't want the process to keep me from uploading content.

I also wanted to minimize the time to build my solution while minimizing costs. I'll be honest I don't want to have to pay for off the shelf software on a regular basis. However building everything from scratch would also be a huge pain, so I needed to find trusted and (close to) free technologies.

Finally I needed to make sure that the experience for visitors was good. That means fast load times, a decent looking UI, and an easy to find page. Since the page was going to have a lot of images I especially wanted to ensure that I had a way to minimize image sizes (without impacting quality) and minimize internet bandwidth consumption. Whatever I built also had to be functional on desktop and mobile.

The Plan

A couple years ago I helped my brother put together his website with a gallery (check it out here) and I decided to take some of the knowledge I got there to come up with my solution. Here is a walkthrough of the technology I used and what it took:

• Domain: I already use Fbalashov.com as my personal website. I decided to make the gallery a subpage. The domain costs be about $11 a year. 
• Hosting: Github Pages - Github gives you the ability to host a website from your repository and use it with a custom domain name for free. You can see the gallery page here. And if you are looking to make your own github pages website you can find instructions here.
• The website code: Html and CSS - I kept it pretty darn simple and barebones.
• The image viewer: BaguetteBox - I wanted a gallery lightbox that was easy to setup and let me setup multiple galleries on the same page. This wasn't the most customizable option but it fit my needs, works well on mobile, and let me specify a smaller image to appear on the main page and a larger one in the lightbox. On top of that it used the MIT license and is free to use. 
• Image Hosting: Firebase Cloud Storage - This tool gives me free storage for up to 5 GB of data and, with the addition of a Script it will generate thumbnail versions of my images too! I originally tried using google drive, but drive didn't support thumbnail generation (and I didn't want to do it manually). The technology for thumbnail generation are covered two points down.
• Image Minification: TinyPng - I put all my photos through this tool before uploading them to firebase. This free tool will compress the photos you upload so they take less bandwidth when being sent to a user's browser. The terms of use (right now) also say that they only hold your data for 48 hours and respect your rights to your content.
• Thumbnail Generation: Firebase Script Samples -  I wanted to display thumbnail images on my gallery page while loading "full size" photos only when the lightbox was opened. This script was pretty easy to setup and does it automatically for me. The only caveat is that I had to upgrade my firebase to a "pay as you go plan". So far though, no cost has been generated for me from uploading my files and generating thumbnails.... Great Success! 

The Verdict

As you can see on the page, it works and meets most of my criteria. I would like to go back and update the styling to make it look nicer, but that is a job for future Fuad :P

The biggest painpoint is that uploading files to firebase and putting them on the website still requires a few too many steps. When I want to add a new file I need to:

1. Minimize my photos on my phone
2. Go to the firebase website from my phone and upload my photos
3. Update the Github page code to include the new images

This likely means I will infrequently upload a batch of files rather than doing it live, but that is okay with me for now. To address this I could:

1. Write or add a new script to minify my images on firebase so I don't have to use TinyPng.
2. Stop hardcoding the images I want to show on my website and instead add Javascript code that would pull all available photos from different folders in firebase cloud storage. This would be a day or two overhaul as I need to organize the types of photos into folders and would still need to update my webpage each time I want to add a new category.

Anyway, it works for me which is what I was going for :D, drop a comment if you found this helpful and share any variations that you may make for your projects!