I hand-coded my photographic website from scratch (and so can you)

My activities are scattered all over the web. Writing, photography, maintaining several software projects—I have my fingers in a lot of pies. It's fun, but also a problem. What should I put on my business card? And how do I gently nudge my readers to take a peek at my photos? And how should I showcase my photos that are not shared anywhere else? After grappling with these existential questions for quite a while, I decided to finally build myself a proper website.

Being lazy, I wanted to avoid doing any work and decided to go for Portfoliobox. It's a hosted service that makes it possible to build a portfolio-focused website. It's not cheap (at least not by my cheapskate standards), but I thought it would be money well spent. Turned out, I was wrong. Portfoliobox does allow you to whip up an online gallery by clicking and picking, so that was nice. But I quickly realized how constraining it is to limit your design to the provided templates. To be fair, Portfolio offers nice templates, but even the one I ended up using was more of a compromise than the ideal solution. And while Portfoliobox is fine for building, well, portfolios, the service is far from optimal for anything else. Its editing interface is plain awful, making writing anything beyond a short paragraph a real chore. In addition to being rather bare-bones, the so-called blog module puts a seemingly arbitrary limit on the number of posts you can have. There were other minor deficiencies not worth mentioning, but they all added up to the overall feeling of the service not meeting my needs and requirements. No Portfoliobox for me, then.

You know what? I'm going to build a photography website myself. That was what I decided after spending hours on researching other options and returning empty-handed. And why not? After all, I like building things as much as I enjoy taking photos, so I can have fun by going the DIY route, and I might even learn some useful skills in the process.

Right from the start, I dismissed the idea of using an existing web publishing system and static site generator. I'm not a developer by any stretch of imagination, but I do have a working knowledge of HTML, CSS, and PHP, so I was confident I would be able to cobble together something useful. In this day and age, building a website manually from scratch using nothing but HTML, CSS, and a dash of PHP coding seems decidedly antiquated, but hear me out. Say, you want to use a static website generator. First, you need to learn how to use it. Then you have to master its templating system, which in itself can be a daunting proposition. With the technical part sorted out, you can start pouring in content, and then generate the final result in... HTML. Basically, you are taking a detour to arrive at the same destination.

Things are not much better if you consider using a web publishing application like WordPress. Even the hosted version of WordPress requires attention and tweaking. I know, because I've been maintaining a blog there for more than ten years. Also, having a web-based interface for managing content is not something I need or even want. I do most of my work in Visual Studio Code, and with the right extension I can edit remote files without leaving the convenience of my preferred editing application.

Of course, setting up a complex website with hundreds of pages using nothing but a text editor is hardly the right way to go. But I see no need for anything fancy to build a simple home for my writings and photos. Indeed, I wanted to keep the overall structure of my website simple: a landing page, a handful of article pages, and several gallery pages.

I already had an inexpensive web hosting space that I use for running a handful of home-brewed applications, including a microblog and a link manager, so one less thing to worry about.

It took me a weekend to come up with a rough version of my website and a few extra days to iron out wrinkles. The landing page is 99% pure HTML. The 1% is reserved for a simple PHP code block that specifies the title of the page and enables a random header image. Each gallery page relies on a simple combination of PHP and CSS to present images in the specified directory as a responsive thumbnail grid. The Featherlight jQuery plugin takes care of displaying a large version of each image in a lightbox. For the sake of simplicity, I chose not to use thumbnails for previews. This approach does have a drawback, though. Since the browser pulls full versions of images when it loads a gallery, it does take time and bandwidth. To mitigate this issue, I optimized and resized images before adding them to the gallery.

For overall styling, I went with lit, a tiny CSS framework that is easy to understand and tweak even if you are no expert in CSS.

The unexpected benefit of opting for a hand-coded website was the fact that it forced me to carefully consider what to include. I couldn't just move into my new home with all the stuff I've accumulated during the years. Not only did I have to make deliberate choices, I also used this opportunity to re-evaluate my priorities.

I'll be the first to admit that the described solution is probably not very scalable and rather limited in scope. But if your requirements are as modest as mine, and you don't mind getting your hands dirty with a bit of coding grease, then this approach might be worth exploring. And you don't have to start from scratch: I released the basic design as a set of ready-to-use templates under the name slndr (pronounced slender).

Back © 2020 Dmitri Popov