January 5, 2018
This tutorial covers how I set up an old portfolio website. I’m leaving this article up in case this setup can help anyone answer questions with their site, but please take recommendations found here with a grain of salt as they may be outdated. I’m currently using Github Pages and Jekyll.
If you’ve done a little web development in the past, or have worked with content management systems like WordPress, then everything I’ll go over should be fairly easy to implement. If this is your first attempt at getting your photography out into the world without the aid of social media, then a few of the steps I write about might cause some head scratching and take a little extra research. Just like learning to code, remember that all of your questions will most likely have already been answered online, so if you get stuck, get Googling.
In the past I’ve built websites using WordPress with hosting by DreamHost. I was just learning website development and had some issues, but found that DreamHost did a great job with customer service and the learning curve wasn’t very steep. I still recommend both services. WordPress took a little time to figure out, but I moved from using stock themes to creating my own custom code in under a year. Again, I would recommend this route to anyone who has time to invest because WordPress is a powerful platform for website creation. This time around, however, I really just wanted to find an option that would be cheap and easy.
I’ve moved from a phase in my life where I was more web-developer and less photographer to a time where I’d prefer to spend more time behind a lens and less time in front of a computer screen. A big part of this change has to do with taking up film again, but I’ll save that discussion for a future post.
Set-up with 22Slides went smoothly – so smoothly that I don’t think it’s necessary to spend much time talking about how to get your photography portfolio up and running. Just sign up and follow their directions. Pricing is a flat $10 a month across the board. My site is pretty simple, but for that price 22Slides offers some cool features that I’m not currently taking advantage of like online sales. They also offer Flickr, Instagram, and Tumblr integration. I am using Dropbox integration (more on that later).
I picked Hover mainly because 22Slides has partnered with them to provide a free custom domain name for one year with no annual commitment. Hover’s services are a bit more expensive than other providers (.com web domains start at $12.99, email forwarding starts at $5 a year, mailboxes run $20 and up), but it was easier to just go with the flow.
Most photographers eventually reach the point where they need to deliver photos to clients, and many will be looking to sell downloads or prints from their website as well. Right now I don’t need the cost or complexity of a more capable e-commerce platform like Zenfolio or SmugMug, but I still want to be able to electronically deliver photos and files to clients for them to review or download. 22Slides uses Dropbox as a free and secure way to accomplish this.
22Slides makes Dropbox integration easy on the photographer’s side. The other pro is that clients don’t need to have a Dropbox login to use the service. Simplification for me and my clients – perfect. Once you’ve downloaded the desktop app, the 22Slides Dropbox file manager allows you to publish files to your website by simply putting them into your
Dropbox/Apps/22Slides folder on your computer. Your files automatically become available on your website. The directory you put your files into can also be password protected. If you really need to sell images you can still work that out with a 22Slides gallery and PayPal, but for me the Dropbox integration takes care of all of my needs. You can find more information about setting up Dropbox here.
Using Hover with my portfolio site was a no-brainer because of the ease of setup, however, I didn’t like the idea of using Tumblr, the linked blog platform used by 22Slides, even though, again, setup would have been simple and straightforward. I wanted to create a blog that was static, customizable, and allowed me to write in Markdown (just because I think Markdown is awesome). For me this meant going with Github Pages. Since the process of setting up my blog through Github was a little complicated, but ultimately satisfactory, I’ll use the rest of this post to explain the process.
The tutorial that brought it all together for me was this one by Barry Clark.
I decided just to write with the Atom word processor and then upload my Markdown text to the GitHub web interface. If you’re more accustomed to working with Git you might set up a local Jekyll environment or use the GitHub desktop app, but I didn’t see the need to set that up right now.
If you’re taking my advice and using the tutorial I mentioned above, I recommend skipping to the section where the author, Barry Clark, discusses forking a repository. He has created a template called Jekyll-Now that works really well.
The Jekyll-Now code contains boilerplate language and comments that makes the customization process simple, and the resulting static blog looks great. After making a few changes to your
_config.yaml file you’ll be on your way, and creating new posts is just a matter of formatting the title of your post correctly and putting it in the
Since I owned a custom domain name I wanted the URL for my blog to match. I would have preferred
regalophoto.com/blog, but that’s not an option using Hover with 22Slides. Don’t ask me to explain – I’m not up on the ins and outs of domain name hosting. However, setting up a custom address using a CNAME is possible and took no time at all. Instead of
regalophoto.com/blog I get
blog.regalophoto.com. That works for me.
I used the helpful instructions on tdhopper.com’s blog.
I also set up category links right below the title of each post by following this tutorial. There are a couple things I should add that might be obvious to some, but that I found a little confusing. First, add the
categories.html page at the root level of your code. Also, further down in the tutorial the author mentions adding code to your post layout. I put that code in
_layouts/post.html right under
page.title. Last, I created a categories page and did not use the “simple list of all posts inside a certain category” mentioned afterwards.
Setting up a link to my Github blog on the main 22Slides site was easy, too. I added some custom code to restrict 22Slides default linking behavior; clicking on the link would open a new tab, but I wanted my blog to open in the same tab. To change this I used a simple bit of code I found on the 22Slides blog.
Here’s the code in case you’d like your links to act the way I like them to – it should be inserted into the
Settings>Edit Custom Code>Body field:
<script> /* Make links to external sites open in same window */ $('nav a[target="_blank"]').removeAttr('target'); </script>
When I was working on my first photography website I remember that the thought of having to do any coding at all was pretty daunting, so I understand that the last section of this entry might sound a bit dense. Go ahead and give it a try. A 22Slides portfolio is something I believe most tech-savvy photographers can put together in a day, and if Github and Jekyll or Markdown sound scary, then you can always use Tumblr for your blog.
I hope you find this information helpful. Good luck with your project, and let me know how it goes.